+ 5

how to animate an <path>?

svg path

<path>

13th Sep 2017, 6:57 AM

caida dodosy

6 Answers

+ 14

https://code.sololearn.com/WrOMSWvp5N14/?ref=app

13th Sep 2017, 7:42 AM

Ranjan Bagri

+ 3

thanks

13th Sep 2017, 7:12 AM

caida dodosy

+ 3

please can you help me to animate this code with rotate or scale? <html> <head> </head> <body bgcolor="red"> <svg width="500" height="500"> <path d="M100 100 L105 95 L150 100 L155 145 L150 150 L100 150 Z" stroke="#FFFFFF" fill="Blue"></path> <path d="M105 95 L155 95 L155 145 L105 145 Z" stroke="#FFFFFF" fill="Blue"></path> </body> </html>

13th Sep 2017, 7:19 AM

caida dodosy

+ 2

path{ stroke-dasharray:10; stroke-dashoffset:10; fill:none; stroke:#000; } path:nth-child(1){animation:draw1 4s linear infinite} path:nth-child(2){animation:draw2 4s linear infinite} path:nth-child(3){animation:draw3 4s linear infinite} path:nth-child(4){animation:draw4 4s linear infinite} @keyframes draw1{ 20%,100% {stroke-dashoffset:0; } } @keyframes draw2{ 20% {stroke-dashoffset:10;} 40%,100% {stroke-dashoffset:0; } } @keyframes draw3{ 40% {stroke-dashoffset:10;} 60%,100% {stroke-dashoffset:0; } } @keyframes draw4{ 60% {stroke-dashoffset:10;} 80%,100% {stroke-dashoffset:0; } } or <svg width="220px" height="100px" viewBox="0 0 10 11"> <path d="M0,1 h10" /> <path d="M0,4 h10" /> <path d="M0,7 h10" /> <path d="M0,10 h10" /> </svg>

13th Sep 2017, 7:08 AM

MsJ