Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container">
	
	<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In  -->
	<svg version="1.1"
		 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
		 x="0px" y="0px" width="1921px" height="1081px" viewBox="0 0 1921 1081" style="enable-background:new 0 0 1921 1081;"
		 xml:space="preserve">
	<style type="text/css">
		.mesh-haus-st0{fill:#262626;stroke:#262626;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
		.mesh-haus-st1{fill:#262626;}
		.mesh-haus-st2{clip-path:url(#SVGID_2_);fill:#E2007A;}
		.mesh-haus-st3{fill:none;stroke:#D0D0D0;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
		.mesh-haus-st4{display:none;fill:none;stroke:#D0D0D0;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
		.mesh-haus-st5{fill:#FFFFFF;}
		.mesh-haus-st6{fill:none;stroke:#262626;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
		.mesh-haus-st7{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
		.mesh-haus-st8{fill:none;stroke:#D0D0D0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
		.mesh-haus-st9{clip-path:url(#SVGID_4_);fill:#E2007A;}
	</style>
	<g id="wifi_x5F_signal_1_">
		<defs>
			<path id="SVGID_1_" d="M1800.8,377.5l4.3-10.3l-491.2-205.8l-1197.2,491l4.3,10.4h83.3v258H1692V628.6h89V508.1h-8.4l-80.6,15.2
				V414.6L1800.8,377.5z"/>
		</defs>
		<clipPath id="SVGID_2_">
			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
		</clipPath>
		<circle id="wifi_x5F_signal-mesh-3_1_" class="mesh-haus-st2" cx="1494.3" cy="543.9" r="255.1"/>
		<circle id="wifi_x5F_signal-mesh-2_1_" class="mesh-haus-st2" cx="1395.4" cy="783.1" r="255.1"/>
		<circle id="wifi_x5F_signal-router_1_" class="mesh-haus-st2" cx="662.1" cy="796.1" r="274.3"/>
	</g>
	<g id="house-content_1_">
		<polygon class="mesh-haus-st3" points="1318.2,377.4 1318.2,336.6 1683.7,336.6 1595.7,377.5 	"/>
		<polygon class="mesh-haus-st3" points="1595.7,377.5 1683.7,336.6 1683.7,620.2 1677.1,620.2 1677.1,369.7 1656.4,378.4 1656.4,620.2 
			1649.8,620.2 1649.8,381.2 1620.2,393.6 1620.2,620.2 1615.4,620.2 1615.4,395.6 1598.5,402.8 1598.5,554.5 1595.7,554.5 	"/>
		<polygon class="mesh-haus-st3" points="1600.6,402.8 1598.5,402.8 1615.4,395.6 1615.4,396.5 	"/>
		<rect id="Fenster_Zagen_3_" x="1598.5" y="402.8" class="mesh-haus-st3" width="2.2" height="151.7"/>
		<rect id="Fenster_Zagen_2_" x="1620.2" y="393.6" class="mesh-haus-st3" width="2.2" height="226.6"/>
		<polygon class="mesh-haus-st3" points="1649.8,381.2 1649.8,382.1 1622.4,393.6 1620.2,393.6 	"/>
		<polygon class="mesh-haus-st3" points="1656.4,378.4 1677.1,369.7 1677.1,370.6 1658.6,378.4 	"/>
		<rect id="Fenster_Zagen_1_" x="1656.4" y="378.4" class="mesh-haus-st3" width="2.2" height="241.8"/>
		<polygon class="mesh-haus-st3" points="1615.4,620.2 1615.4,524 1600.6,524 1600.6,554.5 1604.2,554.5 1604.2,620.2 	"/>
		<rect x="1622.4" y="524" class="mesh-haus-st3" width="27.4" height="96.2"/>
		<rect x="1658.6" y="524" class="mesh-haus-st3" width="18.4" height="96.2"/>
		<polygon class="mesh-haus-st3" points="1692.1,523.2 1772.7,508 1772.7,620.2 1692.1,620.2 	"/>
		<polygon id="Dach_3_" class="mesh-haus-st3" points="1677.1,411.5 1658.6,403.8 1658.6,378.4 1677.1,370.6 	"/>
		<polygon id="Dach_2_" class="mesh-haus-st3" points="1649.8,400.1 1649.8,382.1 1628.3,391.1 	"/>
		<g id="Giebl_1_">
			<polygon class="mesh-haus-st3" points="1057.8,328.1 1270.1,241.1 1314,173.5 936.7,328.1 		"/>
			<polygon class="mesh-haus-st3" points="1683.2,328.1 1314,173.5 1270.1,241.1 1478,328.1 		"/>
			<polygon class="mesh-haus-st3" points="1057.8,328.1 1270.1,241.1 1478,328.1 		"/>
		</g>
		<polygon class="mesh-haus-st3" points="1692.1,414.6 1800.9,377.4 1692.1,331.9 	"/>
		<polygon class="mesh-haus-st3" points="1595.7,810.8 1595.7,818.3 1597.9,818.3 1597.9,811.4 	"/>
		<polygon id="Wohnzimmer_1_" class="mesh-haus-st3" points="212.8,625.1 930.4,330.7 930.4,620.2 738.5,620.2 738.5,628.6 1180.5,628.6 
			1180.5,912.3 212.8,912.3 	"/>
		<polygon id="Giebel_1_" class="mesh-haus-st3" points="1313.9,173.5 1683.2,328.1 936.7,328.1 	"/>
		<rect id="Schlafzimmer_2_" x="938.8" y="336.6" class="mesh-haus-st3" width="371" height="283.6"/>
		<rect id="Kinderzimmer_1_" x="1318.2" y="336.6" class="mesh-haus-st3" width="365.5" height="283.6"/>
		<rect id="Flur_2_" x="1188.9" y="628.6" class="mesh-haus-st3" width="120.9" height="283.6"/>
		<rect id="Arbeitszimmer_2_" x="1318.2" y="628.6" class="mesh-haus-st3" width="365.5" height="283.6"/>
		<rect x="1427.4" y="534.6" class="mesh-haus-st3" width="2.8" height="85.6"/>
		<path class="mesh-haus-st3" d="M1283.6,607.4"/>
		<polyline class="mesh-haus-st3" points="1318.2,567.3 1384.8,567.3 1384.8,590.4 1332.7,590.4 1332.7,600 1329.4,600 	"/>
		<path class="mesh-haus-st3" d="M1320.8,567.3"/>
		<line class="mesh-haus-st3" x1="1283.6" y1="567.3" x2="1296.9" y2="567.3"/>
		<polyline class="mesh-haus-st3" points="1318.2,619.3 1329.4,618.1 1329.4,617.9 1384.8,617.9 1384.8,620.1 	"/>
		<line class="mesh-haus-st3" x1="1283.6" y1="599.8" x2="1296.9" y2="597.2"/>
		<path class="mesh-haus-st3" d="M1306.6,603.7"/>
		<polyline class="mesh-haus-st3" points="1318.2,593.2 1332.7,590.4 1332.7,600 1329.4,600 1318.2,601.8 	"/>
		<polygon class="mesh-haus-st3" points="1180.5,574.8 1180.5,587.4 1035.1,587.4 1035.1,597.3 1026.8,597.3 1026.8,611.6 1024.1,611.6 
			1024.1,574.8 	"/>
		<polyline class="mesh-haus-st3" points="1389.5,789.1 1354,789.1 1362.1,792.3 1414.6,792.3 1405.2,789.1 1400.9,789.1 	"/>
		<polyline class="mesh-haus-st3" points="1318.2,783.4 1343.5,783.4 1335.2,780.3 1318.2,780.3 	"/>
		<polyline class="mesh-haus-st3" points="691.7,808.5 638.4,808.5 630.9,811.7 713.6,811.7 719.4,808.5 702.9,808.5 	"/>
		<polygon class="mesh-haus-st3" points="719.4,808.5 713.6,811.7 713.6,849 719.4,845.1 	"/>
		<polygon class="mesh-haus-st3" points="1530.6,818.3 1561,827.8 1561,890.1 1530.6,890.1 	"/>
		<polygon class="mesh-haus-st3" points="1612.7,824.7 1600.4,824.7 1586,820.6 1597.9,820.6 1597.9,822.5 1599.6,823 1601.5,823 1601.5,821.6 
				"/>
		<polygon class="mesh-haus-st3" points="1561,827.8 1561,837.8 1530.6,827.8 1530.6,818.3 	"/>
		<rect x="1609.9" y="766.8" class="mesh-haus-st3" width="2.8" height="47.8"/>
		<polygon class="mesh-haus-st3" points="1612.7,766.8 1609.9,766.8 1588.1,762.7 1590.8,762.7 	"/>
		<path class="mesh-haus-st3" d="M1468.9,849.8l-8.2-30.1c0,0-3.4-9.1,1.4-11.6c3.6-1.9,13.1,12.7,17.6,20.1c1.5,2.4,1.3,5.6-0.4,7.9
			L1468.9,849.8z"/>
		<path class="mesh-haus-st3" d="M1509.3,842.7h-5.4c-2.9,0-5.6,1.1-7.7,3.1l-8.8,8.4h-7c-2,0-4.1,0-6.1-0.4l12.4-11.8c2.1-2,4.9-3.1,7.7-3.1
			h9.6C1506.5,838.9,1508.6,840.5,1509.3,842.7z"/>
		<line class="mesh-haus-st3" x1="1483.4" y1="858" x2="1476.1" y2="895.5"/>
		<line class="mesh-haus-st3" x1="1473.3" y1="856.4" x2="1465.6" y2="890.1"/>
		<line class="mesh-haus-st3" x1="1519.2" y1="858" x2="1525.1" y2="895.5"/>
		<line class="mesh-haus-st3" x1="1512.8" y1="890.1" x2="1509.9" y2="858"/>
		<rect x="1362.1" y="792.3" class="mesh-haus-st3" width="52.4" height="91.7"/>
		<line class="mesh-haus-st3" x1="1362.1" y1="856.3" x2="1414.6" y2="856.3"/>
		<line class="mesh-haus-st3" x1="1414.6" y1="823.5" x2="1362.1" y2="823.5"/>
		<line class="mesh-haus-st3" x1="1414.6" y1="807.1" x2="1362.1" y2="807.1"/>
		<line class="mesh-haus-st3" x1="1414.6" y1="839.9" x2="1362.1" y2="839.9"/>
		<line class="mesh-haus-st3" x1="1380.7" y1="797" x2="1397.5" y2="797"/>
		<line class="mesh-haus-st3" x1="1380.7" y1="813.1" x2="1397.5" y2="813.1"/>
		<line class="mesh-haus-st3" x1="1380.7" y1="828.9" x2="1397.5" y2="828.9"/>
		<line class="mesh-haus-st3" x1="1380.7" y1="844.8" x2="1397.5" y2="844.8"/>
		<line class="mesh-haus-st3" x1="1380.7" y1="863" x2="1397.5" y2="863"/>
		<polygon class="mesh-haus-st3" points="1354,789.1 1362.1,792.3 1362.1,884 1354,878.8 	"/>
		<path class="mesh-haus-st3" d="M1487.4,854.2l-4,3.8c-0.7,0-1.4,0-2.2,0c-2.8,0-5.6-0.3-7.9-1.7c-2-1.2-3.6-3.2-4.4-6.6c1,2.4,3.1,3.5,5.4,4
			c2,0.4,4.2,0.4,6.1,0.4H1487.4z"/>
		<rect x="1561" y="827.8" class="mesh-haus-st3" width="93" height="73.2"/>
		<polygon class="mesh-haus-st3" points="1654,827.8 1561,827.8 1530.6,818.3 1597.9,818.3 1597.9,820.6 1586,820.6 1600.4,824.7 1612.7,824.7 
			1601.5,821.6 1601.5,818.3 1618.6,818.3 	"/>
		<polygon class="mesh-haus-st3" points="1612.7,824.7 1600.4,824.7 1586,820.6 1597.9,820.6 1597.9,822.5 1599.6,823 1601.5,823 1601.5,821.6 
				"/>
		<path class="mesh-haus-st3" d="M1519.2,848.3v9.7h-35.8l4-3.8l8.8-8.4c2.1-2,4.9-3.1,7.7-3.1h9.6C1516.6,842.7,1519.2,845.2,1519.2,848.3z"/>
		<rect x="1318.2" y="783.4" class="mesh-haus-st3" width="25.4" height="100.6"/>
		<circle class="mesh-haus-st3" cx="1330.1" cy="800.1" r="7.8"/>
		<circle class="mesh-haus-st3" cx="1330.1" cy="823.6" r="5.3"/>
		<circle class="mesh-haus-st3" cx="1330.1" cy="856.2" r="2.7"/>
		<rect x="1354" y="694.9" class="mesh-haus-st3" width="60.6" height="34.9"/>
		<rect x="1485.9" y="711.4" class="mesh-haus-st3" width="88.8" height="2.8"/>
		<rect x="1509.3" y="706.2" class="mesh-haus-st3" width="15.5" height="5.2"/>
		<rect x="1546.1" y="690.1" class="mesh-haus-st3" width="6" height="21.3"/>
		<rect x="1552.2" y="690.1" class="mesh-haus-st3" width="6" height="21.3"/>
		<rect x="1092.3" y="663.5" class="mesh-haus-st3" width="62.5" height="139.7"/>
		<rect x="1092.3" y="803.2" class="mesh-haus-st3" width="62.5" height="80.3"/>
		<rect x="1011" y="812.3" class="mesh-haus-st3" width="81.3" height="71.1"/>
		<rect x="970.3" y="812.3" class="mesh-haus-st3" width="40.6" height="71.1"/>
		<rect x="929.7" y="812.3" class="mesh-haus-st3" width="40.6" height="71.1"/>
		<rect x="848.4" y="812.3" class="mesh-haus-st3" width="40.6" height="71.1"/>
		<rect x="889" y="812.3" class="mesh-haus-st3" width="40.6" height="71.1"/>
		<rect x="970.3" y="663.5" class="mesh-haus-st3" width="40.6" height="71.1"/>
		<rect x="929.7" y="663.5" class="mesh-haus-st3" width="40.6" height="71.1"/>
		<rect x="848.4" y="663.5" class="mesh-haus-st3" width="40.6" height="71.1"/>
		<rect x="889" y="663.5" class="mesh-haus-st3" width="40.6" height="71.1"/>
		<rect x="848.4" y="807.6" class="mesh-haus-st3" width="243.9" height="4.8"/>
		<rect x="1018.2" y="818.9" class="mesh-haus-st3" width="68.1" height="4"/>
		<rect x="1018.2" y="807" class="mesh-haus-st3" width="19.9" height="0.6"/>
		<rect x="1066.3" y="807" class="mesh-haus-st3" width="19.9" height="0.6"/>
		<rect x="1042.3" y="807" class="mesh-haus-st3" width="19.9" height="0.6"/>
		<rect x="1018.2" y="830.1" class="mesh-haus-st3" width="68.1" height="35.2"/>
		<polygon class="mesh-haus-st3" points="1090.9,733.7 1012.9,733.7 1038.8,704 1065,704 	"/>
		<polygon class="mesh-haus-st3" points="1065,704 1065,628.6 1038.8,628.6 1038.8,704 	"/>
		<line class="mesh-haus-st3" x1="883.4" y1="717.7" x2="883.4" y2="728.8"/>
		<line class="mesh-haus-st3" x1="883.4" y1="818.4" x2="883.4" y2="829.6"/>
		<line class="mesh-haus-st3" x1="894.6" y1="818.4" x2="894.6" y2="829.6"/>
		<line class="mesh-haus-st3" x1="964.7" y1="818.4" x2="964.7" y2="829.6"/>
		<line class="mesh-haus-st3" x1="975.9" y1="818.4" x2="975.9" y2="829.6"/>
		<line class="mesh-haus-st3" x1="894.6" y1="717.7" x2="894.6" y2="728.8"/>
		<line class="mesh-haus-st3" x1="964.7" y1="717.7" x2="964.7" y2="728.8"/>
		<line class="mesh-haus-st3" x1="975.9" y1="717.7" x2="975.9" y2="728.8"/>
		<path class="mesh-haus-st3" d="M1127.5,780.7h-7.2c-3.1,0-5.6-2.5-5.6-5.6v-12.8h18.4v12.8C1133.1,778.2,1130.6,780.7,1127.5,780.7z"/>
		<path class="mesh-haus-st3" d="M683.2,811.7v1c0,1.5-1.3,2.8-2.8,2.8h-11.8c-1.5,0-2.8-1.3-2.8-2.8v-1h-34.9v18.7h82.7v-18.7H683.2z"/>
		<path class="mesh-haus-st3" d="M683.2,830.3v1c0,1.5-1.3,2.8-2.8,2.8h-11.8c-1.5,0-2.8-1.3-2.8-2.8v-1h-34.9V849h82.7v-18.7H683.2z"/>
		<rect x="1011" y="460.2" class="mesh-haus-st3" width="184" height="50"/>
		<rect x="1343.5" y="496.2" class="mesh-haus-st3" width="34.2" height="34.2"/>
		<rect x="1318.2" y="456.9" class="mesh-haus-st3" width="25.3" height="31.9"/>
		<rect x="403.1" y="688" class="mesh-haus-st3" width="163.6" height="82.5"/>
		<polygon class="mesh-haus-st3" points="596.5,844.5 596.5,844.5 596.4,844.5 590.1,844.5 590.1,844.5 	"/>
		<polygon class="mesh-haus-st3" points="590.1,844.5 590.1,844.5 579.4,844.5 579.5,844.5 	"/>
		<polygon class="mesh-haus-st3" points="595.7,884.7 590.9,887.5 590.9,884.7 	"/>
		<rect x="351.9" y="884.7" class="mesh-haus-st3" width="7.1" height="2.7"/>
		<path class="mesh-haus-st3" d="M596.5,844.5v40.2l10.3-5.9v-39.2L596.5,844.5z"/>
		<polygon class="mesh-haus-st3" points="590.1,818.8 590.1,839.7 584.7,842.1 584.7,821 	"/>
		<rect x="584.7" y="844.5" class="mesh-haus-st3" width="5.4" height="0.1"/>
		<polygon class="mesh-haus-st3" points="590.1,818.8 584.7,821 584.6,821.1 372.1,821.1 372.4,821 380.6,818.8 	"/>
		<polyline class="mesh-haus-st3" points="346.9,844.5 363.5,839.7 372.1,839.7 	"/>
		<polyline class="mesh-haus-st3" points="364,844.5 364.5,844.5 372.1,842.2 	"/>
		<polygon class="mesh-haus-st3" points="376.4,880.3 376.4,881.2 359,887.5 359,885 359.9,884.7 364,884.7 	"/>
		<polygon class="mesh-haus-st3" points="376.4,880.2 376.4,880.3 364,884.7 364,880.2 	"/>
		<polyline class="mesh-haus-st3" points="372.1,842.2 364.5,844.5 364,844.6 	"/>
		<rect x="346.9" y="844.5" class="mesh-haus-st3" width="17.1" height="40.2"/>
		<rect x="364" y="853.3" class="mesh-haus-st3" width="215.3" height="26.9"/>
		<rect x="372.1" y="821.1" class="mesh-haus-st3" width="70.9" height="29.6"/>
		<rect x="443" y="821" class="mesh-haus-st3" width="70.9" height="29.7"/>
		<polygon class="mesh-haus-st3" points="584.7,842.1 579.5,844.5 584.7,844.5 584.7,844.5 579.4,844.5 579.4,850.7 513.9,850.7 513.9,821 
			584.7,821 	"/>
		<polygon class="mesh-haus-st3" points="579.4,850.7 579.4,853.3 364,853.3 372.1,850.7 	"/>
		<path class="mesh-haus-st3" d="M596.4,844.5h-17v40.2h16.3l0.8-0.4L596.4,844.5L596.4,844.5z"/>
		<rect x="583.8" y="884.7" class="mesh-haus-st3" width="7.1" height="2.7"/>
		<polygon class="mesh-haus-st3" points="596.5,844.5 596.5,844.5 596.4,844.5 579.4,844.5 579.4,844.5 	"/>
		<polygon class="mesh-haus-st3" points="596.5,844.5 596.5,844.5 579.5,844.5 584.7,842.1 590.1,839.7 606.8,839.7 	"/>
		<polygon class="mesh-haus-st3" points="596.5,844.5 596.5,844.5 596.4,844.5 579.4,844.5 579.5,844.5 	"/>
		<path class="mesh-haus-st3" d="M642,691.6h27.4c3.6-3.5,5.8-8.4,5.8-13.8c0-10.8-8.7-19.5-19.5-19.5c-10.8,0-19.5,8.7-19.5,19.5
			C636.2,683.2,638.4,688.1,642,691.6z"/>
		<path class="mesh-haus-st3" d="M586.3,653.5h27.4c3.6-3.5,5.8-8.4,5.8-13.8c0-10.8-8.7-19.5-19.5-19.5c-10.8,0-19.5,8.7-19.5,19.5
			C580.5,645.1,582.7,650,586.3,653.5z"/>
		<line class="mesh-haus-st3" x1="655.7" y1="474.6" x2="655.7" y2="658.3"/>
		<line class="mesh-haus-st3" x1="600" y1="498.6" x2="600" y2="620.2"/>
		<polygon class="mesh-haus-st3" points="826.7,887.2 829.5,883.5 829.2,891.3 828.4,912.3 726.1,912.3 727.3,894.7 826.7,894.7 	"/>
		<polygon class="mesh-haus-st3" points="827.6,863.2 830.4,859.9 830.1,867.7 829.5,883.5 728,883.5 728.8,870.8 827.6,870.8 	"/>
		<polygon class="mesh-haus-st3" points="829,815.3 832.2,812.3 831.9,820 831.9,820.1 831.3,836 831,843.7 830.4,859.9 729.6,859.9 
			730.4,846.8 828.2,846.8 828.2,839.3 831,836.3 731.1,836.3 732,822.8 829,822.8 	"/>
		<polygon class="mesh-haus-st3" points="830.5,794 832.9,792 832.6,799.7 832.2,812.3 732.6,812.3 733.4,801.5 830.5,801.5 	"/>
		<polygon class="mesh-haus-st3" points="830.5,772.7 833.7,770.5 833.4,778.1 832.9,792 734,792 734.7,780.2 830.5,780.2 	"/>
		<polygon class="mesh-haus-st3" points="831.4,749.9 834.6,748.1 834.6,748.1 834.3,755.6 833.7,770.4 735.4,770.4 736.2,757.4 831.4,757.4 	
			"/>
		<polygon class="mesh-haus-st3" points="832,729.3 835.3,727.8 835.3,728.1 835,735.4 834.6,748.1 736.8,748.1 737.6,736.8 832,736.8 	"/>
		<polygon class="mesh-haus-st3" points="831.7,707.2 836.2,705.8 836.2,706 835.9,713.3 835.3,727.8 738.2,727.8 739,714.8 831.7,714.8 	"/>
		<polygon class="mesh-haus-st3" points="743.1,651.7 838.2,651.7 837.8,663.5 837.5,670.7 837,683.3 836.8,690.3 836.2,705.8 739.9,705.8 
			739.6,705.9 740.5,691.7 830.6,691.7 830.6,684.2 837,683 744.6,683 741,683.4 741.8,671.6 828.1,671.6 828.1,664.1 742.3,664.1 
			742.3,663.8 	"/>
		<polygon class="mesh-haus-st3" points="838.3,648.1 838.3,644.2 743.6,644.2 744.6,628.6 839.1,628.6 	"/>
		<rect x="732.9" y="707.2" class="mesh-haus-st3" width="98.9" height="7.6"/>
		<rect x="734.6" y="684.2" class="mesh-haus-st3" width="96" height="7.6"/>
		<rect x="735.9" y="664.1" class="mesh-haus-st3" width="92.2" height="7.6"/>
		<polygon class="mesh-haus-st3" points="838.3,644.2 838.3,648.1 838.2,651.7 737.2,651.7 737.2,644.2 	"/>
		<polygon class="mesh-haus-st3" points="838.3,648.1 838.3,651.7 838.2,651.7 	"/>
		<rect x="731.7" y="729.3" class="mesh-haus-st3" width="100.4" height="7.6"/>
		<rect x="730.3" y="749.9" class="mesh-haus-st3" width="101.1" height="7.6"/>
		<rect x="728.8" y="772.7" class="mesh-haus-st3" width="101.7" height="7.6"/>
		<rect x="727.4" y="794" class="mesh-haus-st3" width="103" height="7.6"/>
		<rect x="726.1" y="815.3" class="mesh-haus-st3" width="102.9" height="7.6"/>
		<rect x="724.5" y="839.3" class="mesh-haus-st3" width="103.7" height="7.6"/>
		<rect x="722.9" y="863.2" class="mesh-haus-st3" width="104.7" height="7.6"/>
		<rect x="721.4" y="887.2" class="mesh-haus-st3" width="105.3" height="7.6"/>
		<polygon class="mesh-haus-st3" points="829.5,883.5 826.7,887.2 721.4,887.2 725.8,883.5 	"/>
		<polygon class="mesh-haus-st3" points="830.4,859.9 830.4,859.9 827.6,863.2 722.9,863.2 727.3,859.9 	"/>
		<polygon class="mesh-haus-st3" points="831,836.3 828.2,839.3 724.5,839.3 729,836.3 	"/>
		<polygon class="mesh-haus-st3" points="831,836.3 828.2,839.3 831,836.3 	"/>
		<polygon class="mesh-haus-st3" points="832.2,812.3 829,815.3 726.1,815.3 731.1,812.3 	"/>
		<polygon class="mesh-haus-st3" points="832.9,792 830.5,794 727.4,794 731.4,792 	"/>
		<polygon class="mesh-haus-st3" points="833.7,770.4 833.7,770.5 830.5,772.7 728.8,772.7 734,770.4 	"/>
		<polygon class="mesh-haus-st3" points="834.6,748.1 831.4,749.9 730.3,749.9 735.4,748.1 	"/>
		<polygon class="mesh-haus-st3" points="835.3,727.8 832,729.3 731.7,729.3 736.9,727.8 	"/>
		<polygon class="mesh-haus-st3" points="836.2,705.8 831.7,707.2 732.9,707.2 739.6,705.9 739.9,705.8 	"/>
		<polygon class="mesh-haus-st3" points="837,683 830.6,684.2 734.6,684.2 741,683.4 744.6,683 	"/>
		<polygon class="mesh-haus-st3" points="837.8,663.5 828.1,664.1 735.9,664.1 742.3,663.8 750.6,663.5 	"/>
		<polygon class="mesh-haus-st3" points="829.5,883.5 829.5,890.9 829.2,891.3 826.7,894.7 826.7,887.2 	"/>
		<polygon class="mesh-haus-st3" points="830.4,859.9 830.4,867.3 830.1,867.7 827.6,870.8 827.6,863.2 830.4,859.9 	"/>
		<polygon class="mesh-haus-st3" points="831.3,835.9 831.3,843.3 831,843.7 828.2,846.8 828.2,839.3 831,836.3 831,836.3 831.3,836 	"/>
		<polygon class="mesh-haus-st3" points="832.2,812.3 832.2,819.8 831.9,820 831.9,820.1 829,822.8 829,815.3 	"/>
		<polygon class="mesh-haus-st3" points="832.9,792 832.9,799.4 832.6,799.7 830.5,801.5 830.5,794 	"/>
		<polygon class="mesh-haus-st3" points="833.7,770.4 833.7,777.8 833.4,778.1 830.5,780.2 830.5,772.7 833.7,770.5 833.7,770.4 	"/>
		<polygon class="mesh-haus-st3" points="834.6,748.1 834.6,755.5 834.3,755.6 831.4,757.4 831.4,749.9 	"/>
		<polygon class="mesh-haus-st3" points="835.3,727.8 835.3,735.2 835,735.4 832,736.8 832,729.3 	"/>
		<polygon class="mesh-haus-st3" points="836.2,705.8 836.2,713.2 835.9,713.3 831.7,714.8 831.7,707.2 	"/>
		<polygon class="mesh-haus-st3" points="837,683 837,690.3 836.8,690.3 830.6,691.7 830.6,684.2 	"/>
		<polygon class="mesh-haus-st3" points="837.8,663.5 837.8,670.6 837.5,670.7 828.1,671.6 828.1,664.1 	"/>
		<line class="mesh-haus-st3" x1="693.1" y1="786.3" x2="688.5" y2="760.4"/>
		<line class="mesh-haus-st3" x1="701.5" y1="786.3" x2="706.1" y2="760.4"/>
		<line class="mesh-haus-st3" x1="697.3" y1="786.3" x2="697.3" y2="757.3"/>
		<path class="mesh-haus-st3" d="M702.8,810.1h-11.1l-1.5-20.8c-0.1-1.6,1.2-3,2.8-3h8.4c1.6,0,2.9,1.4,2.8,3L702.8,810.1z"/>
		<rect x="1030.8" y="615.1" class="mesh-haus-st3" width="5.1" height="5.1"/>
		<rect x="1182.2" y="615.1" class="mesh-haus-st3" width="5.1" height="5.1"/>
		<rect x="1035.1" y="587.4" class="mesh-haus-st3" width="151.5" height="9.8"/>
		<rect x="1042.7" y="580.5" class="mesh-haus-st3" width="57" height="7"/>
		<rect x="1110" y="580.5" class="mesh-haus-st3" width="59" height="7"/>
		<rect x="1026.8" y="597.3" class="mesh-haus-st3" width="172.2" height="14.4"/>
		<rect x="1020.6" y="611.6" class="mesh-haus-st3" width="183.9" height="3.5"/>
		<polygon class="mesh-haus-st3" points="1240.2,594.7 1240.2,615.1 1204.5,615.1 1204.5,611.6 1199,611.6 1199,597.3 1191.1,597.3 
			1191.1,594.7 	"/>
		<path class="mesh-haus-st3" d="M1222.4,578.2h-16c-0.8,0-1.3-0.8-1.1-1.5l5.9-16.9c0.2-0.4,0.6-0.7,1.1-0.7h4.1c0.5,0,0.9,0.3,1.1,0.7
			l5.9,16.9C1223.7,577.5,1223.1,578.2,1222.4,578.2z"/>
		<line class="mesh-haus-st3" x1="1207" y1="599.1" x2="1221" y2="599.1"/>
		<rect x="1329.4" y="600" class="mesh-haus-st3" width="89.1" height="17.9"/>
		<rect x="1332.7" y="590.4" class="mesh-haus-st3" width="82" height="9.5"/>
		<path class="mesh-haus-st3" d="M1432.5,506h-7.3c-1.1,0-2.2,0.7-2.6,1.7l-9.6,23c-0.8,1.8,0.6,3.9,2.6,3.9h26.4c2,0,3.4-2,2.6-3.9l-9.5-23
			C1434.6,506.7,1433.6,506,1432.5,506z"/>
		<rect x="1213.2" y="578.2" class="mesh-haus-st3" width="2.3" height="16.5"/>
		<rect x="1533.3" y="534.6" class="mesh-haus-st3" width="39.1" height="19.9"/>
		<polygon class="mesh-haus-st3" points="1601.1,557.5 1581.4,560.6 1495.2,560.6 1495.2,557.7 1496.1,557.5 	"/>
		<polyline class="mesh-haus-st3" points="1476.9,620.2 1476.9,557.6 1492.1,554.5 1492.1,620.2 	"/>
		<polyline class="mesh-haus-st3" points="1601.1,620.2 1601.1,557.5 1580.8,560.7 1580.8,620.2 	"/>
		<polygon class="mesh-haus-st3" points="1612.7,824.7 1600.4,824.7 1586,820.6 1597.9,820.6 1597.9,822.5 1599.6,823 1601.5,823 1601.5,821.6 
				"/>
		<polygon class="mesh-haus-st3" points="1601.5,812.3 1601.5,823 1599.6,823 1599.6,811.9 	"/>
		<polygon class="mesh-haus-st3" points="1599.6,811.9 1599.6,823 1597.9,822.5 1597.9,811.4 	"/>
		<polygon class="mesh-haus-st3" points="1609.9,766.8 1609.9,814.6 1601.5,812.3 1599.6,811.9 1597.9,811.4 1588.1,808.8 1588.1,762.7 	"/>
		<rect x="970.3" y="594.7" class="mesh-haus-st3" width="50.3" height="20.4"/>
		<line class="mesh-haus-st3" x1="988.1" y1="599.1" x2="1002.1" y2="599.1"/>
		<polygon class="mesh-haus-st3" points="1604.2,554.5 1604.2,620.2 1601.1,620.2 1601.1,557.5 1495.2,557.5 1495.2,620.2 1492.1,620.2 
			1492.1,554.5 	"/>
		<line class="mesh-haus-st3" x1="1296.9" y1="605.3" x2="1283.6" y2="607.4"/>
		<rect x="372.1" y="821" class="mesh-haus-st3" width="70.9" height="0.1"/>
		<g id="Flur_1_">
			<polygon id="Fußboden_2_" class="mesh-haus-st3" points="1296.9,878.8 1283,878.8 1283,883.4 1275.6,883.4 1270.1,878.8 1188.9,878.8 
				1188.9,912.3 1309.8,912.3 1296.9,901.4 		"/>
			<polygon id="Rückwand_2_" class="mesh-haus-st3" points="1270.1,628.6 1188.9,628.6 1188.9,878.8 1270.1,878.8 		"/>
			<polygon id="Türzagen_2_" class="mesh-haus-st3" points="1275.6,883.4 1283,883.4 1283,683.1 1275.6,682.3 		"/>
			<polygon id="Seitenwand_2_" class="mesh-haus-st3" points="1270.1,628.6 1309.8,628.6 1309.8,912.3 1296.9,901.4 1297,684.6 1275.6,682.3 
				1275.6,883.4 1270.1,878.8 		"/>
		</g>
		<g id="Arbeitszimmer_1_">
			<polygon id="Fußboden_1_" class="mesh-haus-st3" points="1683.7,912.3 1318.2,912.3 1318.2,884 1343.5,884 1343.5,878.8 1354,878.8 
				1362.1,884 1414.6,884 1414.6,878.8 1530.6,878.8 1530.6,890.1 1561,890.1 1561,901 1654,901 		"/>
			<polygon id="Seitenwand_1_" class="mesh-haus-st3" points="1683.7,912.3 1683.6,628.6 1595.7,628.6 1595.7,763.6 1612.7,766.8 1612.7,814.6 
				1609.9,814.6 1601.5,812.3 1601.5,818.3 1618.6,818.3 1654,827.8 1654,901 		"/>
			<line id="Rückwand_1_" class="mesh-haus-st4" x1="1345.7" y1="878.8" x2="1352.1" y2="878.8"/>
		</g>
		<g id="Küche_x2F_Wohnzimmer_1_">
			<polyline id="Boden_3_" class="mesh-haus-st3" points="1154.8,878.8 1157.5,878.8 1160.7,883.4 1168.1,883.4 1168.1,878.8 1173,878.8 
				1173,901.4 1180.5,912.3 212.8,912.3 314.8,878.8 346.9,878.8 		"/>
			<line id="Boden_2_" class="mesh-haus-st3" x1="829.5" y1="878.8" x2="848.4" y2="878.8"/>
			<line id="Boden_1_" class="mesh-haus-st3" x1="606.9" y1="878.8" x2="728.3" y2="878.8"/>
			<polygon id="Wand_mit_Tür_1_" class="mesh-haus-st3" points="1157.5,628.6 1180.5,628.6 1180.5,912.3 1173,901.4 1173,684.6 1160.7,682.3 
				1160.7,883.4 1157.5,878.8 		"/>
			<polygon id="Türzagen_1_" class="mesh-haus-st3" points="1160.7,883.4 1168.1,883.4 1168.1,683.6 1160.7,682.3 		"/>
			<polygon id="Dach_1_" class="mesh-haus-st3" points="930.4,330.7 930.4,380.4 314.8,632.9 212.8,625.1 		"/>
			<g id="Fenster_2_">
				<polygon class="mesh-haus-st3" points="306.6,670.5 309.8,670.4 309.8,875.4 306.6,875.4 			"/>
				<polygon class="mesh-haus-st3" points="290.3,881.6 290.3,880.6 306.6,875.4 309.8,875.4 			"/>
				<polygon class="mesh-haus-st3" points="282.4,671 285.6,670.9 285.6,883.1 282.4,883.1 			"/>
				<polygon class="mesh-haus-st3" points="256.7,892.4 256.7,891.3 282.4,883.1 285.6,883.1 			"/>
				<polygon class="mesh-haus-st3" points="247.4,671.7 250.6,671.6 250.6,895.5 247.4,895.5 			"/>
				<polygon class="mesh-haus-st3" points="218.5,905.9 218.5,904.6 247.4,895.5 250.6,895.5 			"/>
			</g>
			<path id="Fenster_1_" class="mesh-haus-st3" d="M212.8,625.1v287.2l102.1-33.5V632.9L212.8,625.1z M250.6,895.5l-32.1,10.3V672.4l32.1-0.8
				V895.5z M285.6,883.1l-28.9,9.3V671.6l28.9-0.7V883.1z M309.8,875.4l-19.5,6.2V670.9l19.5-0.5V875.4z"/>
			<polygon id="Dach_draußen_1_" class="mesh-haus-st3" points="121.1,662.7 204.4,662.7 204.4,628.5 		"/>
		</g>
		<g id="Schlafzimmer_1_">
			<polygon id="Wand_2_" class="mesh-haus-st3" points="938.8,336.6 947.1,377.4 947.1,620.2 938.8,620.2 		"/>
			<polygon id="Decke_1_" class="mesh-haus-st3" points="1309.8,336.6 1270.1,377.4 947.1,377.4 938.8,336.6 		"/>
			<polygon id="Wand_1_" class="mesh-haus-st3" points="1309.8,620.1 1309.8,336.6 1270.1,377.4 1270.1,620.1 1275.9,620.1 1275.9,441.3 
				1296.9,425 1296.9,620.1 		"/>
			<g id="Türzage_1_">
				<polygon id="Türzage_3_" class="mesh-haus-st3" points="1283.6,620.2 1283.6,441.3 1275.9,441.3 1275.9,620.1 			"/>
				<polygon id="Türzage_2_" class="mesh-haus-st3" points="1296.9,431.2 1296.9,425 1275.9,441.3 1283.6,441.3 			"/>
			</g>
		</g>
	</g>
	<g id="devices_1_">
		<g id="devices-router_1_">
			<path class="mesh-haus-st5" d="M683.4,806.5c0,1.8-1.2,3.5-3.7,3.5h-36.8c-2,0-3.7-1.6-3.7-3.5v-21c0-1.9,1.6-3.5,3.7-3.5h36.8
				c2,0,3.7,1.6,3.7,3.5V806.5z"/>
			<path class="mesh-haus-st6" d="M665.3,803.5c0,0.3-0.2,0.5-0.5,0.5h-6.9c-0.3,0-0.5-0.2-0.5-0.5v-15c0-0.3,0.2-0.5,0.5-0.5h6.9
				c0.3,0,0.5,0.2,0.5,0.5V803.5z"/>
		</g>
		<path id="devices-mesh-3_1_" class="mesh-haus-st5" d="M1492.1,554.5h14.4c1.5-2.2,2.4-5,2.4-7.9c0-7.7-6.3-14-14-14c-7.7,0-14,6.3-14,14
			c0,3.6,1.4,6.9,3.6,9.4L1492.1,554.5z"/>
		<circle id="devices-mesh-2_1_" class="mesh-haus-st5" cx="1395.2" cy="776.7" r="14"/>
		<path id="devices-mesh-1_1_" class="mesh-haus-st5" d="M987.5,594.7h18.2c3-2.6,4.9-6.3,4.9-10.6c0-7.7-6.3-14-14-14c-7.7,0-14,6.3-14,14
			C982.6,588.4,984.6,592.1,987.5,594.7z"/>
		<path id="devices-repeater-1_1_" class="mesh-haus-st7" d="M996,588c0.6,0,1-0.4,1-1s-0.4-1-1-1s-1,0.4-1,1S995.4,588,996,588z M990.6,573
			h10.9c0.9,0,1.2,0.1,1.5,0.3s0.6,0.4,0.8,0.8s0.3,0.6,0.3,1.5v14.9c0,0.9-0.1,1.2-0.3,1.5s-0.4,0.6-0.8,0.8s-0.6,0.3-1.5,0.3h-10.9
			c-0.9,0-1.2-0.1-1.5-0.3s-0.6-0.4-0.8-0.8s-0.3-0.6-0.3-1.5v-14.9c0-0.9,0.1-1.2,0.3-1.5s0.4-0.6,0.8-0.8S989.7,573,990.6,573z"/>
	</g>
	<polygon id="house-outline_1_" class="mesh-haus-st8" points="1692.1,331.9 1800.9,377.4 1805.2,367.1 1314,161.3 116.8,652.3 121.1,662.7 
		204.4,628.5 204.4,920.7 1692.1,920.7 1692.1,628.6 1781.1,628.6 1781.1,508 1772.7,508 1772.7,620.2 1692.1,620.2 "/>
	</svg>
	<canvas></canvas>
</div>
              
            
!

CSS

              
                body {
	background: #262626;
}

.container {
	// hack aspect-ratio to 16 / 9  
	position: relative;
	max-width: 600px;
	margin: 0 auto;
	&:after {
		content: "";
		display: block;
		padding-top: 100% * 9/16; 
	}
}

canvas,
img, 
svg {
	position: absolute;
	top: 0;
	left: 0;
	display: blocK; 
	width: 100%;
	height: 100%;
}
              
            
!

JS

              
                /**
 *   2Do
 *   – add resize funcitonality
 */

var container = document.getElementsByClassName("container")[0]
var canvas = document.getElementsByTagName("canvas")[0]
var c = canvas.getContext("2d")

// hardcoded svg viewbox dimensions
var svgViewbox = {
	width: 1921,
	height: 1081,
}


// clip everything comin
	let clipPath = new Path2D("M1800.8,377.5l4.3-10.3l-491.2-205.8l-1197.2,491l4.3,10.4h83.3v258H1692V628.6h89V508.1h-8.4l-80.6,15.2 V414.6L1800.8,377.5z")


var ratio = window.devicePixelRatio || 1 

// set canvas size (make it double size for retina)
canvas.width = container.clientWidth * ratio
canvas.height = container.clientHeight * ratio
var vw = container.clientWidth;
var vh = container.clientHeight;

// the canvas needs to be scaled to fit the svg dom-element
var scaleFactor = canvas.width / svgViewbox.width
// c.scale(scaleFactor, scaleFactor)
c.scale(ratio, ratio)

// the object we are going to tween
var circle = {
	x: 997.3 / 1921,
	y: 584 / 1081, 
	opacity: .71,
	radius: 515 / 2,
	backgroundColor: "#E2007A",
}

var drawCircle = function(x, y, radius, opacity, backgroundColor) {
	c.beginPath()
	c.globalAlpha = opacity
	c.fillStyle = backgroundColor
	// c.arc(x, y, radius, 0, Math.PI * 2)
	c.arc(x * vw, y * vh, radius * vw, 0, Math.PI * 2)
	c.fill()
}

var draw = function() {
	

	// c.clearRect(0, 0, canvas.width / scaleFactor, canvas.height / scaleFactor)
	c.clearRect(0, 0, canvas.width, canvas.height)

	c.save()
	
	// clip everything comin
	// let clipPath = new Path2D("M1800.8,377.5l4.3-10.3l-491.2-205.8l-1197.2,491l4.3,10.4h83.3v258H1692V628.6h89V508.1h-8.4l-80.6,15.2 V414.6L1800.8,377.5z")

	// c.clip(clipPath)

	drawCircle(circle.x, circle.y, circle.radius, circle.opacity, circle.backgroundColor)
	
	c.restore()
}  


TweenMax.fromTo(circle, 5, {
	radius: 0,
	backgroundColor: "#bfff00",
}, {
	backgroundColor: "#ceeeaa", 
	radius: 515 / 1921,
	repeat: -1,
	yoyo: true,
	onUpdate: draw, 
})
              
            
!
999px

Console