Skip to content

Instantly share code, notes, and snippets.

@tomasgreen

tomasgreen/spin.svg

Created September 22, 2014 15:11
Show Gist options
  • Save tomasgreen/b1c7323be882fa062352 to your computer and use it in GitHub Desktop.
Save tomasgreen/b1c7323be882fa062352 to your computer and use it in GitHub Desktop.
Download ZIP
spin.svg
Display the source blob
Display the rendered blob
Raw
spin.svg
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="60px" height="60px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<rect opacity="0.1" x="9.4" y="0" width="1.2" height="5">
<animate from="1" calcMode="linear" accumulate="none" additive="replace" begin="0" to=".1" dur="1s" repeatCount="indefinite" attributeName="opacity" restart="always" fill="remove"/>
</rect>
<rect opacity="0.1" x="12.3" y="0.6" transform="matrix(-0.9239 -0.3827 0.3827 -0.9239 23.5854 10.8332)" width="1.2" height="5">
<animate from="1" calcMode="linear" accumulate="none" additive="replace" begin="0.0625s" to=".1" dur="1s" repeatCount="indefinite" attributeName="opacity" restart="always" fill="remove"/>
</rect>
<rect opacity="0.1" x="14.7" y="2.2" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 22.8033 18.8388)" width="1.2" height="5">
<animate from="1" calcMode="linear" accumulate="none" additive="replace" begin="0.125s" to=".1" dur="1s" repeatCount="indefinite" attributeName="opacity" restart="always" fill="remove"/>
</rect>
<rect opacity="0.1" x="16.3" y="4.6" transform="matrix(-0.3827 -0.9239 0.9239 -0.3827 16.8205 25.4988)" width="1.2" height="5">
<animate from="1" calcMode="linear" accumulate="none" additive="replace" begin="0.1875s" to=".1" dur="1s" repeatCount="indefinite" attributeName="opacity" restart="always" fill="remove"/>
</rect>
<rect opacity="0.1" x="15" y="9.4" width="5" height="1.2">
<animate from="1" calcMode="linear" accumulate="none" additive="replace" begin="0.25s" to=".1" dur="1s" repeatCount="indefinite" attributeName="opacity" restart="always" fill="remove"/>
</rect>
<rect opacity="0.1" x="16.3" y="10.4" transform="matrix(0.3827 -0.9239 0.9239 0.3827 -1.4398 23.5854)" width="1.2" height="5">
<animate from="1" calcMode="linear" accumulate="none" additive="replace" begin="0.3125s" to=".1" dur="1s" repeatCount="indefinite" attributeName="opacity" restart="always" fill="remove"/>
</rect>
<rect opacity="0.1" x="14.7" y="12.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.3388 15.3033)" width="1.2" height="5">
<animate from="1" calcMode="linear" accumulate="none" additive="replace" begin="0.375s" to=".1" dur="1s" repeatCount="indefinite" attributeName="opacity" restart="always" fill="remove"/>
</rect>
<rect opacity="0.1" x="12.3" y="14.4" transform="matrix(-0.9239 0.3827 -0.3827 -0.9239 31.239 27.6443)" width="1.2" height="5">
<animate from="1" calcMode="linear" accumulate="none" additive="replace" begin="0.4375s" to=".1" dur="1s" repeatCount="indefinite" attributeName="opacity" restart="always" fill="remove"/>
</rect>
<rect opacity="0.1" x="9.4" y="15" width="1.2" height="5">
<animate from="1" calcMode="linear" accumulate="none" additive="replace" begin="0.5s" to=".1" dur="1s" repeatCount="indefinite" attributeName="opacity" restart="always" fill="remove"/>
</rect>
<rect opacity="0.1" x="6.5" y="14.4" transform="matrix(-0.9239 -0.3827 0.3827 -0.9239 7.2386 35.298)" width="1.2" height="5">
<animate from="1" calcMode="linear" accumulate="none" additive="replace" begin="0.5625s" to=".1" dur="1s" repeatCount="indefinite" attributeName="opacity" restart="always" fill="remove"/>
</rect>
<rect opacity="0.1" x="4.1" y="12.8" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 -2.8033 29.4454)" width="1.2" height="5">
<animate from="1" calcMode="linear" accumulate="none" additive="replace" begin="0.625s" to=".1" dur="1s" repeatCount="indefinite" attributeName="opacity" restart="always" fill="remove"/>
</rect>
<rect opacity="0.1" x="2.5" y="10.4" transform="matrix(-0.3827 -0.9239 0.9239 -0.3827 -7.6444 20.6324)" width="1.2" height="5">
<animate from="1" calcMode="linear" accumulate="none" additive="replace" begin="0.6875s" to=".1" dur="1s" repeatCount="indefinite" attributeName="opacity" restart="always" fill="remove"/>
</rect>
<rect opacity="0.1" x="0" y="9.4" width="5" height="1.2">
<animate from="1" calcMode="linear" accumulate="none" additive="replace" begin="0.75s" to=".1" dur="1s" repeatCount="indefinite" attributeName="opacity" restart="always" fill="remove"/>
</rect>
<rect opacity="0.1" x="2.5" y="4.6" transform="matrix(0.3827 -0.9239 0.9239 0.3827 -4.6914 7.2385)" width="1.2" height="5">
<animate from="1" calcMode="linear" accumulate="none" additive="replace" begin="0.8125s" to=".1" dur="1s" repeatCount="indefinite" attributeName="opacity" restart="always" fill="remove"/>
</rect>
<rect opacity="0.1" x="4.1" y="2.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -1.9454 4.6967)" width="1.2" height="5">
<animate from="1" calcMode="linear" accumulate="none" additive="replace" begin="0.875s" to=".1" dur="1s" repeatCount="indefinite" attributeName="opacity" restart="always" fill="remove"/>
</rect>
<rect opacity="0.1" x="6.5" y="0.6" transform="matrix(-0.9239 0.3827 -0.3827 -0.9239 14.8922 3.1796)" width="1.2" height="5">
<animate from="1" calcMode="linear" accumulate="none" additive="replace" begin="0.9375s" to=".1" dur="1s" repeatCount="indefinite" attributeName="opacity" restart="always" fill="remove"/>
</rect>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment