D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
axmopio
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 class="sky" x="0" y="0" width="500" height="300" style="fill:lightblue"></rect> <circle r="50" cx="400" cy="70" style="fill: #f39e40"></circle> <circle r="40" cx="400" cy="70" style="fill: #f39c12"></circle> <g transform="translate(150,65) scale(0.8)"> <circle class="cloud1" r="60" transform="rotate(0) translate(40, 0) scale(1.5, 1)" style="fill: #dbd5c1"></circle> <circle class="cloud2" r="60" transform="rotate(-10) translate(-30, 0) scale(1.5, 1)" style="fill: #d6cfb7"></circle> <circle class="cloud3" r="60" transform="rotate(-10) translate(320, 150) scale(2.3, 1)" style="fill: #ddd8c4"></circle> <circle class="cloud4" r="60" transform="rotate(12) translate(210, 10) scale(1.1, .9)" style="fill: #d2cbb1"></circle> </g> <g class="roof" transform="translate(0,100)"><path d="M 0 100 L 300 100 L 250 75 L 200 30 Z" style="fill:darkred; stroke: black; stroke-width:1px;"></path> <path class="walls" d="M 0 100 L 0 200 L 300 200 L 300 100 Z" style="fill: firebrick; stroke:black; stroke-width:1px"></path> <rect class="grass" x="0" y="200" width="500" height="300" style="fill:green"></rect> <rect class="door" x="120" y="130" width="45" height="70" style="fill: darkblue; stroke: black;"></rect> <circle r="4" cx="155" cy="165" style="fill: #f39c12"></circle> <g transform="translate(20,110)"> <rect x="3" y="3" width="20" height="20" style="fill: blue; stroke: black;"></rect> <rect x="26" y="3" width="20" height="20" style="fill: blue; stroke: black;"></rect> <rect x="3" y="26" width="20" height="20" style="fill: blue; stroke: black;"></rect> <rect x="26" y="26" width="20" height="20" style="fill: blue; stroke: black;"></rect> </g> <g transform="translate(220,110)"> <rect x="3" y="3" width="20" height="20" style="fill: blue; stroke: black;"></rect> <rect x="26" y="3" width="20" height="20" style="fill: blue; stroke: black;"></rect> <rect x="3" y="26" width="20" height="20" style="fill: blue; stroke: black;"></rect> <rect x="26" y="26" width="20" height="20" style="fill: blue; stroke: black;"></rect> </g> <g transform="translate(300,175) scale(0.05)"> <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> <path d="M0,0 L-40,200 L20,600" style="stroke: #2ecc71; stroke-width: 20px; fill: none;"> </path> <g class="flower2" transform="translate(1000,350) scale(2)"> <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> </g> <g class="smoke" transform="rotate(0) translate(170, 120)"> <circle r="5" transform="rotate(0) translate(40, 0) scale(1.5, 1)" style="fill: #a99a6a"></circle> <circle r="5" transform="rotate(0) translate(35, 5) scale(1.5, 1)" style="fill: #6a603d"></circle> <circle r="5" transform="rotate(0) translate(57, -15) scale(1.2, .98)" style="fill: #aea173"></circle> <circle r="5" transform="rotate(0) translate(47, -25) scale(1, .7)" style="fill: #988a57"></circle> <circle r="5" transform="rotate(0) translate(87, -35) scale(1.8, 1.31)" style="fill: #b2a67a"></circle> <circle r="5" transform="rotate(0) translate(100, -55) scale(2.4, 1.81)" style="fill: #d9d3be"></circle> </g> </svg> </body>
https://d3js.org/d3.v4.min.js