Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026 in Halle (Saale)

Beispiel:SVG-CSS-animation-2.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"> <title>Kreis zeichnen mit SVG + CSS</title> 

 <style>
   svg { height: 15em; }

   circle {
     stroke: steelblue;
     fill: none;
     stroke-width: 5;
     stroke-dasharray: 1;
     stroke-dashoffset: 1;
     animation: drawCircle 3s linear infinite;
   }

   @keyframes drawCircle {
     to { stroke-dashoffset: 0; }
   }
 </style>

</head> <body> 

 <svg viewBox="0 0 120 120">
   <circle pathLength="1" cx="60" cy="60" r="50" />
 </svg>

</body> </html>

Abgerufen am 28.01.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:SVG-CSS-animation-2.html"