Skip to content

Instantly share code, notes, and snippets.

@nathakits
Last active September 18, 2022 11:09
Show Gist options
  • Save nathakits/a51ebe6549dc66a8774ff3105e1c2607 to your computer and use it in GitHub Desktop.
Save nathakits/a51ebe6549dc66a8774ff3105e1c2607 to your computer and use it in GitHub Desktop.
SVG Animation - animating a circle along an svg path

SVG Animation - animating a circle along an svg path

Support

.container {
width: 15%;
margin: 5em auto;
}
/* svg path {
stroke: #000000;
stroke-width: 1.5px;
} */
.loop {
stroke: #000000;
stroke-width: 1px;
}
@keyframes offset {
to {
stroke-dashoffset: 0px;
}
}
.loop {
animation: offset 2s linear forwards;
}
.loop-circle {
transform: translate(-300, -300);
}
/* .arrow-l, .arrow-r, {
animation: offset 2s linear forwards;
} */
/* .loop {
stroke-dasharray: 590px;
stroke-dashoffset: 590px;
} */
<div class="container">
<svg id="_3.support" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 227.6 267.3">
<path class="bg" d="M175.9,201.7v21.7a5.7,5.7,0,0,1-9.8,4.1l-11.8-11.8a8.6,8.6,0,0,0-8.9-2.1A109.8,109.8,0,1,1,179.1,195,7.7,7.7,0,0,0,175.9,201.7Z" fill="#e5e5e5"/>
<path class="loop-l" d="M3.8,109.8a44,44,0,0,1,75-31l24.1,24.1,6.9,6.9,29.1,29.1,2,2a43.9,43.9,0,1,0,0-62.1l-23.1,23.1-8,8L80.7,138.9l-2,2a44,44,0,0,1-75-31.1Z" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" id="loop-l"/>
<path class="loop-r" d="M215.9,109.4a44,44,0,0,0-75-30.6l-23.1,23.1-8,8L80.7,138.9l-2,2a43.9,43.9,0,1,1,0-62.1l24.1,24.1,6.9,6.9,29.1,29.1,2,2a43.9,43.9,0,0,0,75-31.5Z" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" id="loop-r"/>
<circle class="loop-circle" cx="" cy="" r="6" fill="#97d2ad">
<animateMotion dur="6s" repeatCount="indefinite">
<mpath xlink:href="#loop-l"/>
</animateMotion>
</circle>
<circle class="loop-circle" cx="" cy="" r="6" fill="#97d2ad">
<animateMotion dur="6s" repeatCount="indefinite">
<mpath xlink:href="#loop-r"/>
</animateMotion>
</circle>
</svg>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment