Skip to content

Instantly share code, notes, and snippets.

@Hedyla55

Hedyla55/Bicycletyreanim.markdown

Created August 8, 2015 01:09
Show Gist options
  • Save Hedyla55/9cedf4f0a2fe0c2b49e6 to your computer and use it in GitHub Desktop.
Save Hedyla55/9cedf4f0a2fe0c2b49e6 to your computer and use it in GitHub Desktop.
Download ZIP
Bicycletyreanim
Raw
index.html
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g id="Layer_1">
<ellipse fill="#FFFFFF" stroke="#cccccc" stroke-width="5" stroke-miterlimit="10" cx="246.3" cy="257.1" rx="9.6" ry="7.1"/>
<ellipse fill="#FFFFFF" stroke="#cccccc" stroke-width="5" stroke-miterlimit="10" cx="246.3" cy="257.1" rx="9.6" ry="7.1"/>
<ellipse fill="none" stroke="#cccccc" stroke-width="5" stroke-miterlimit="10" cx="249.3" cy="249.8" rx="185.4" ry="170.4"/>
<ellipse fill="#FFFFFF" stroke="#cccccc" stroke-width="5" stroke-miterlimit="10" cx="249.3" cy="253.1" rx="9.6" ry="7.1"/>
<path fill="none" stroke="#cccccc" stroke-width="2" stroke-miterlimit="10" d="M258.8,260.2"/>
<polyline fill="none" stroke="#cccccc" stroke-width="2" stroke-miterlimit="10" points="417.6,178.3 249.3,260.2 61.2,264.2 "/>
<path fill="none" stroke="#cccccc" stroke-width="2" stroke-miterlimit="10" d="M344.5,103.5"/>
<line fill="none" stroke="#cccccc" stroke-width="2" stroke-miterlimit="10" x1="255.6" y1="257.1" x2="171.6" y2="404.5"/>
<path fill="none" stroke="#cccccc" stroke-width="2" stroke-miterlimit="10" d="M344.5,103.5c0,0,0,0-95.3,142.5L92.8,158.2"/>
<polyline fill="none" stroke="#cccccc" stroke-width="2" stroke-miterlimit="10" points="102.5,353.9 239.7,253.1 158.6,103.5 "/>
<polyline fill="none" stroke="#cccccc" stroke-width="2" stroke-miterlimit="10" points="423.6,303.5 249.3,246 430.2,212.5 "/>
<path fill="none" stroke="#cccccc" stroke-width="2" stroke-miterlimit="10" d="M267.6,80.2c0,0-11.2,168.2-8.7,172.9L312,410.2"/>
<polyline fill="none" stroke="#cccccc" stroke-width="2" stroke-miterlimit="10" points="430.2,275.3 249.3,260.2 73.3,303.5 "/>
<path fill="none" stroke="#cccccc" stroke-width="2" stroke-miterlimit="10" d="M245.4,245.2"/>
<polyline fill="none" stroke="#cccccc" stroke-width="2" stroke-miterlimit="10" points="316.1,90.8 239.7,253.1 222.4,418.4 "/>
<polyline fill="none" stroke="#cccccc" stroke-width="2" stroke-miterlimit="10" points="391,139.9 249.3,260.2 269.3,422.9 "/>
<line fill="none" stroke="#cccccc" stroke-width="2" stroke-miterlimit="10" x1="249.3" y1="246" x2="222.4" y2="80.2"/>
<line fill="none" stroke="#cccccc" stroke-width="2" stroke-miterlimit="10" x1="68.3" y1="212.5" x2="239.7" y2="253.1"/>
<polyline fill="none" stroke="#cccccc" stroke-width="2" stroke-miterlimit="10" points="355.9,389.2 258.8,253.1 400,345 "/>
<line fill="none" stroke="#cccccc" stroke-width="2" stroke-miterlimit="10" x1="134.2" y1="383.4" x2="239.4" y2="260.2"/>
</g>
<g id="Layer_2">
<ellipse fill="#FFFFFF" stroke="#000000" class="path" stroke-width="5" stroke-miterlimit="10" cx="249.3" cy="249.8" rx="185.4" ry="170.4"/>
<ellipse fill="#FFFFFF" stroke="#000000" class="path" stroke-width="5" stroke-miterlimit="10" cx="249.3" cy="253.1" rx="9.6" ry="7.1"/>
<path fill="none" stroke="#000000" class="path" stroke-width="2" stroke-miterlimit="10" d="M258.8,260.2"/>
<polyline fill="none" stroke="#000000" class="path" stroke-width="2" stroke-miterlimit="10" points="417.6,178.3 249.3,260.2 61.2,264.2 "/>
<path fill="none" stroke="#000000" class="path" stroke-width="2" stroke-miterlimit="10" d="M344.5,103.5"/>
<line fill="none" stroke="#000000" class="path" stroke-width="2" stroke-miterlimit="10" x1="255.6" y1="257.1" x2="171.6" y2="404.5"/>
<path fill="none" stroke="#000000" class="path" stroke-width="2" stroke-miterlimit="10" d="M344.5,103.5c0,0,0,0-95.3,142.5L92.8,158.2"/>
<polyline fill="none" stroke="#000000" class="path" stroke-width="2" stroke-miterlimit="10" points="102.5,353.9 239.7,253.1 158.6,103.5 "/>
<polyline fill="none" stroke="#000000" class="path" stroke-width="2" stroke-miterlimit="10" points="423.6,303.5 249.3,246 430.2,212.5 "/>
<path fill="none" stroke="#000000" class="path" stroke-width="2" stroke-miterlimit="10" d="M267.6,80.2c0,0-11.2,168.2-8.7,172.9L312,410.2"/>
<polyline fill="none" stroke="#000000" class="path" stroke-width="2" stroke-miterlimit="10" points="430.2,275.3 249.3,260.2 73.3,303.5 "/>
<path fill="none" stroke="#000000" class="path" stroke-width="2" stroke-miterlimit="10" d="M245.4,245.2"/>
<polyline fill="none" stroke="#000000" class="path" stroke-width="2" stroke-miterlimit="10" points="316.1,90.8 239.7,253.1 222.4,418.4 "/>
<polyline fill="none" stroke="#000000" class="path" stroke-width="2" stroke-miterlimit="10" points="391,139.9 249.3,260.2 269.3,422.9 "/>
<line fill="none" stroke="#000000" class="path" stroke-width="2" stroke-miterlimit="10" x1="249.3" y1="246" x2="222.4" y2="80.2"/>
<line fill="none" stroke="#000000" class="path" stroke-width="2" stroke-miterlimit="10" x1="68.3" y1="212.5" x2="239.7" y2="253.1"/>
<polyline fill="none" stroke="#000000" class="path" stroke-width="2" stroke-miterlimit="10" points="355.9,389.2 258.8,253.1 400,345 "/>
<line fill="none" stroke="#000000" class="path" stroke-width="2" stroke-miterlimit="10" x1="134.2" y1="383.4" x2="239.4" y2="260.2"/>
</g>
</svg>
Raw
style.css
svg{
margin:auto;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.path{
stroke-dasharray:6000;
stroke-dashoffset:8000;
transition:10s all;
}
svg:hover .path{
stroke-dasharray:0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment