D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
brandon-hedrick
Full window
Github gist
My 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"> <defs> <linearGradient id="windowGradient"> <stop offset="0%" stop-color="#C6DEFF"/> <stop offset="50%" stop-color="white"/> <stop offset="100%" stop-color="#C6DEFF"/> </linearGradient> </defs> <g class="sky"> <rect width="500" height="350" x="0" y="0" fill="skyblue"></rect> </g> <g class="ground"> <rect width="500" height="250" x="0" y="350" fill="green"></rect> </g> <g class="house"> <g class="topfloor" transform="translate(45, 140)"> <rect class="house-roof" width="265" height="10" fill="#333" x="0" y="0"></rect> <rect class="house-floor" width="235" height="75" fill="#f8f8f8" x="15" y="10"></rect> <rect class="window" width="200" height="50" fill="url(#windowGradient)" y="22" x="15" stroke="#C6DEFF" stroke-width="1"> </g> <g class="bottomfloor" transform="translate(60, 220)"> <rect class="house-floor" width="420" height="150" fill="#f8f8f8"></rect> <rect class="porch-roof" width="100" height="10" fill="#333" x="115" y="30"></rect> <g class="door" transform="translate(135, 55)"> <rect class="font-door" width="60" height="95" fill="#333"></rect> <circle class="doorknob" cx="50" cy="50" r="5" fill="#f8f8f8"> </g> <rect class="garage-door" width="150" height="100" fill="#333" x="240" Y="50"></rect> <rect class="window" width="100" height="90" fill="url(#windowGradient)" y="30" x="0" stroke="#C6DEFF" stroke-width="1"> </g> </svg> </body>
https://d3js.org/d3.v4.min.js