Skip to content

Instantly share code, notes, and snippets.

@andywillekens
Last active June 21, 2018 12:31
Show Gist options
  • Save andywillekens/5996fbec8bc44bb0b8ad37828049cf73 to your computer and use it in GitHub Desktop.
Save andywillekens/5996fbec8bc44bb0b8ad37828049cf73 to your computer and use it in GitHub Desktop.
A simple SVG auto spinning icon
Display the source blob
Display the rendered blob
Raw
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.8 39.5" overflow="hidden">
<style>
.spinner{
animation:rotate 3s linear infinite;
transform-origin:center;
}
@keyframes rotate {
from {transform:rotate(0);}
to {transform:rotate(360deg);
}
</style>
<g class="spinner">
<path fill="#073b44" d="M20,0h-.05a4.54,4.54,0,1,0,0,9.07h0A4.54,4.54,0,0,0,20,0Z"/>
<path fill="#073b44" opacity=".9" d="M9.86,3.7A4.52,4.52,0,0,0,7,4.76l-.08.06a4.54,4.54,0,0,0,5.9,6.9l0,0a4.54,4.54,0,0,0-2.94-8Z"/>
<path fill="#073b44" opacity=".8" d="M4.53,13.05A4.53,4.53,0,0,0,.07,16.82v.08A4.52,4.52,0,0,0,3.8,22.1a4.71,4.71,0,0,0,.74.06A4.55,4.55,0,0,0,9,18.36v0a4.54,4.54,0,0,0-3.74-5.22,4.74,4.74,0,0,0-.75-.06Z"/>
<path fill="#073b44" opacity=".7" d="M6.52,23.62a4.54,4.54,0,0,0-3.89,6.85l0,.08a4.54,4.54,0,0,0,3.88,2.19,4.49,4.49,0,0,0,2.33-.65,4.54,4.54,0,0,0,1.56-6.23v0a4.55,4.55,0,0,0-3.91-2.21Z"/>
<path fill="#073b44" opacity=".6" d="M14.89,30.41a4.54,4.54,0,0,0-1.5,8.82l0,0h0a4.7,4.7,0,0,0,1.46.24,4.53,4.53,0,0,0,1.45-8.83h0a4.5,4.5,0,0,0-1.47-.25Z"/>
<path fill="#073b44" opacity=".5" d="M25.67,30.18a4.55,4.55,0,0,0-1.65.31h0a4.54,4.54,0,0,0,1.65,8.77A4.49,4.49,0,0,0,27.27,39h0l0,0h0a4.54,4.54,0,0,0-1.69-8.75Z"/>
<path fill="#073b44" opacity=".4" d="M33.74,23a4.56,4.56,0,0,0-4,2.38v0a4.54,4.54,0,0,0,1.83,6.15,4.45,4.45,0,0,0,2.16.55,4.52,4.52,0,0,0,4-2.36h0l0-.06a4.54,4.54,0,0,0-4-6.67Z"/>
<path fill="#073b44" opacity=".3" d="M35.26,12.38a4.36,4.36,0,0,0-.94.1,4.54,4.54,0,0,0-3.51,5.37v0a4.55,4.55,0,0,0,4.44,3.61,4.88,4.88,0,0,0,.93-.09,4.53,4.53,0,0,0,3.52-5.34V16h0a4.54,4.54,0,0,0-4.43-3.58Z"/>
<path fill="#073b44" opacity=".2" d="M29.53,3.27a4.54,4.54,0,0,0-2.78,8.12l0,0a4.54,4.54,0,0,0,5.6-7.14l0,0,0,0h0a4.56,4.56,0,0,0-2.77-.94Z"/>
</g>
</svg>
@andywillekens
Copy link
Author

Testcase for an automatic spinning SVG containing it's own animation.
This can then also be encoded and used as a background-image, tested in Chrome 67.0.3 & Firefox 60.0.2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment