Skip to content

Instantly share code, notes, and snippets.

@bedekelly

bedekelly/circle-drawing.css

Created March 24, 2019 09:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bedekelly/564da782700f0dc05da70f0ae288ff18 to your computer and use it in GitHub Desktop.
Save bedekelly/564da782700f0dc05da70f0ae288ff18 to your computer and use it in GitHub Desktop.
Download ZIP
Animate Drawing a Circle
Raw
circle-drawing.css
.ring.two {
stroke-dasharray: calc(2 * 3.1415 * 58);
stroke-dashoffset: calc(2 * 3.1415 * 58);
stroke-dashoffset: -calc(2 * 3.1415 * 58);
transform: rotate(-90deg);
transition: stroke-dashoffset linear 0.5s;
}
.button:hover .ring.two {
stroke-dashoffset: 0;
transition: stroke-dashoffset linear 0.5s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment