Skip to content

Instantly share code, notes, and snippets.

@xiaody
Created January 1, 2016 04:24
Show Gist options
  • Save xiaody/995deafc836b24738622 to your computer and use it in GitHub Desktop.
Save xiaody/995deafc836b24738622 to your computer and use it in GitHub Desktop.
Untitled
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg height="400" width="400" viewBox="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g filter="url(#goo)"> <circle class="dark" cx="200" cy="200" r="125" /> <circle class="green" cx="200" cy="200" r="125" /> </g> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 26 -10" result="goo" /> </filter> </defs> <style> /* <![CDATA[ */ circle.dark, circle.green { fill: transparent; stroke-dashoffset: 1000; stroke-width: 40; stroke-dasharray: 1060; transform-origin: 50% 50%; } circle.dark { stroke: #686968; animation: spin1 .8s ease-in-out forwards infinite; } circle.green { stroke: #36c56d; animation: spin2 .8s ease-in-out forwards infinite; } @keyframes spin1 { 0% { stroke-dashoffset: 1000; transform: rotate(0); } 35% { stroke-dashoffset: 800; } 100% { stroke-dashoffset: 1000; transform: rotate(360deg); } } @keyframes spin2 { 0% { stroke-dashoffset: 1000; transform: rotate(-180deg); } 35% { stroke-dashoffset: 800; } 100% { stroke-dashoffset: 1000; transform: rotate(180deg); } } /* ]]> */ </style></svg>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment