HTML
<div class="main">
<svg class="position-absolute svg-container overflow-visible" viewBox="0 0 1135 737" version="1" xmlns="http://www.w3.org/2000/svg">
<path d="M42 700A498 498 0 0 1 500 0a500 500 0 0 1 458 700c-35-22-66-54-110-54-67 0-107 75-173 75-68 0-107-75-174-75-68 0-107 75-174 75s-107-75-173-75c-45 0-77 32-112 54z" id="Sky" fill="#2F4FFE" style="transform: translate(67px, 15px);"/>
<g style="transform: translate(140px, 90px);">
<circle id="Star" fill="#FDD836" cx="5" cy="497" r="5"/>
<circle id="Star" fill="#FDD836" cx="33" cy="381" r="5"/>
<circle id="Star" fill="#FDD836" cx="72" cy="344" r="5"/>
<circle id="Star" fill="#FDD836" cx="141" cy="170" r="5"/>
<circle id="Star" fill="#FDD836" cx="238" cy="203" r="5"/>
<circle id="Star" fill="#FDD836" cx="604" cy="5" r="5"/>
<circle id="Star" fill="#FDD836" cx="757" cy="240" r="5"/>
<circle id="Star" fill="#FDD836" cx="830" cy="367" r="5"/>
<circle id="Star" fill="#FDD836" cx="888" cy="507" r="5"/>
<circle id="Star" fill="#FDD836" cx="670" cy="451" r="5"/>
<circle id="Oval-4" fill="#FFF9C4" cx="159" cy="446" r="10"/>
<circle id="Oval-4" fill="#FFF9C4" cx="28" cy="235" r="10"/>
<circle id="Oval-4" fill="#FFF9C4" cx="604" cy="203" r="10"/>
<circle id="Oval-4" fill="#FFF9C4" cx="641" cy="334" r="10"/>
<circle id="Oval-4" fill="#FFF9C4" cx="815" cy="432" r="10"/>
</g>
<path id="Cloud-3" d="M64 164a54 54 0 0 1-64-52c0-30 24-54 53-54a74 74 0 0 1 145 25c6-2 13-4 20-4a43 43 0 1 1-14 85H64z" fill="#2879FF" style="transform: translate(0, 333px)" />
<path id="Cloud-1" d="M148,117 L38.8402113,117 C36.336021,117.652627 33.7085772,118 31,118 C13.8791728,118 0,104.120827 0,87 C0,69.8791728 13.8791728,56 31,56 C35.8008379,56 40.3467866,57.0913101 44.403306,59.0393901 C44.1371089,56.8969659 44,54.7144947 44,52.5 C44,23.5050506 67.5050506,0 96.5,0 C121.544838,0 142.493713,17.5369048 147.736802,41.0008924 C147.824465,41.0002978 147.912197,41 148,41 C168.98682,41 186,58.0131795 186,79 C186,99.9868205 168.98682,117 148,117 Z" fill="#2879FF" style="transform: translate(0, 149px)"/>
<path fill="#64DD17" d="M590 81c-39 22-73 60-120 60-68 0-107-75-174-75-68 0-107 75-174 75-48 0-82-38-122-60C70 32 176 0 295 0s225 32 295 81z" style="transform: translate(272px, 595px)"/>
</svg>
<svg id="Ray" class="position-absolute svg-container overflow-visible" viewBox="0 0 1135 737" version="1" xmlns="http://www.w3.org/2000/svg">
<g style="transform: translate(-71px, 25px)">
<path d="M21,0 C100.333333,7.33333333 276.333333,34.6666667 549,82 L549,166 C298.333333,195.333333 122.333333,213.333333 21,220 C-9,181 -4,43 21,0 Z" fill="#FFF176" fill-opacity="0.55"/>
</g>
</svg>
<svg class="position-absolute svg-container overflow-visible" viewBox="0 0 1135 737" version="1" xmlns="http://www.w3.org/2000/svg">
<g id="tower" style="transform: translate(474px, 222px)">
<path d="M178 160L6 241l4-107 164-76 4 102z" fill="#FF7043"/>
<path d="M1 353l181-84 5 116-187 2 1-34z" fill="#FF7043"/>
<path fill="#C5CAE9" d="M178 160l4 109L1 353l5-112 172-81zm-4-102L10 134 16 0l155 2 3 56z"/>
</g>
<g class="tower-top" style="transform: translate(457px, 185px)">
<defs>
<path id="balcony-mask" d="M0 0H220V70H0z"/>
</defs>
<mask id="mask-2" fill="#fff">
<use xlink:href="#balcony-mask"/>
</mask>
<use id="Mask" fill="#F4511E" xlink:href="#balcony-mask"/>
<circle id="ray-shadow-bottom" fill="#FA9950" mask="url(#mask-2)" cx="-57" cy="-4" r="57"/>
</g>
<g style="transform: translate(477px, 0)">
<defs>
<path d="M0,90 C0,40.2943725 40.2943725,0 90,0 C139.705627,0 180,40.2943725 180,90 L0,90 Z" id="top-mask"/>
</defs>
<mask id="top-mask-2" fill="#fff">
<use xlink:href="#top-mask"/>
</mask>
<use id="Combined-Shape" fill="#F4511E" xlink:href="#top-mask"/>
<path class="tower-top-shadow" id="tower-top-shadow" fill="#E64A19" mask="url(#top-mask-2)" d="M180 0H180V95H360z"/>
<!-- <path class="tower-top-shadow" id="tower-top-shadow" fill="#E64A19" mask="url(#top-mask-2)" d="M180 0H0V95H180z"/> -->
</g>
<rect id="Hat-Base" fill="#F4511E" width="210" height="22" rx="11" style="transform: translate(462px, 90px)"/>
<path id="Cloud-2" d="M138,109 L36.5775851,109 C34.1620713,109.652119 31.6216617,110 29,110 C12.9837423,110 0,97.0162577 0,81 C0,64.9837423 12.9837423,52 29,52 C33.4103013,52 37.590661,52.9844968 41.3333019,54.745713 C41.1131774,52.861063 41,50.9437485 41,49 C41,21.9380473 62.9380473,0 90,0 C113.280244,0 132.768579,16.2350924 137.760665,38.000937 C157.246789,38.1410659 173,53.9808531 173,73.5 C173,92.9391703 157.375617,108.72907 138,108.996551 L138,109 Z" fill="#438AFF" style="transform: translate(0, 457px)"/>
<g style="transform: translate(477px, 112px)">
<defs>
<path id="ray-source-mask" d="M0 0H180V73H0z"/>
</defs>
<mask id="mask-ray-source-2" fill="#fff">
<use xlink:href="#ray-source-mask"/>
</mask>
<use id="Mask" fill="#FFD54F" xlink:href="#ray-source-mask"/>
<ellipse id="ray-source" fill="#FFF176" mask="url(#mask-ray-source-2)" cx="44" cy="36" rx="63" ry="56"/>
</g>
</svg>
</div>
