D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
carly-n-wilson
Full window
Github gist
myfirsthouse
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" style="background: lightblue;"> <!--sun--> <circle cx=60 cy=60 r=50 style="fill:yellow;"></circle> <!-- garden --> <!--grass--> <rect x=0 y=450 height=100 width=500 style="fill:green"></rect> <g transform="translate(50,425) scale(0.1)"> <!--transform="translate(250,137.5)">--> <path d="M0,0 L-40,200 L20,600" style="stroke: #2ecc71; stroke-width: 20px; fill: none;"> </path> <g class="flower" > <circle r="60" transform="rotate(0) translate(40, 0) scale(1.5, 1)" style="fill: #f1c40f"></circle> <circle r="60" transform="rotate(72) translate(40, 0) scale(1.5, 1)" style="fill: #f1c40f"></circle> <circle r="60" transform="rotate(144) translate(40, 0) scale(1.5, 1)" style="fill: #f1c40f"></circle> <circle r="60" transform="rotate(216) translate(40, 0) scale(1.5, 1)" style="fill: #f1c40f"></circle> <circle r="60" transform="rotate(288) translate(40, 0) scale(1.5, 1)" style="fill: #f1c40f"></circle> <circle r="60" style="fill: #f39c12"></circle> </g> </g> <!--person--> <rect x=450 y=350 height=100 width=5></rect> <circle cx=450 cy=350 r=20></circle> <!--house--> <rect x=100 y=200 height=300 width=300 style="fill:#f4a460; stroke:black;"></rect> <!--roof--> <path d="M 50 200 L 450 200 L 250 50 Z" style="fill:brown; stroke: black;"></path> <!--door--> <rect x=225 y=400 height=100 width=50 style="fill:purple; stroke:black;"></rect> <!--windows--> <g> <!--left windows--> <rect x=125 y=225 width=50 height=50 style="fill:white; stroke: black;"></rect> <rect x=175 y=225 width=50 height=50 style="fill:white; stroke: black;"></rect> <rect x=125 y=275 width=50 height=50 style="fill:white; stroke: black;"></rect> <rect x=175 y=275 width=50 height=50 style="fill:white; stroke: black;"></rect> <!--right windows--> <rect x=275 y=225 width=50 height=50 style="fill:white; stroke: black;"></rect> <rect x=325 y=225 width=50 height=50 style="fill:white; stroke: black;"></rect> <rect x=275 y=275 width=50 height=50 style="fill:white; stroke: black;"></rect> <rect x=325 y=275 width=50 height=50 style="fill:white; stroke: black;"></rect> </g> </svg> </body>
https://d3js.org/d3.v4.min.js