Skip to content

Instantly share code, notes, and snippets.

@vwochnik

vwochnik/index.html

Last active March 11, 2017 20:09
Show Gist options
  • Save vwochnik/865b04fd72662b3b0cdd83c3ed6215f9 to your computer and use it in GitHub Desktop.
Save vwochnik/865b04fd72662b3b0cdd83c3ed6215f9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<object data="index.svg" type="image/svg+xml"></object>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
index.svg
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="76px" height="76px" onload="animateArc()">
<defs>
<script type="application/javascript">
//<![CDATA[
function animateArc() {
var arc = document.getElementById('arc');
var d = "M0,0 L20,0 L20,20 L0,20 z";
arc.setAttribute("d", d);
console.info(arc);
}
//]]>
</script>
<filter id="blur" x="-10%" y="-10%" width="120%" height="120%">
<feGaussianBlur stdDeviation="3" />
</filter>
<mask id="spinmask">
<rect x="0" y="0" width="76" height="76" fill="#000" />
<g filter="url(#blur)">
<path d="M 38 38 L 98 38 A 60 60 0 0 0 38.00000000000001 -22 L 38 38 z" fill="#fff"/>
</g>
</mask>
</defs>
<circle fill="#009FEE" cx="38.033" cy="37.877" r="37.757"/>
<path mask="url(#spinmask)" fill="#FFFFFF" d="M48.021,46.811c0,2.617-2.107,4.637-4.634,4.637H32.597c-2.522,0-4.543-2.02-4.543-4.637V27.428 c0-2.527,2.021-4.634,4.629-4.634h10.703c2.527,0,4.634,2.107,4.634,4.634V46.811z M54.253,47.648V26.416 c0-5.141-4.465-9.274-9.69-9.274H31.506c-5.226,0-9.693,4.133-9.693,9.274v21.232c0,5.148,4.127,9.445,9.359,9.445h13.73 C50.041,57.094,54.253,52.797,54.253,47.648"/>
<path id="arc" d="M0,0" fill="#fff"/>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment