<style>
.path {
stroke:#fff;
stroke-width:2;
}
svg:hover .path {
stroke:#fff;
stroke-width:2;
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: dash 3s ease-in forwards;
fill: none;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
</style>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="302px" height="297px" viewBox="0 0 302 297" enable-background="new 0 0 302 297" xml:space="preserve">
<circle class="path" fill="none" stroke="#211915" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" cx="150.129" cy="148.781" r="69.5"/>
</svg>
Easy svg line animation with mouse hover.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.