Skip to content

Instantly share code, notes, and snippets.

@buzzdecafe

buzzdecafe/globe.svg

Last active December 18, 2015 12:39
Show Gist options
  • Save buzzdecafe/5784246 to your computer and use it in GitHub Desktop.
Save buzzdecafe/5784246 to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
globe.svg
<svg width="480" height="480" xmlns="http://www.w3.org/2000/svg">
<title>globe</title>
<g>
<title>Layer 1</title>
<path stroke="#000000" id="svg_15" d="m55.296741,355.968445l369.175121,0.140381l-11.980103,17.704529l-345.074249,-0.423889l-12.12077,-17.421021l0,0zm2.536972,-235.510498l364.245358,-0.420265l10.569122,18.161263l-385.52644,0.139969l10.71196,-17.880966zm-35.945139,118.012405l435.852148,-0.424026l-0.563873,18.161346l-435.007986,-0.280243l-0.280289,-17.457077l0,0zm436.215765,1.681702c0,120.236282 -97.842896,218.052719 -218.122314,218.052719c-120.229546,0 -218.050329,-97.830811 -218.050329,-218.052719c0,-120.218719 97.838926,-218.032188 218.050329,-218.032188c120.279419,-0.017967 218.122314,97.813469 218.122314,218.032188zm-218.104553,-235.507111c-129.827415,0 -235.474738,105.640144 -235.474738,235.492737c0,129.866653 105.647323,235.507248 235.474738,235.507248c129.895294,0 235.525269,-105.640594 235.525269,-235.507248c0,-129.852592 -105.629974,-235.492737 -235.525269,-235.492737zm66.079742,235.507111c0,128.483322 -34.813171,218.052719 -66.079742,218.052719c-31.234116,0 -66.043884,-89.569397 -66.043884,-218.052719c0,-128.515831 34.791901,-218.032188 66.043884,-218.032188c31.248352,-0.017967 66.079742,89.516357 66.079742,218.032188zm-66.079742,-235.507111c-54.235794,0 -83.504425,121.343483 -83.504425,235.492737c0,114.181656 29.268631,235.507248 83.504425,235.507248c54.235748,0 83.554352,-121.343811 83.554352,-235.507248c-0.014343,-114.149254 -29.318604,-235.492737 -83.554352,-235.492737zm154.758972,235.507111c0,120.236282 -69.447021,218.052719 -154.758972,218.052719c-85.293945,0 -154.708359,-97.830811 -154.708359,-218.052719c0,-120.218719 69.414413,-218.032188 154.708359,-218.032188c85.311951,-0.017967 154.758972,97.813469 154.758972,218.032188zm-154.758972,-235.507111c-94.909943,0 -172.165436,105.640144 -172.165436,235.492737c0,129.866653 77.255493,235.507248 172.165436,235.507248c94.942535,0 172.183014,-105.640594 172.183014,-235.507248c0,-129.852592 -77.240479,-235.492737 -172.183014,-235.492737z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="none"/>
</g>
</svg>
Raw
spinner.html
<!DOCTYPE html>
<html>
<head>
<style>
#c {
border: 1px dotted #006;
}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
(function() {
var r;
var c = document.getElementById("c");
var ctx = c.getContext("2d");
var globe = new Image();
globe.src = "globe.svg";
c.setAttribute("width", "700px");
c.setAttribute("height", "500px");
function clear() {
c.width = c.width;
}
globe.onload = function() {
var cw = c.width;
var cCtr = cw/2;
ctx.drawImage(globe, 0, -cCtr, cw, cw);
function mkSpin(ctx, image) {
var ctrX = cCtr;
var ctrY = 0;
return function rotate(angle) {
clear();
ctx.translate(ctrX, ctrY);
ctx.rotate(angle * TO_RADIANS);
ctx.drawImage(image, -cCtr, -cCtr, cw, cw);
};
}
r = mkSpin(ctx, globe);
};
var TO_RADIANS = Math.PI/180;
function clickHandler() {
var t = false;
return function(e) {
if (t) {
clearTimeout(t);
t = false;
} else {
t = setInterval((function() {
var i = 0;
return function() {
i = i + 10 % 360;
r(i);
};
})(), 20);
}
};
}
c.addEventListener("click", clickHandler());
}());
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment