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">
<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