Skip to content

Instantly share code, notes, and snippets.

@gfscott

gfscott/index.html

Created June 5, 2017 20:53
Show Gist options
  • Save gfscott/776d126b942a56f4c0a985339d3d0a74 to your computer and use it in GitHub Desktop.
Save gfscott/776d126b942a56f4c0a985339d3d0a74 to your computer and use it in GitHub Desktop.
Download ZIP
SVG Dash Stroke Offset Animation Test
Raw
index.html
<div class="c">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<path class="trace" fill="transparent" stroke="red" stroke-width="4" d="M21 25s91-15 121 17-77 78-77 78 141 2 97 27 24 32 24 32"/>
</svg>
</div>
Raw
style.css
div.c {
width: 200px;
height: 200px;
margin: 0 auto;
}
path.trace {
stroke-dasharray: 600;
animation: indy 5s linear reverse infinite;
}
@keyframes indy {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 1000;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment