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><div style="background: lightblue"><svg width="1000" height="550"> <defs> <radialGradient id="sunGradient" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="#fff76b"></stop> <stop offset="50%" stop-color="#FFF845"></stop> <stop offset="90%" stop-color="#FFDA4E"></stop> <stop offset="100%" stop-color="#FB8933"></stop> </radialGradient> <filter id="glow"> <feGaussianBlur stdDeviation="3.5" result="coloredBlur"> </feGaussianBlur> <feMerge> <feMergeNode in="coloredBlur"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> </defs> <g> <circle cx="55" cy="55" r="50" style="fill: url(#sunGradient); filter: url(#glow)"></circle> <!-- grass --> <rect x=0 y=480 width="1000" height="100" style="fill: green"></rect> <!-- house --> <g transform="translate(300, 180)"> <path d="M 10 10 S 170 -190 360 10 Z" style="fill: #e34a33; stroke: #aa3826;"></path> <rect x=10 y=10 width=350 height=300 style="fill: #fdd5b3"></rect> <rect x=160 y=210 width=50 height=100 style="fill: purple"></rect> <!-- window --> <g> <rect x=40 y=70 height=80 width=80 style="fill: white; stroke: darkgrey;" stroke-width="3" ></rect> <line x1=80 y1=70 x2=80 y2=150 style="stroke:darkgrey;stroke-width:2"></line> <line x1=40 y1=110 x2=120 y2=110 style="stroke:darkgrey;stroke-width:2"></line> </g> <g transform="translate(210,0)"> <rect x=40 y=70 height=80 width=80 style="fill: white; stroke: darkgrey;" stroke-width="3" ></rect> <line x1=80 y1=70 x2=80 y2=150 style="stroke:darkgrey;stroke-width:2"></line> <line x1=40 y1=110 x2=120 y2=110 style="stroke:darkgrey;stroke-width:2"></line> </g> </g> <!-- flower --> <g transform="translate(100,450) scale(0.1)"> <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></svg></div></body> https://d3js.org/d3.v4.min.js