D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
bencekd
Full window
Github gist
svg_house_example_there-is-also-a-sheep-here
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> <div style="background-color: #17BEBB"> <svg width="500" height="500"> <g transform="translate(50, 20) scale(.7)"> <rect style="fill: #8B9EB7" y="200" width="500" height="350"></rect> <path style="fill: #F44E3F" d="M 250 0 L 0 200 L 500 200 Z"></path> <rect style="fill: rgba(1,245,123,0.53); stroke: rgba(255,255,255,.5); stroke-width: 6px" width="90" height="90" x="90" y="300"></rect> <rect style="fill: rgba(1,245,123,0.53); stroke: rgba(255,255,255,.5); stroke-width: 6px" width="90" height="90" x="350" y="300"></rect> <g> <rect style="fill: #2E282A; stroke: #070606; stroke-width: 6px" width="120" height="150" x="210" y="395"></rect> <circle r="6" cx="310" cy="480" style="fill: #f1c40f; stroke: black; stroke-width: 2px"></circle> </g> </g> <g> <circle style="fill: #FFC914" cx="0" cy="0" r="55"></circle> <g transform="translate(22,20) rotate(30) scale(1.1)" style="fill: #FFC914"> <rect transform=" rotate(-60)" width="40" height="4" y="0"></rect> <rect transform=" rotate(-45)" width="40" height="4" y="0"></rect> <rect transform=" rotate(-30)" width="40" height="4" y="0"></rect> <rect transform=" rotate(-15)" width="40" height="4" y="0"></rect> <rect transform="rotate(0)" width="40" height="4" y="0"></rect> <rect transform="rotate(15)" width="40" height="4" y="0"></rect> <rect transform="rotate(30)" width="40" height="4" y="0"></rect> <rect transform="rotate(45)" width="40" height="4" y="0"></rect> <rect transform="rotate(60)" width="40" height="4" y="0"></rect> <rect transform="rotate(75)" width="40" height="4" y="0"></rect> <rect transform="rotate(90)" width="40" height="4" y="0"></rect> </g> </g> <rect style="fill: #76B041" width="500" height="500" x="0" y="400"></rect> <g transform="translate(250,400) scale(0.1)" class="flowers_"> <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> <g transform="translate(120,420) scale(0.1)" class="flowers_"> <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> <g transform="translate(140,387) scale(0.1)" class="flowers_"> <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> <g transform="translate(278,465) scale(0.1)" class="flowers_"> <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> <g style="stroke: rgba(0,0,0,.1)" transform="translate(120,180) scale(0.7)"> <circle style="fill: white" r="60" cx="350" cy="300"></circle> <circle style="fill: white" r="60" cx="310" cy="310"></circle> <circle style="fill: white" r="60" cx="400" cy="300"></circle> <circle style="fill: white" r="60" cx="320" cy="280"></circle> <circle style="fill: white" r="60" cx="350" cy="320"></circle> <circle style="fill: white" r="60" cx="400" cy="330"></circle> <circle style="fill: white; stroke: rgba(0,0,0,.4)" r="30" cx="250" cy="300"></circle> <ellipse transform="scale(0.9)" style="fill: #F37748" rx="50" ry="30" cx="520" cy="300"></ellipse> <circle style="fill: black" r="5" cx="450" cy="260"></circle> <circle style="fill: black" r="5" cx="450" cy="275"></circle> <g style="stroke: rgba(0,0,0,0.3)"> <ellipse transform="scale(0.9) rotate(1)" style="fill: white" rx="15" ry="30" cx="470" cy="270"></ellipse> <ellipse transform="scale(0.9)" style="fill: white" rx="15" ry="30" cx="470" cy="320"></ellipse> </g> <rect transform="" width="8" height="40" y="390" x="400"></rect> <rect transform="" width="8" height="40" y="390" x="380"></rect> <rect transform="" width="8" height="40" y="370" x="320"></rect> <rect transform="" width="8" height="40" y="370" x="300"></rect> </g> </svg> </div> </body>
https://d3js.org/d3.v4.min.js