Beispiel:SVG-Icons-3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./Beispiel:Grundlayout.css"> <title>Shopping Icons – inline, animiert, mit Dialogen</title>

<style>

  1. controls{
 display:flex;
 flex-wrap:wrap;
 gap:.5rem;

}

  1. controls button{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 cursor:pointer;

}

  1. controls button svg{
 display:block;
 width:6em;
 aspect-ratio:1/1;

}

.visually-hidden{ 

 clip: rect(0 0 0 0);
 clip-path: inset(50%);
 height: 1px;
 overflow: hidden;
 position: absolute;
 white-space: nowrap;
 width: 1px;

}

svg, svg *{ pointer-events: all; }

.normal{ 

 fill:#ccc;
 stroke:#000;
 stroke-width:0.5;

}

.iconfill2{ fill:#09c; stroke:#09c; stroke-width:0.5; } .iconfill3{ fill:#95bc0b; stroke:#95bc0b; stroke-width:0.5; }

.animated{ fill:#666; } button:hover .animated, button:focus .animated, button:focus-visible .animated{ fill:#dfac20; }

/* Animationen */

/* shopping-cart */ .item{ 

 transform-box: fill-box;
 transform-origin: center;
 transform: translateY(-50px) rotate(-8deg);

} button:hover .item, button:focus .item, button:focus-visible .item{ 

 animation: dropHop .7s linear forwards;

} @keyframes dropHop{ 

 0%   { transform: translateY(-70px) rotate(-50deg); }
 70%  { transform: translateY(-2px) rotate(10deg); }
 90%  { transform: translateY(-5px) rotate(-5deg); }
 100% { transform: translateY(0) rotate(0deg); }

}

/* payment */ .card-terminal{ 

 transform: translateX(30px);
 transition: transform 1s ease;

} button:hover .card-terminal, button:focus .card-terminal, button:focus-visible .card-terminal{ 

 transform: translateX(0px);

} .display-end{ 

 opacity:0;
 transition: opacity .3s ease;

} button:hover .display-end, button:focus .display-end, button:focus-visible .display-end{ 

 transition-delay: 1.5s;
 opacity:1;

} @media (prefers-reduced-motion: reduce){ 

 .card-terminal{transition:none;transform:translateX(0px)}
 .display-end{transition:none;opacity:1}
 .display-end{display:none}

}

/* truck */ .truck, .truck-smoke{ 

 transform-box: fill-box;
 transform-origin: center;

} .truck-smoke{ transform: scale(0); opacity: 0; }

button:hover .truck, button:focus .truck, button:focus-visible .truck{ 

 animation: truck-start 2s linear both, truck-loop 4s linear 2s infinite;

} button:hover .truck-smoke, button:focus .truck-smoke, button:focus-visible .truck-smoke{ 

 animation: smoke-puff .5s ease-out infinite;

}

@keyframes truck-start { from {transform:translateX(0)} to {transform:translateX(90px)} } @keyframes truck-loop { from {transform:translateX(-90px)} to {transform:translateX(90px)} } @keyframes smoke-puff{ 

 0% {transform: translateX(15px) translateY(10px) scale(0); opacity: 0}
 20% {opacity: .7}
 60% {transform: translateX(-6px) scale(1); opacity:.4}
 100% {transform: translateX(-10px) scale(1.1); opacity:0}

}

/* envelope */ .flap{ 

 transform-box: fill-box;
 transform-origin: center top;
 transform: rotateX(0deg);
 transition: transform .5s ease;

} .paper{ 

 transform-box: fill-box;
 transform-origin: center bottom;
 transform: scaleY(0);
 transition: transform 1s ease;

} button:hover .flap, button:focus .flap, button:focus-visible .flap{ transform: rotateX(180deg); } button:hover .paper, button:focus .paper, button:focus-visible .paper{ 

 transition-delay: .2s;
 transform: scaleY(1);

}

/* telephone */ .receiver{ transform-box: fill-box; transform-origin: center; } .wave{ 

 stroke:#ccc;
 stroke-width:1;
 opacity:0;
 transform-box: fill-box;
 transform-origin:center;
 fill:none;

} @keyframes ring{ 

 0% {transform: rotate(0deg)}
 10% {transform: rotate(9deg)}
 20% {transform: rotate(-9deg)}
 30% {transform: rotate(8deg)}
 40% {transform: rotate(-8deg)}
 50% {transform: rotate(5deg)}
 60% {transform: rotate(-5deg)}
 100% {transform: rotate(0deg)}

} @keyframes pulse{ 

 0% {opacity: 0; transform: scale(.7)}
 35% {opacity: 1}
 100% {opacity: 0;transform: scale(1.2)}

} button:hover .receiver, button:focus .receiver, button:focus-visible .receiver{ animation: ring 1s ease-in-out infinite; } button:hover .wave, button:focus .wave, button:focus-visible .wave{ animation: pulse .8s ease-out infinite; }

/* user account */ .head{ fill:#ccc; transition:fill .3s ease } .body{ fill:#ccc; transition:fill .3s ease } .eyeLines{ opacity:1; transition:opacity .2s ease } .eyeDots{ opacity:0; transition:opacity .2s ease } .mouth-half{ 

 fill:none;
 stroke:#000;
 stroke-width:.8;
 stroke-linecap:round;
 stroke-dasharray:30;
 stroke-dashoffset:30;
 transition:stroke-dashoffset .5s ease-in;

} button:hover .head, button:focus .head, button:focus-visible .head{ fill:#f2c7a6 } button:hover .body, button:focus .body, button:focus-visible .body{ fill:steelblue } button:hover .eyeLines, button:focus .eyeLines, button:focus-visible .eyeLines{ opacity:0 } button:hover .eyeDots, button:focus .eyeDots, button:focus-visible .eyeDots{ opacity:1 } button:hover .mouth-half, button:focus .mouth-half, button:focus-visible .mouth-half{ stroke-dashoffset:0 }

@media (prefers-reduced-motion: reduce){ 

 .head{transition:none;fill:#f2c7a6}
 .body{transition:none;fill:steelblue}
 .eyeDots{opacity:1}
 .mouth-half{transition:none;stroke-dashoffset:0}

}

/* wishlist */ .wish-line{ 

 stroke:#bbb;
 stroke-width:1.1;
 transition:stroke .2s ease;

} .wish-check{ 

 stroke: green;
 stroke-width:1.4;
 fill:none;
 stroke-linecap:round;
 stroke-linejoin:round;
 opacity:0;
 transform:translateY(1.5px);
 transition:opacity .2s ease, transform .2s ease;

} .wish-check.delay1{ transition-delay:.1s } .wish-check.delay2{ transition-delay:.2s } .wish-check.delay3{ transition-delay:.3s }

.wish-heart{ 

 fill:#e53935;
 transform-origin:31px 19px;
 transform-box:fill-box;

} button:hover .wish-heart, button:focus .wish-heart, button:focus-visible .wish-heart{ animation:wish-heartBeat .4s ease both; }

button:hover .wish-check, button:focus .wish-check, button:focus-visible .wish-check{ 

 opacity:1;
 transform:translateY(0);

} button:hover .wish-line, button:focus .wish-line, button:focus-visible .wish-line{ stroke:#000; }

@keyframes wish-heartBeat{ 

 0%{transform:scale(1)}
 45%{transform:scale(1.12)}
 75%{transform:scale(.98)}
 100%{transform:scale(1)}

}

@media (prefers-reduced-motion: reduce){ 

 .wish-heart{animation:none}
 .wish-check{opacity:1;transform:none;transition:none}
 .wish-line{transition:none}

}

/* battery */ .battery-loading rect{ 

 opacity:0;
 fill:#02d00b;

} button:hover .battery-loading rect, button:focus-within .battery-loading rect{ 

 opacity:1;
 animation: charge 2s infinite;

} button:hover .battery-loading rect:nth-child(2), button:focus-within .battery-loading rect:nth-child(2){ animation-delay:.2s; } button:hover .battery-loading rect:nth-child(3), button:focus-within .battery-loading rect:nth-child(3){ animation-delay:.4s; } button:hover .battery-loading rect:nth-child(4), button:focus-within .battery-loading rect:nth-child(4){ animation-delay:.6s; }

@keyframes charge{ 

 0%,30%,100%{ opacity:.1 }
 70%{ opacity:1 }

}

/* speaker */ .speaker{ 

 transform-box: fill-box;
 transform-origin: left center;

} button:hover .speaker, button:focus .speaker, button:focus-visible .speaker{ animation: speakerPump .7s ease-in-out infinite; }

@keyframes speakerPump{ 

 0%,100%{ transform: scaleX(1) scaleY(1) }
 50%{ transform: scaleX(1.1) scaleY(1.03) }

}

.speaker-sound{ 

 transform-box: fill-box;
 transform-origin: left center;
 opacity:0;
 fill:none;
 stroke:#ccc;
 stroke-linecap:round;
 stroke-width:2px;
 pointer-events:none;

} .speaker-sound path{ 

 transform-box: fill-box;
 transform-origin: left center;
 opacity:0;
 transform: scale (.8);

} button:hover .speaker-sound, button:focus .speaker-sound, button:focus-visible .speaker-sound{ opacity:1; }

button:hover .speaker-sound path, button:focus .speaker-sound path, button:focus-visible .speaker-sound path{ 

 animation: arcIn .2s ease forwards, arcPump .9s ease-in-out infinite;

} @keyframes arcIn{ from{opacity:0;transform:scale(.8)} to{opacity:1;transform:scale(1)} } @keyframes arcPump{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }

button:hover .speaker-sound path:nth-child(2), button:focus .speaker-sound path:nth-child(2), button:focus-visible .speaker-sound path:nth-child(2){ animation-delay:.1s,.1s; } button:hover .speaker-sound path:nth-child(3), button:focus .speaker-sound path:nth-child(3), button:focus-visible .speaker-sound path:nth-child(3){ animation-delay:.2s,.2s; } button:hover .speaker-sound path:nth-child(4), button:focus .speaker-sound path:nth-child(4), button:focus-visible .speaker-sound path:nth-child(4){ animation-delay:.3s,.3s; }

/* Reduced motion: keine Animation bei Hover/Focus */ @media (prefers-reduced-motion: reduce) { 

 button:hover *,
 button:focus *,
 button:focus-visible *{
   animation:none !important;
 }

}

dialog{ position:relative; } dialog::backdrop{ background: rgb(0 0 0 / 0.5); } dialog .close-dialog{ 

 position:absolute;
 right:0;
 top:0;
 width:1.5em;
 aspect-ratio:1;
 cursor:pointer;
 background-color:red;
 background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10%2C10 l30%2C30 m0-30 l-30%2C30' fill='none' stroke='white' stroke-width='9' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
 border:0;
 border-radius:0 .5em .5em;

} </style> </head>

<body>

Web-Shop

Icons inline, animiert, mit Dialogen

<nav id="controls"> 

 <button command="show-modal" commandfor="dlg-cart">
   
   <svg viewBox="0 0 59 59" aria-hidden="true" focusable="false">
     <desc>Icon Einkaufswagen – Produkt fällt hinein</desc>
     <g class="normal" style="stroke-linecap:round;stroke-linejoin:round">
       <rect class="item" x="26" y="32" width="18" height="15" rx="1" ry="1" fill="steelblue"/>
       <g fill="none">
         <path d="M 15,33 H 50 M 15,38 H 48 M 16,43 H 47" stroke="#ccc"/>
         <path d="m 5,20 h 8 l 3,28 H 46 L 51,28 H 14" stroke-width="1"/>
         <circle cx="21" cy="53" r="4" fill="#ccc"/>
         <circle cx="41" cy="53" r="4" fill="#ccc"/>
       </g>
     </g>
   </svg>
 </button>

 <button command="show-modal" commandfor="dlg-payment">
   
   <svg viewBox="0 0 59 59" aria-hidden="true" focusable="false">
     <desc>Icon Kreditkarte wird belastet</desc>
     <g class="card-terminal normal">
       <rect x="31" y="4" width="24" height="38" rx="3" ry="3"/>
       <g class="display-start">
         <rect x="33" y="6" width="20" height="14" rx="2" ry="2" fill="#fff"/>
         <g transform="matrix(0.00128, 0, 0, 0.00128, 40.26776, 12.1155)">
           <path style="fill:none;stroke:#090909;stroke-width:921;stroke-linecap:round" d="m 2690,-3680 c 2580,2210 2580,6260 0,8470 M 1210,-2210 c 1850,1843 1850,3690 0,5530 M -260,-736 c 737,737 737,1846 0,2576"/>
         </g>
       </g>
       <g class="display-end">
         <rect x="33" y="6" width="20" height="14" rx="2" ry="2" fill="#73ff00"/>
         <path d="M49 8L42 18L39 15" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
       </g>
       <g class="terminal-keys" fill="#fff">
         <rect x="33" y="24" width="6" height="3" rx="1" ry="1"/>
         <rect x="40" y="24" width="6" height="3" rx="1" ry="1"/>
         <rect x="47" y="24" width="6" height="3" rx="1" ry="1"/>
         <rect x="33" y="29" width="6" height="3" rx="1" ry="1"/>
         <rect x="40" y="29" width="6" height="3" rx="1" ry="1"/>
         <rect x="47" y="29" width="6" height="3" rx="1" ry="1"/>
         <rect x="33" y="34" width="6" height="3" rx="1" ry="1"/>
         <rect x="40" y="34" width="6" height="3" rx="1" ry="1"/>
         <rect x="47" y="34" width="6" height="3" rx="1" ry="1"/>
       </g>
     </g>

     <g class="credit-card normal">
       <path d="m 0,43 c 7,-4 8,-8 13,-10 2,-1 5,-1 5,-1 v 20 c 0,0 -1,1 -2,2 -5,2 -11,-1 -16,0"/>
       <rect x="16" y="30" width="29" height="20" rx="3" ry="3"/>
       <rect x="16" y="34" width="29" height="4" style="fill:black;stroke:none"/>
       <path d="m 14,46 c 1,1 3,1 8,-3 5,-4 9,-2 8,0 l -3,3 c -4,2 -6,4 -6,4 l -5,4"/>
     </g>
   </svg>
 </button>

 <button command="show-modal" commandfor="dlg-truck">
   
   <svg viewBox="0 0 59 59" aria-hidden="true" focusable="false">
     <desc>Icon Lastwagen fährt</desc>
     <g class="truck normal">
       <rect x="3" y="18" width="32" height="32" rx="2" ry="2" style="fill:#d8d8d8; stroke:#000"/>
       <path d="m 56,41 v 6 c 0,0 0,3 -2,3 H 33 V 29 c 0,-3 2,-3 2,-3 h 9 c 1,0 2,1 2,1 l 9,11 c 1,1 1,3 1,3 z m -6,-2 v -3 l -6,-7 h -7 v 10 z" style="fill:steelblue; stroke:#000"/>
       <circle cx="15" cy="51" r="5" style="fill:#ccc; stroke:#000; stroke-width:3px"/>
       <circle cx="43" cy="51" r="5" style="fill:#ccc; stroke:#000; stroke-width:3px"/>
       <path class="truck-smoke" style="fill:grey; stroke:#000;" d="m -11,35 c -5,4 1,9 4,6 7,4 7,-2 4,-5 0,-5 -6,-7 -8,-1 z"/>
     </g>
   </svg>
 </button>

 <button command="show-modal" commandfor="dlg-envelope">
   
   <svg viewBox="0 0 59 59" aria-hidden="true" focusable="false">
     <desc>Icon Briefumschlag öffnet sich</desc>
     <g class="normal" style="stroke-linecap:round;stroke-linejoin:round">
       <rect x="5" y="25" width="50" height="32"/>
       <polygon points="5,25 5,57 55,57 55,25 30,44"/>
       <polygon class="flap" points="5,25 55,25 30,44"/>
       <rect class="paper" x="8" y="14" width="44" height="41" fill="#fff"/>
       <polygon points="5 25 5 57 55 57 55 25 30 44"/>
     </g>
   </svg>
 </button>

 <button command="show-modal" commandfor="dlg-phone">
   
   <svg viewBox="0 0 59 59" aria-hidden="true" focusable="false">
     <desc>Icon Telefon klingelt</desc>
     <g class="normal" style="stroke-linecap:round; stroke-linejoin:round">
       <path class="wave" d="M 11,18 C 7,22 7,36 11,40"/>
       <path class="wave" d="m 7.5,14.5 c -6,6 -6,25 0,31"/>
       <path class="wave" d="m 48,18 c 4,4 4,18 0,22"/>
       <path class="wave" d="m 51.5,14.5 c 6,6 6,25 0,31"/>
       <path class="receiver" d="m 52,24 c 4,3 5,12 0,12 0,0 -6,0 -9,-3 -2,-2 1,-3 0,-6 0,-1 -6,-3 -13,-3 -7,0 -13,2 -13,3 -1,3 2,4 0,6 -3,3 -9,3 -9,3 -5,0 -4,-9 0,-12 0,0 7,-6 22,-6 15,0 22,6 22,6 z"/>
       <path d="m 8,57 v -7 l 12,-19 1,-5 h 4 v 3 h 10 v -3 h 4 l 1,5 12,19 v 7 z"/>
       <circle cx="30" cy="40" r="10" style="fill:white;"/>
       <circle cx="30" cy="40" r="4" style="fill:none;"/>
     </g>
   </svg>
 </button>

 <button command="show-modal" commandfor="dlg-account">
   
   <svg viewBox="0 0 59 59" aria-hidden="true" focusable="false">
     <desc>Icon Benutzerkonto</desc>
     <g class="normal">
       <path class="body" d="M 7,50 C 7,39 21,35 21,35 h 18 c 0,0 14,4 14,15 v 7 H 7 Z"/>
       <circle class="head" cx="30" cy="19" r="14"/>
       <g class="eyeLines" stroke="#000">
         <line x1="23" y1="18" x2="27" y2="18"/>
         <line x1="33" y1="18" x2="37" y2="18"/>
       </g>
       <g class="eyeDots" fill="#000">
         <circle cx="25" cy="18" r="2"/>
         <circle cx="35" cy="18" r="2"/>
       </g>
       <path class="mouth-half" pathLength="30" d="m 30,27 c -3,0 -5,-1 -6,-3"/>
       <path class="mouth-half" pathLength="30" d="m 30,27 c 3,0 5,-1 6,-3"/>
     </g>
   </svg>
 </button>

 <button command="show-modal" commandfor="dlg-wishlist">
   
   <svg viewBox="0 0 59 59" aria-hidden="true" focusable="false">
     <desc>Icon Wunschliste / Favoriten</desc>
     <g class="normal">
       <rect x="9" y="3" width="40" height="54"/>
       <g>
         <path class="wish-check delay1" d="m 12,33 2,2 4,-4"/>
         <path class="wish-check delay2" d="m 12,41 2,2 4,-4"/>
         <path class="wish-check delay3" d="m 12,49 2,2 4,-4"/>
       </g>
       <path class="wish-heart" d="M 34,9 C 32,7 31,6 28,6 c -3,0 -6,3 -6,6 0,6 3,7 12,15 9,-8 12,-9 12,-15 0,-3 -3,-6 -6,-6 -3,0 -4,1 -6,3 z" style="fill:red;"/>
       <line class="wish-line" x1="23" y1="34" x2="46" y2="34"/>
       <line class="wish-line" x1="23" y1="42" x2="46" y2="42"/>
       <line class="wish-line" x1="23" y1="50" x2="46" y2="50"/>
     </g>
   </svg>
 </button>

 <button command="show-modal" commandfor="dlg-battery">
   
   <svg viewBox="0 0 59 59" aria-hidden="true" focusable="false">
     <desc>Icon Batterie wird geladen</desc>
     <g class="normal">
       <rect width="9" height="14" rx="3" ry="3" x="47" y="23"/>
       <rect width="48" height="34" rx="4" ry="4" x="3" y="13"/>
       <g class="battery-loading" stroke="none">
         <rect width="9" height="28" rx="2" ry="2" x="6"  y="16"/>
         <rect width="9" height="28" rx="2" ry="2" x="17" y="16"/>
         <rect width="9" height="28" rx="2" ry="2" x="28" y="16"/>
         <rect width="9" height="28" rx="2" ry="2" x="39" y="16"/>
       </g>
     </g>
   </svg>
 </button>

 <button command="show-modal" commandfor="dlg-speaker">
   
   <svg viewBox="0 0 59 59" aria-hidden="true" focusable="false">
     <desc>Icon Lautsprecher tönt</desc>
     <g class="speaker normal">
       <path d="M 25,47 V 14 c 0,-3 -3,-2 -3,-2 L 11,24 H 6 c -3,0 -3,3 -3,3 v 7 c 0,0 0,4 3,4 h 5 l 11,11 c 0,0 3,1 3,-2 z"/>
       <g class="speaker-sound">
         <path d="m 29,23 c 2,4 2,10 0,16"/>
         <path d="m 34,18 c 4,7 5,17 1,25"/>
         <path d="m 40,13 c 6,11 6,24 1,35"/>
         <path d="m 47,8 c 6,14 7,30 0,45"/>
       </g>
     </g>
   </svg>
 </button>

</nav>

<dialog id="dlg-cart" closedby="any">

Einkaufswagen

Wie Sie sehen, gibt es hier noch nichts zu sehen.

 <button class="close-dialog" command="close" commandfor="dlg-cart"></button>

</dialog>

<dialog id="dlg-payment" closedby="any">

Zahlung

Wie Sie sehen, gibt es hier noch nichts zu sehen.

 <button class="close-dialog" command="close" commandfor="dlg-payment"></button>

</dialog>

<dialog id="dlg-truck" closedby="any">

Versand

Wie Sie sehen, gibt es hier noch nichts zu sehen.

 <button class="close-dialog" command="close" commandfor="dlg-truck"></button>

</dialog>

<dialog id="dlg-envelope" closedby="any">

E-Mail

Wie Sie sehen, gibt es hier noch nichts zu sehen.

 <button class="close-dialog" command="close" commandfor="dlg-envelope"></button>

</dialog>

<dialog id="dlg-phone" closedby="any">

Telefon

Wie Sie sehen, gibt es hier noch nichts zu sehen.

 <button class="close-dialog" command="close" commandfor="dlg-phone"></button>

</dialog>

<dialog id="dlg-account" closedby="any">

Benutzerkonto

Wie Sie sehen, gibt es hier noch nichts zu sehen.

 <button class="close-dialog" command="close" commandfor="dlg-account"></button>

</dialog>

<dialog id="dlg-wishlist" closedby="any">

Wunschliste

Wie Sie sehen, gibt es hier noch nichts zu sehen.

 <button class="close-dialog" command="close" commandfor="dlg-wishlist"></button>

</dialog>

<dialog id="dlg-battery" closedby="any">

Batterie

Wie Sie sehen, gibt es hier noch nichts zu sehen.

 <button class="close-dialog" command="close" commandfor="dlg-battery"></button>

</dialog>

<dialog id="dlg-speaker" closedby="any">

Lautsprecher

Wie Sie sehen, gibt es hier noch nichts zu sehen.

 <button class="close-dialog" command="close" commandfor="dlg-speaker"></button>

</dialog>

</body> </html>

Abgerufen am 10.01.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:SVG-Icons-3.html"