Last active
May 28, 2017 11:08
-
-
Save SumNeuron/a15828f100a505c3f6097cb94d21d019 to your computer and use it in GitHub Desktop.
SVG Graphics Card
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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) + ")") | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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