Built with blockbuilder.org
xxxxxxxxxx<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" background-color="green"> <rect id="backdrop" x="0" y="0" width="500" height="550" fill="skyblue"></rect><circle id="sun" style="fill: yellow"></circle> <circle id="moon" style="fill: white"></circle> <g id="wholehouse" transform="translate(0,0) rotate(0,0,0)"> <!-- Chimney --> <rect x="350" y="100" height="100" width="50" style="fill: #bd6b18"/> <!-- Base --> <rect x="100" y="200" height="250" width="300" style="fill: #fdce7d"/> <!-- Roof --> <path d="M 50 250 L 250 50 L 450 250 Z" style="fill: #bd1d18"/> <!-- Left Window --> <g style=" fill: white; stroke: black; stroke-width: 5px" transform="translate(125, 300) scale(0.5)"> <rect x="10" y="10" height="50" width="50"/> <rect x="60" y="10" height="50" width="50"/> <rect x="10" y="60" height="50" width="50"/> <rect x="60" y="60" height="50" width="50"/> </g> <!-- Right Window --> <g style=" fill: white; stroke: black; stroke-width: 5px" transform="translate(320, 300) scale(0.5)"> <rect x="10" y="10" height="50" width="50"/> <rect x="60" y="10" height="50" width="50"/> <rect x="10" y="60" height="50" width="50"/> <rect x="60" y="60" height="50" width="50"/> </g> <!-- Top Window --> <g style=" fill: white; stroke: black; stroke-width: 5px" transform="translate(220, 150) scale(0.5, 0.75)"> <rect x="10" y="10" height="50" width="50"/> <rect x="60" y="10" height="50" width="50"/> <rect x="10" y="60" height="50" width="50"/> <rect x="60" y="60" height="50" width="50"/> </g> <!-- Door --> <g transform="translate(192.5, 290)"> <rect x="10" y="10" height="150" width="100" style="fill: #754009"/> <circle cx="25" cy="85" r="7" style="fill: gold"/> </g></g><!-- Grass --> <rect x="0" y="450" height="100" width="500" style="fill: green;"/></svg></body> https://d3js.org/d3.v4.min.js