D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
SumNeuron
Full window
Github gist
SVG Graphics Card
<!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="https://www.w3.org/2000/svg" xmlns:xlink="https://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>
https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.js