Animation with SVG
-
Hello everyone I wanted to animate my logo with SVG.
I want that every path is drawn after the other. Once all paths are drawn I want to erase the paths backwards. And this should be in a loop.
I can draw and erase the paths thats no problem. But how do I syncronise the paths draw and delete and make it look smooth?here is my svg code:
<svg xmlns="http://www.w3.org/2000/svg" width="574" height="458" fill="none" viewBox="0 0 574 458"> <style> .animated-path1 { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation-fill-mode: forwards; animation: draw 1s linear 1s infinite, erase 3s linear 1s infinite; } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes erase { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 1000; } } </style> <g id="path1" class="animated-path1" fill="none" stroke="black" stroke-width="60"> <path stroke-linecap="round" d="M30.2 427.9 l513.9 0" /> </g> <g id="path2" class="animated-path" fill="none" stroke="black" stroke-width="60"> <path stroke-linecap="round" d="M544.1 427.9 l-182 -315" /> </g> <g id="path3" class="animated-path" fill="none" stroke="black" stroke-width="60"> <path stroke-linecap="round" d="M362.1 112.9 l-100 +200" /> </g> <g id="path4" class="animated-path" fill="none" stroke="black" stroke-width="60"> <path stroke-linecap="round" d="M327 182.2 l-81 -152" /> </g> <g id="path5" class="animated-path" fill="none" stroke="black" stroke-width="60"> <path stroke-linecap="round" d="M246 30.2 l-216 398" /> </g> <g id="path6" class="animated-path" fill="none" stroke="black" stroke-width="60"> <path stroke-linecap="round" d="M148 211 l165 0" /> </g> </svg>
Thank you very much