Skip to content

Instantly share code, notes, and snippets.

Created March 16, 2018 08:26
Show Gist options
  • Save anonymous/c1790e01da91525eebcfdf9da210380e to your computer and use it in GitHub Desktop.
Save anonymous/c1790e01da91525eebcfdf9da210380e to your computer and use it in GitHub Desktop.
svg polyline {
stroke-dasharray: 120;
stroke-dashoffset: 0;
}
svg:hover polyline {
animation: a .8s ease-out
}
@keyframes a {
from {
stroke-dashoffset: -120;
}
to {
stroke-dashoffset: 0;
}
}
<svg version="1.1" height="300" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 161.2 161.2" enable-background="new 0 0 161.2 161.2" xml:space="preserve">
<circle cx="80.6" cy="80.6" stroke-width="4" stroke="#7DB0D5" r="60" fill="none" />
<polyline class="path" fill="none" stroke="#7DB0D5" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="113,52.8
74.1,108.4 48.2,86.4 "></polyline>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment