Skip to content

Instantly share code, notes, and snippets.

@SumNeuron

SumNeuron/fan.js

Last active May 28, 2017 11:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SumNeuron/a15828f100a505c3f6097cb94d21d019 to your computer and use it in GitHub Desktop.
Save SumNeuron/a15828f100a505c3f6097cb94d21d019 to your computer and use it in GitHub Desktop.
Download ZIP
SVG Graphics Card
Raw
fan.js
var fan = d3.select("svg").select("g")
var fan_box = fan.node().getBBox()
fan.attr("transform", "rotate(1)")
d3.interval(spin_fan, 20)
var fan_rotation = 1
function spin_fan() {
fan_rotation += 5
fan.attr("transform", "rotate(" + fan_rotation + " " + (fan_box.x + fan_box.width / 2) + " " + (fan_box.y + fan_box.height / 2) + ")")
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.js"></script>
<script type="text/javascript" src="fan.js" defer></script>
</head>
<style media="screen">
html {
width: 100%;
height: 100%;
}
body {
width:100%;
height:100%;
}
svg {
position: absolute;
}
</style>
<body>
<svg width="100%" height="100%" viewBox="0 0 360 360" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><rect x="43.38" y="127.35" width="273.24" height="92.52" style="fill:#ebebeb;stroke:#000;stroke-width:1px;"/><rect x="69.3" y="219.87" width="138.42" height="12.78" style="fill:#fc6;stroke:#000;stroke-width:1px;"/><path d="M73.237,143.445l124.763,0l11.765,30.165l-11.765,30.165l-124.763,0c0,0 -3.937,-7.33 -3.937,-30.165c0,-22.835 3.937,-30.165 3.937,-30.165" style="stroke:#999;stroke-width:1px;"/><circle cx="95.04" cy="135.845" r="2.16" style="fill:#ccc;stroke:#000;stroke-width:1px;"/><circle cx="95.04" cy="211.375" r="2.16" style="fill:#ccc;stroke:#000;stroke-width:1px;"/><circle cx="182.16" cy="135.845" r="2.16" style="fill:#ccc;stroke:#000;stroke-width:1px;"/><circle cx="182.16" cy="211.375" r="2.16" style="fill:#ccc;stroke:#000;stroke-width:1px;"/><path d="M69.3,173.61l140.465,0" style="fill:none;stroke:#999;stroke-width:1px;"/><path d="M69.3,168.583l138.387,0" style="fill:none;stroke:#999;stroke-width:1px;"/><path d="M69.623,163.555l138.064,0" style="fill:none;stroke:#999;stroke-width:1px;"/><path d="M70.083,158.528l133.448,0" style="fill:none;stroke:#999;stroke-width:1px;"/><path d="M70.824,153.5l130.629,0" style="fill:none;stroke:#999;stroke-width:1px;"/><path d="M71.604,148.473l128.357,0" style="fill:none;stroke:#999;stroke-width:1px;"/><path d="M69.3,173.61l140.465,0" style="fill:none;stroke:#999;stroke-width:1px;"/><path d="M69.3,178.637l138.387,0" style="fill:none;stroke:#999;stroke-width:1px;"/><path d="M69.623,183.665l138.064,0" style="fill:none;stroke:#999;stroke-width:1px;"/><path d="M70.083,188.692l133.448,0" style="fill:none;stroke:#999;stroke-width:1px;"/><path d="M70.824,193.72l130.629,0" style="fill:none;stroke:#999;stroke-width:1px;"/><path d="M71.604,198.747l128.357,0" style="fill:none;stroke:#999;stroke-width:1px;"/><path d="M280.465,127.35l-55.825,0c0,0 -24.66,16.794 -24.66,46.26c0,29.466 24.66,46.26 24.66,46.26l55.825,0c0,0 24.66,-16.729 24.66,-46.26c0,-29.531 -24.66,-46.26 -24.66,-46.26Z" style="stroke:#000;stroke-width:1px;"/><circle cx="252.553" cy="173.61" r="37.483" style="stroke:#ccc;stroke-width:2px;"/><circle cx="219.108" cy="143.445" r="2.16" style="fill:#ccc;stroke:#000;stroke-width:1px;"/><circle cx="219.108" cy="203.775" r="2.16" style="fill:#ccc;stroke:#000;stroke-width:1px;"/><circle cx="288.157" cy="143.445" r="2.16" style="fill:#ccc;stroke:#000;stroke-width:1px;"/><circle cx="288.157" cy="203.775" r="2.16" style="fill:#ccc;stroke:#000;stroke-width:1px;"/><path d="M80.64,219.87c0,0 -11.34,-13.703 -11.34,-46.26c0,-32.557 11.34,-46.26 11.34,-46.26" style="fill:none;stroke:#000;stroke-width:1px;"/><g><path d="M251.707,173.61c0,0 -18.744,-16.355 0,-35.1" style="fill:none;stroke:#fff;stroke-width:1px;"/><path d="M252.574,173.61c0,0 -1.689,-24.819 24.82,-24.819" style="fill:none;stroke:#fff;stroke-width:1px;"/><path d="M252.553,173.588c0,0 -24.82,1.69 -24.82,-24.819" style="fill:none;stroke:#fff;stroke-width:1px;"/><path d="M252.553,173.61c0,0 -16.356,18.745 -35.1,0" style="fill:none;stroke:#fff;stroke-width:1px;"/><path d="M252.531,173.61c0,0 1.69,24.819 -24.819,24.819" style="fill:none;stroke:#fff;stroke-width:1px;"/><path d="M252.553,173.61c0,0 18.744,16.355 0,35.1" style="fill:none;stroke:#fff;stroke-width:1px;"/><path d="M252.553,173.632c0,0 24.819,-1.69 24.819,24.819" style="fill:none;stroke:#fff;stroke-width:1px;"/><path d="M252.553,173.61c0,0 16.355,-18.745 35.1,0" style="fill:none;stroke:#fff;stroke-width:1px;"/></g><circle cx="252.553" cy="173.61" r="8.653" style="fill:#ccc;stroke:#ccc;stroke-width:5px;"/></svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment