Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026
in Halle (Saale)
Beispiel:SVG-CSS-animation-3.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SVG mit CSS animieren - 3</title> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<style>
svg {
height: 18em;
}
path {
stroke: steelBlue;
fill: none;
stroke-width: 5;
stroke-dasharray: 900 900;
stroke-linejoin: round;
stroke-linecap: round;
animation: strokeAni 5s infinite linear;
}
@keyframes strokeAni {
0% { stroke-dashoffset: 900;}
100% { stroke-dashoffset: 0;}
}
</style>
</head> <body>
<svg viewBox="0 0 300 160"> <path d="M200,155 v-100 l-50,-51 l-50,51 h100 l-100,100 v-100 l100,100 h-100" /> </svg>
</body> </html>
