D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
yeex1490
Full window
Github gist
house
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head> <body> <svg width="500" height="550"> <rect width="350" height="400" x="75" y="300" style="fill: lightgrey"/> <rect width="100" height="150" x="200" y="400" style="fill: red"/> <circle cx="280" cy="480" r="5" fill=black></circle> <!--chimney--> <rect width="50" height="150" x="320" y="100" style="fill: brown"/> <circle cx="350" cy="80" r="10" fill=white></circle> <circle cx="350" cy="60" r="20" fill=white></circle> <circle cx="350" cy="60" r="20" fill=white></circle> <circle cx="390" cy="40" r="30" fill=white></circle> <!--roof--> <path d="M 10 350 L 480 350 L 380 200 L 100 200 z" style="stroke: none; stroke=width:5; fill: grey"></path> <!--windows--> <g transform="translate(150, 450)"> <circle cx="0" cy="-30" r="40" style="fill:white; stroke:black; stroke-width:3" ></circle> <path d="M -40 -25 L 40 -25" stroke="black" stroke-width="3" /> <path d="M 0 10 L 0 -70" stroke="black" stroke-width="3" /> <path d="M 180 0 q 50 -150 70 0 z" stroke="black" stroke-width="3" fill="white" /> <path d="M 220 0 L 220 -75" stroke="black" stroke-width="3" /> <path d="M 195 -40 L 245 -40" stroke="black" stroke-width="3" /> </g> <path d="M 0 550 L 500 550 z" style="stroke: green; stroke-width:25"></path> </svg> </body>
https://d3js.org/d3.v4.min.js