Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ 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

Auto Save

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

              
                <svg id="houseSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 3000"><title>Just a House</title><rect id="background" width="3000" height="3000" fill="#ddedea"/><g id="house"><polygon points="2219.66 408.03 1072.18 408.03 1072.18 938.3 1190.66 938.3 2715 938.3 2715.57 938.3 2715 937.7 2219.66 408.03" fill="#d16f59"/><polygon points="289.27 938.3 1014.08 168.53 1738.9 938.3 289.27 938.3" fill="#c1432c"/><rect x="308.99" y="958.02" width="2386.85" height="1656.99" fill="#f7e8d5"/><path d="M2715.57,2634.74H289.27V938.3h2426.3V2634.74ZM328.72,2595.29h2347.4V977.75H328.72V2595.29Z" fill="#c1432c"/><rect x="308.99" y="1763.51" width="2386.85" height="46.03" fill="#c1432c"/><rect x="1712.6" y="958.03" width="46.03" height="828.49" fill="#c1432c"/><rect x="1292.01" y="1786.52" width="46.03" height="828.49" fill="#c1432c"/><rect x="1825.53" y="2233.03" width="584.62" height="338.96" rx="20.25" ry="20.25" fill="#e54630"/><rect x="1778.88" y="2428.88" width="677.92" height="169.41" fill="#e54630"/><rect x="1778.88" y="2428.88" width="677.92" height="65.58" fill="#bf1f22"/><path d="M1824.05,2467.94H1806.7c-13.55,0-25.73-7.25-34.12-18.64v149h97.16V2412.84C1869.74,2443.14,1849.18,2467.94,1824.05,2467.94Z" fill="#ef7100"/><path d="M1861.51,2381.45c-8.28-14.3-22-23.71-37.46-23.71H1806.7c-25.13,0-45.69,24.79-45.69,55.1a61.57,61.57,0,0,0,11.57,36.45v-67.84h88.93Z" fill="#ef7100"/><path d="M1772.58,2381.45v67.84c8.39,11.4,20.57,18.64,34.12,18.64h17.35c25.13,0,45.69-24.79,45.69-55.1a62.7,62.7,0,0,0-8.22-31.39h-88.93Z" fill="#ef7100"/><path d="M2411.63,2467.94H2429c13.55,0,25.73-7.25,34.12-18.64v149h-97.16V2412.84C2365.94,2443.14,2386.5,2467.94,2411.63,2467.94Z" fill="#ef7100"/><path d="M2374.17,2381.45c8.28-14.3,22-23.71,37.46-23.71H2429c25.13,0,45.69,24.79,45.69,55.1a61.57,61.57,0,0,1-11.57,36.45v-67.84h-88.93Z" fill="#ef7100"/><path d="M2463.1,2381.45v67.84c-8.39,11.4-20.57,18.64-34.12,18.64h-17.35c-25.13,0-45.69-24.79-45.69-55.1a62.7,62.7,0,0,1,8.22-31.39h88.93Z" fill="#ef7100"/><rect x="2562.65" y="2055.17" width="14.22" height="543.12" fill="#7a5334"/><path d="M2667,2134.79a90.52,90.52,0,0,0,.65-10.66c0-51.69-43.84-93.6-97.91-93.6s-97.91,41.91-97.91,93.6a90.39,90.39,0,0,0,.65,10.66H2667Z" fill="#ef7100"/><rect x="2524.74" y="2021.05" width="90.05" height="33.18" fill="#ef7100"/><rect x="2502.94" y="2585.68" width="133.65" height="12.52" fill="#ef7100"/><rect x="2516.53" y="2572.5" width="106.46" height="12.52" fill="#ef7100"/><rect x="842.71" y="1099.16" width="572.69" height="235.32" fill="#658f96"/><rect x="875.59" y="1132.04" width="506.93" height="169.57" fill="#262626"/><rect x="1630.49" y="2491.3" width="11.97" height="106.99" fill="#7a5334"/><rect x="1397.4" y="2020.66" width="292.6" height="567.76" fill="#ffd177"/><path d="M1699.86,2598.29H1387.53V2010.8h312.33v587.49Zm-292.6-19.73h272.88v-548H1407.26v548Z" fill="#425c60"/><rect x="1397.4" y="2200.02" width="292.6" height="19.73" fill="#425c60"/><rect x="1397.4" y="2389.25" width="292.6" height="19.73" fill="#425c60"/><rect x="1460.17" y="2558.92" width="161.69" height="20.08" fill="#e54630"/><rect x="1452.75" y="2532.75" width="176.54" height="32.83" fill="#f27961"/><rect x="1486.41" y="2516.66" width="129.5" height="16.09" fill="#425c60"/><rect x="1480.47" y="2495.7" width="141.39" height="26.29" fill="#658f96"/><rect x="1419.04" y="2099.83" width="80.96" height="100.13" fill="#eff2f9"/><rect x="1419.04" y="2099.83" width="74.48" height="100.13" fill="#f1a51c"/><rect x="1419.04" y="2099.83" width="5.56" height="100.13" fill="#7a5334"/><text transform="translate(1428.75 2126.03)" font-size="16.72" font-family="Oswald">Why is IE<tspan x="0" y="20">such a </tspan><tspan x="0" y="40">pain with</tspan><tspan x="0" y="60">SVGs?</tspan></text><rect x="1511.75" y="2111.8" width="57.48" height="88.16" fill="#eff2f9"/><rect x="1511.75" y="2111.8" width="52.88" height="88.16" fill="#e54630"/><rect x="1511.75" y="2111.8" width="3.94" height="88.16" fill="#7c1313"/><text transform="translate(1519 2138.93)" font-size="13" fill="#fff" font-family="Oswald">Is Blake<tspan x="0" y="14">real or</tspan><tspan x="0" y="28">from the</tspan><tspan x="0" y="42">Matrix?</tspan></text><rect x="1594.69" y="2101.06" width="11.06" height="98.91" fill="#e54630"/><rect x="1573.58" y="2104.79" width="13.7" height="95.17" fill="#7a5334"/><rect x="1610.66" y="2111.1" width="14.22" height="88.86" fill="#658f96"/><rect x="1507.07" y="2292.35" width="62.18" height="95.37" fill="#eff2f9"/><rect x="1507.07" y="2292.35" width="57.2" height="95.37" fill="#658f96"/><rect x="1507.07" y="2292.35" width="4.28" height="95.37" fill="#3c737c"/><text transform="translate(1516.44 2331.12)" font-size="16" fill="#fff" font-family="Oswald">Why<tspan font-size="10.5"><tspan x="0" y="10.8">is Diaco's</tspan><tspan x="0" y="21.6">code so</tspan><tspan x="0" y="32.4">awesome?</tspan></tspan></text><rect x="1430.61" y="2298.29" width="70.11" height="89.44" fill="#eff2f9"/><rect x="1430.61" y="2298.29" width="64.5" height="89.44" fill="#e54630"/><rect x="1430.61" y="2298.29" width="4.8" height="89.44" fill="#7c1313"/><text transform="translate(1441.63 2313.25)" font-size="10.8" fill="#fff" font-family="Oswald">Is there <tspan x="0" y="10.8">anything</tspan><tspan x="0" y="21.6">about</tspan><tspan x="0" y="32.4">browsers</tspan><tspan x="0" y="43.2">Jonathan</tspan><tspan x="0" y="54">doesn't</tspan><tspan x="0" y="64.8">know?</tspan></text><rect x="1610.5" y="2279.4" width="11.97" height="108.32" fill="#eff2f9"/><rect x="1592.64" y="2284.8" width="14.83" height="102.92" fill="#7a5334"/><rect x="957.66" y="1893.06" width="251.55" height="702.32" fill="#83beca"/><rect x="957.66" y="2315.96" width="251.55" height="5.59" fill="#30444a"/><rect x="910.3" y="2219.75" width="135.79" height="10.95" transform="translate(-1247.03 3203.43) rotate(-90)" fill="#30444a"/><rect x="910.3" y="2402.37" width="135.79" height="10.95" transform="translate(-1429.64 3386.04) rotate(-90)" fill="#30444a"/><rect x="396.76" y="2269.6" width="250.26" height="325.78" fill="#658f96"/><rect x="409.36" y="2284.86" width="225.06" height="39.57" rx="3" ry="3" fill="#ffd177"/><rect x="396.67" y="2233.57" width="250.45" height="15.68" fill="#4d4845"/><rect x="429.42" y="2371.27" width="184.94" height="161.96" rx="1" ry="1" fill="#425c60"/><path d="M456.5,2304.55A12.55,12.55,0,1,1,443.94,2292,12.5,12.5,0,0,1,456.5,2304.55Z" fill="#ca684b"/><rect x="441.91" y="2290.11" width="4.08" height="28.86" fill="#4d4845"/><path d="M498.18,2304.55A12.55,12.55,0,1,1,485.63,2292,12.5,12.5,0,0,1,498.18,2304.55Z" fill="#658f96"/><rect x="483.59" y="2290.11" width="4.08" height="28.86" fill="#4d4845"/><path d="M534.45,2304.55A12.55,12.55,0,1,1,521.89,2292,12.5,12.5,0,0,1,534.45,2304.55Z" fill="#658f96"/><rect x="519.85" y="2290.11" width="4.08" height="28.86" fill="#4d4845"/><path d="M581.55,2304.55A12.55,12.55,0,1,1,569,2292,12.5,12.5,0,0,1,581.55,2304.55Z" fill="#658f96"/><rect x="566.95" y="2290.11" width="4.08" height="28.86" fill="#4d4845"/><path d="M623.23,2304.55A12.55,12.55,0,1,1,610.68,2292,12.5,12.5,0,0,1,623.23,2304.55Z" fill="#658f96"/><rect x="608.64" y="2290.11" width="4.08" height="28.86" fill="#4d4845"/><path d="M483.22,2234.13h87.16c9.74,0,17.71-10.29,17.71-22.87H465.52C465.52,2223.83,473.49,2234.13,483.22,2234.13Z" fill="#30444a"/><path d="M484.83,2215.35h-40c-1.52,0-2.76.87-2.76,1.93s1.24,1.93,2.76,1.93h40c1.52,0,2.76-.87,2.76-1.93S486.35,2215.35,484.83,2215.35Z" fill="#30444a"/><path d="M406.24,2222.19h41.57a4.93,4.93,0,0,0,4.91-4.91h0a4.93,4.93,0,0,0-4.91-4.91H406.24a4.93,4.93,0,0,0-4.91,4.91h0A4.93,4.93,0,0,0,406.24,2222.19Z" fill="#30444a"/><rect x="396.76" y="2343.5" width="250.26" height="8.14" fill="#425c60"/><rect x="396.67" y="2249.25" width="250.45" height="20.35" fill="#e54630"/><rect x="678.76" y="1808.98" width="250.26" height="221.04" fill="#658f96"/><polygon points="878.13 1825.53 878.13 1825.53 732.97 1825.53 732.97 1825.53 691.36 1825.53 691.36 2013.48 732.97 2013.48 796.81 2013.48 810.97 2013.48 878.13 2013.48 916.41 2013.48 916.41 1825.53 878.13 1825.53" fill="#ffd177"/><rect x="678.76" y="1912.73" width="237.65" height="13.53" fill="#658f96"/><path d="M763.31,1947.06H733.13a17.09,17.09,0,0,0-17.13,17h64.44A17.09,17.09,0,0,0,763.31,1947.06Z" fill="#425c60"/><path d="M716,1966.55v30a17.09,17.09,0,0,0,17.13,17h30.18a17.09,17.09,0,0,0,17.13-17v-30H716Z" fill="#e54630"/><path d="M723.13,1992.52h-8.56a10.15,10.15,0,1,1,0-20.3h8.56A10.15,10.15,0,1,1,723.13,1992.52Zm-8.56-15.43a5.28,5.28,0,1,0,0,10.55h8.56a5.28,5.28,0,1,0,0-10.55h-8.56Z" fill="#e54630"/><path d="M781.87,1992.52h-8.56a10.15,10.15,0,1,1,0-20.3h8.56A10.15,10.15,0,1,1,781.87,1992.52Zm-8.56-15.43a5.28,5.28,0,1,0,0,10.55h8.56a5.28,5.28,0,1,0,0-10.55h-8.56Z" fill="#e54630"/><path d="M748.22,1960.05a8.14,8.14,0,0,1-8.14-8.11v-2.46a8.14,8.14,0,0,1,16.29,0v2.46A8.14,8.14,0,0,1,748.22,1960.05Zm0-14.67a4.12,4.12,0,0,0-4.12,4.11v2.46a4.12,4.12,0,0,0,8.24,0v-2.46A4.12,4.12,0,0,0,748.22,1945.38Z" fill="#425c60"/><path d="M888.29,1850.46a4.48,4.48,0,0,1-4.49,4.47h0a4.48,4.48,0,0,1-4.49-4.47v-12.31a4.48,4.48,0,0,1,4.49-4.47h0a4.48,4.48,0,0,1,4.49,4.47v12.31Z" fill="#4d4845"/><path d="M895.54,1912.73c0-.19.06-0.37,0.06-0.56v-54.25a11.8,11.8,0,0,0-23.6,0v54.25c0,0.19,0,.37.06,0.56h23.49Z" fill="#425c60"/>
  <path d="M853.52,1850.46a4.48,4.48,0,0,1-4.49,4.47h0a4.48,4.48,0,0,1-4.49-4.47v-12.31a4.48,4.48,0,0,1,4.49-4.47h0a4.48,4.48,0,0,1,4.49,4.47v12.31Z" fill="#4d4845"/><path d="M860.77,1912.73c0-.19.06-0.37,0.06-0.56v-54.25a11.8,11.8,0,0,0-23.6,0v54.25c0,0.19,0,.37.06,0.56h23.49Z" fill="#425c60"/><rect x="678.76" y="2269.6" width="250.26" height="325.78" fill="#658f96"/><rect x="691.36" y="2279.4" width="225.06" height="61.55" fill="#83beca"/><rect x="691.36" y="2350.64" width="105.45" height="226.73" fill="#83beca"/><rect x="810.97" y="2350.64" width="105.45" height="226.73" fill="#83beca"/><rect x="736.25" y="2290.27" width="135.29" height="7.18" fill="#425c60"/><path d="M833.14,2156.15h-12.2a21.45,21.45,0,0,0-21.47,21.38v16.36a21.35,21.35,0,0,0,19.67,21.19l-5.5,33.88h70.7v-62.11l14.28-30.7H833.14Zm-24.66,37.74v-16.36a12.45,12.45,0,0,1,12.45-12.41h6.29l-6.67,41.13A12.41,12.41,0,0,1,808.48,2193.89Z" fill="#30444a"/><path d="M846,2228.75a4.5,4.5,0,0,1-4.52,4.48h0a4.49,4.49,0,0,1-4.5-4.48V2178.6a4.5,4.5,0,0,1,4.5-4.5h0a4.51,4.51,0,0,1,4.52,4.5v50.15Z" fill="#83beca"/><path d="M749.81,2213.15l0.15-1.21h0l0.11-.86,0.67-5.18h0l0-.22h-45.5l0,0.22h0l0.52,3.89h0l0.28,2.15h0l2.9,22.38a10,10,0,0,0,.22,1.09,13.56,13.56,0,0,0,5.94,8.3v0.3c0,1.35,1.53,2.44,3.4,2.44h18.91c1.88,0,3.41-1.09,3.41-2.44v-0.3a13.64,13.64,0,0,0,6-8.28c0-.1,0-0.18.06-0.28,5.48-.4,12.56-4.66,13.35-9.89l0.33-2.18C761.4,2217.69,755.28,2213.35,749.81,2213.15Zm5.12,10.23-0.23,1.55c-0.48,3.21-3.55,5.9-7.3,6.74l1.15-9,0.11-.79h0l0.69-5.29C753,2217.33,755.41,2220.08,754.93,2223.38Z" fill="#658f96"/><rect x="821.11" y="2365.49" width="7.25" height="93.78" fill="#425c60"/><rect x="779.43" y="2365.49" width="7.25" height="93.78" fill="#425c60"/><rect x="678.67" y="2248.76" width="250.45" height="20.35" fill="#e54630"/><rect x="473.24" y="1808.98" width="97.3" height="208.88" fill="#658f96"/><polygon points="424.3 2068.79 521.89 1947.06 619.49 2068.79 424.3 2068.79" fill="#658f96"/><rect x="813.83" y="1470.45" width="595.14" height="99.88" fill="#7a5334"/><rect x="770.29" y="1682.86" width="682.21" height="34.16" fill="#7a5334"/><rect x="770.29" y="1708.98" width="43.54" height="52.43" fill="#7a5334"/><rect x="1408.97" y="1708.98" width="43.54" height="52.43" fill="#7a5334"/><rect x="813.83" y="1443.1" width="36.18" height="78.48" fill="#7a5334"/><rect x="1376.3" y="1443.1" width="32.67" height="78.48" fill="#7a5334"/><path d="M1091.65,1587.41h-206s-7.41-72,8-87.41c75.36,13.06,117.55,14.07,189.89,0C1099.91,1514.55,1091.65,1587.41,1091.65,1587.41Z" fill="#83beca"/><path d="M1336.8,1587.41h-206s-7.41-72,8-87.41c75.36,13.06,117.55,14.07,189.89,0C1345.07,1514.55,1336.8,1587.41,1336.8,1587.41Z" fill="#83beca"/><path d="M1452.5,1682.86v-80.38c0-22.1-16.33-40.19-36.29-40.19H806.58c-20,0-36.29,18.08-36.29,40.19v80.38H1452.5Z" fill="#ef7100"/><rect x="357.05" y="1063.5" width="347.64" height="692.9" fill="#a87c4b"/><rect x="525.88" y="1063.5" width="9.98" height="692.9" fill="#7a5334"/><rect x="357.05" y="1751.37" width="347.64" height="10.05" fill="#7a5334"/><rect x="357.05" y="1665.68" width="347.64" height="8.22" fill="#7a5334"/><rect x="488.7" y="1292.53" width="16.46" height="177.92" fill="#7a5334"/><rect x="556.57" y="1292.53" width="16.46" height="177.92" fill="#7a5334"/><rect x="397.98" y="1688.15" width="84.91" height="9.61" fill="#7a5334"/><rect x="578.85" y="1688.15" width="84.91" height="9.61" fill="#7a5334"/><rect x="1583.99" y="1476.42" width="11.51" height="92.58" fill="#f1a51c"/><path d="M1614.36,1569h-49.23a5.39,5.39,0,0,1-5.39-5.39h0a5.39,5.39,0,0,1,5.39-5.39h49.23a5.39,5.39,0,0,1,5.39,5.39h0A5.39,5.39,0,0,1,1614.36,1569Z" fill="#f1a51c"/><path d="M1592.62,1552.06h-5.75a6.59,6.59,0,0,1-6.58-6.58h0a6.59,6.59,0,0,1,6.58-6.58h5.75a6.59,6.59,0,0,1,6.58,6.58h0A6.59,6.59,0,0,1,1592.62,1552.06Z" fill="#f1a51c"/><path d="M1592.62,1514.25h-5.75a6.59,6.59,0,0,1-6.58-6.58h0a6.59,6.59,0,0,1,6.58-6.58h5.75a6.59,6.59,0,0,1,6.58,6.58h0A6.59,6.59,0,0,1,1592.62,1514.25Z" fill="#f1a51c"/><path d="M1592.37,1541.54h-5.25a4.32,4.32,0,0,1-4.3-4.3h0a4.32,4.32,0,0,1,4.3-4.3h5.25a4.32,4.32,0,0,1,4.3,4.3h0A4.32,4.32,0,0,1,1592.37,1541.54Z" fill="#f1a51c"/><path d="M1587.73,1506c0.68,0,1.33,0,2,0s1.34,0,2,0H1641l-28.18-86.69a113.68,113.68,0,0,1-46.09,0L1538.52,1506h49.21Z" fill="#e54630"/><path d="M1501.44,1575.6v185.82h27.66c9.35-20.6,33-35.23,60.65-35.23s51.29,14.63,60.65,35.23h27.66V1575.6H1501.44Z" fill="#7a5334"/><rect x="1495.97" y="1564.85" width="187.56" height="12.19" fill="#658f96"/><rect x="1522.76" y="1589.23" width="133.97" height="44.57" fill="#f1a51c"/><rect x="1522.76" y="1646.69" width="133.97" height="44.57" fill="#f1a51c"/><rect x="1559.75" y="1596.82" width="60" height="9.04" fill="#7a5334"/><rect x="1559.75" y="1653.53" width="60" height="9.04" fill="#7a5334"/><rect x="1890.58" y="2126.55" width="23.84" height="26.69" fill="#68432a"/><rect x="2321.27" y="2126.55" width="23.84" height="26.69" fill="#68432a"/><rect x="1853.08" y="2108.33" width="529.53" height="18.22" fill="#a87c4b"/><path d="M2237.89,2028.22c8.89-80.45-18-139.29-15.92-139.23s32.53,58.13,23.94,137.12A74.19,74.19,0,0,0,2237.89,2028.22Z" fill="#42804f"/><path d="M2246.65,2018.44c10.11-88.79-16-153.24-13.93-153.2s31.75,63.56,22,150.75A71,71,0,0,0,2246.65,2018.44Z" fill="#42804f"/><path d="M2224.41,2027.54c6.26-56.8-12.7-98.31-11.24-98.29s23,41,16.86,96.78A51.09,51.09,0,0,0,2224.41,2027.54Z" fill="#42804f"/><path d="M2224.08,2021.72c11.85-55.89-2.94-99.1-1.46-98.91s18.78,43.09,7.22,98A51.07,51.07,0,0,0,2224.08,2021.72Z" fill="#5fa16f"/><path d="M2259.35,2021.53c6.27-56.79-12.7-98.31-11.24-98.26s22.94,41,16.88,96.76A52.62,52.62,0,0,0,2259.35,2021.53Z" fill="#86d696"/><path d="M2239.55,2031c3.25-57-17.87-97.5-16.42-97.52s25.08,39.76,22,95.75A53.2,53.2,0,0,0,2239.55,2031Z" fill="#86d696"/><path d="M2270.15,2023.22c-15.08-69.19,7.66-121.26,5.57-121.12s-28.5,51.67-13.82,119.66C2264.57,2022.14,2267.28,2022.56,2270.15,2023.22Z" fill="#42804f"/><path d="M2277.69,2029.23c-13.57-62.25,6.87-109.08,5-109s-25.6,46.49-12.41,107.64C2272.64,2028.25,2275.08,2028.65,2277.69,2029.23Z" fill="#78ba88"/><path d="M2263.11,2033.88c-18.58-60.59-2.17-108.67-4-108.37s-21.56,48.17-3.46,107.67C2258.05,2033.31,2260.49,2033.51,2263.11,2033.88Z" fill="#366940"/><path d="M2272.61,2022.79c-7.58-42.22,7-73.31,5.76-73.28s-18,30.79-10.65,72.23C2269.28,2022,2270.88,2022.34,2272.61,2022.79Z" fill="#86d696"/><path d="M2215,2020.78c-1.68-42.89-25.09-69.73-23.69-70s27.09,25.72,28.85,67.77C2218.48,2019.24,2216.82,2019.93,2215,2020.78Z" fill="#5fa16f"/><path d="M2222.3,2022.68c-7.6-42.23,7-73.34,5.76-73.28s-18,30.78-10.67,72.21C2219,2021.89,2220.56,2022.21,2222.3,2022.68Z" fill="#86d696"/><polygon points="2278.81 2108.33 2211.57 2108.33 2187.42 2014.67 2302.97 2014.67 2278.81 2108.33" fill="#83beca"/><polygon points="2190.1 2025.13 2300.27 2025.13 2302.97 2014.67 2187.42 2014.67 2190.1 2025.13" fill="#658f96"/><rect x="1933.37" y="1990.07" width="153.04" height="111.3" fill="#262626"/><path d="M2093.36,1983.12v125.21H1926.41V1983.12h166.95Zm-13.91,111.3V1997H1940.32v97.39h139.13Z" fill="#658f96"/><path d="M1976.69,2004.25c-1.53,2.19.22,10.52,2.41,18.63s7,12.93,8.11,26.31c1.1,13.15,1.32,14.91-2.41,22.58s-4.82,14.69,8.11,14.91,19.95-.22,33.1,1.75,17.76,2.63,25,1.53,8.77-3.51,5.7-5.7-15.78-4.6-21.27-9c-5.26-3.95-20.17-10.52-20.39-12.28-0.66-5.92-.88-27.4.22-34.42s2.63-17.1,3.07-19.73,2.63-5.26-1.1-4.38-17.76,2.85-28.28,2.19S1977.35,2003.59,1976.69,2004.25Z" fill="#88ce02"/><path d="M1976.7,2012.56c5,1.75,12,2,18.62,1.75s16.29-1,22.65-3.18l-1,6.43-3.43.61s-3.54,1.84-17.13,1.62c-16-.22-18.61-2-18.61-2Z" opacity="0.3" style="isolation:isolate"/><path d="M2015.27,2028.58s-6.36,2.41-19.73,2.19a94,94,0,0,1-13.7-.65l-1.23-2.85-1.16-3.2c5.14,1.73,9.74,1.87,16.31,1.65s14-.08,20.34-2.5" opacity="0.3" style="isolation:isolate"/><path d="M1859.84,1648.11V1285.83c0-43.73,25.74-79.3,57.37-79.3,30.4,0,55.28,32.87,57.19,74.26h20.23c-2.08-52.55-35.94-94.49-77.42-94.49-42.79,0-77.61,44.65-77.61,99.53v362.28h20.24Z" fill="#ef7100"/><path d="M2036.43,1320.84v-14.33h-21.08c-4.13-29.27-17-50.62-32.26-50.62s-28.12,21.34-32.28,50.62h-21v14.33h106.66Z" fill="#ef7100"/><path d="M1935.16,1324.95h0a2,2,0,0,1-2-2v-5.85a2,2,0,0,1,2-2h0a2,2,0,0,1,1.95,2V1323A2,2,0,0,1,1935.16,1324.95Z" fill="#ef7100"/><path d="M1944.75,1324.95h0a2,2,0,0,1-1.95-2v-5.85a2,2,0,0,1,1.95-2h0a2,2,0,0,1,2,2V1323A2,2,0,0,1,1944.75,1324.95Z" fill="#ef7100"/><path d="M1954.34,1324.95h0a2,2,0,0,1-1.95-2v-5.85a2,2,0,0,1,1.95-2h0a2,2,0,0,1,2,2V1323A2,2,0,0,1,1954.34,1324.95Z" fill="#ef7100"/><path d="M1963.92,1324.95h0a2,2,0,0,1-2-2v-5.85a2,2,0,0,1,2-2h0a2,2,0,0,1,2,2V1323A2,2,0,0,1,1963.92,1324.95Z" fill="#ef7100"/><path d="M1973.51,1324.95h0a2,2,0,0,1-2-2v-5.85a2,2,0,0,1,2-2h0a2,2,0,0,1,1.95,2V1323A2,2,0,0,1,1973.51,1324.95Z" fill="#ef7100"/><path d="M1983.1,1324.95h0a2,2,0,0,1-2-2v-5.85a2,2,0,0,1,2-2h0a2,2,0,0,1,1.95,2V1323A2,2,0,0,1,1983.1,1324.95Z" fill="#ef7100"/><path d="M1992.69,1324.95h0a2,2,0,0,1-1.95-2v-5.85a2,2,0,0,1,1.95-2h0a2,2,0,0,1,2,2V1323A2,2,0,0,1,1992.69,1324.95Z" fill="#ef7100"/><path d="M2002.27,1324.95h0a2,2,0,0,1-1.95-2v-5.85a2,2,0,0,1,1.95-2h0a2,2,0,0,1,2,2V1323A2,2,0,0,1,2002.27,1324.95Z" fill="#ef7100"/><path d="M2011.86,1324.95h0a2,2,0,0,1-2-2v-5.85a2,2,0,0,1,2-2h0a2,2,0,0,1,2,2V1323A2,2,0,0,1,2011.86,1324.95Z" fill="#ef7100"/><path d="M2021.45,1324.95h0a2,2,0,0,1-2-2v-5.85a2,2,0,0,1,2-2h0a2,2,0,0,1,1.95,2V1323A2,2,0,0,1,2021.45,1324.95Z" fill="#ef7100"/><path d="M2031,1324.95h0a2,2,0,0,1-2-2v-5.85a2,2,0,0,1,2-2h0a2,2,0,0,1,1.95,2V1323A2,2,0,0,1,2031,1324.95Z" fill="#ef7100"/><path d="M2049.2,1617.84c-96.79,0-184.75-14.66-250.19-38.57,4.11,69.25,25.6,132.3,59,182.15h382.43c33.38-49.85,54.86-112.9,59-182.15C2233.94,1603.17,2146,1617.84,2049.2,1617.84Z" fill="#658f96"/>
  <path d="M2049.2,1640.39c94.62,0,181.11-13,247.67-34.37,1.12-8.81,2-17.72,2.52-26.75-65.45,23.9-153.4,38.57-250.19,38.57s-184.75-14.66-250.19-38.57c0.54,9,1.4,17.94,2.51,26.75C1868.09,1627.43,1954.58,1640.39,2049.2,1640.39Z" fill="#83beca"/><path d="M2210.26,1413.54h-87.92a22.77,22.77,0,1,1,0-45.55h30.19V1357.4h-30.19a33.37,33.37,0,1,0,0,66.73h87.92a33.4,33.4,0,0,0,33.37-33.37H2233A22.8,22.8,0,0,1,2210.26,1413.54Z" fill="#e54630"/><circle cx="2152.53" cy="1363.75" r="10.59" fill="#e54630"/><circle cx="2238.34" cy="1390.76" r="10.59" fill="#e54630"/><rect x="2110.16" y="1401.36" width="108.05" height="123.4" rx="2" ry="2" fill="#658f96"/><rect x="2578.14" y="1482.09" width="58.48" height="164.07" fill="#658f96"/><path d="M2446.58,1600.72c5.8,48.59,42.09,86.06,86.08,86.06s80.3-37.47,86.1-86.06H2446.58Z" fill="#658f96"/><path d="M2636.62,1761.42H2518.43s-9.54-95.9,12-115.3c19.72-17.81,106.19,0,106.19,0s-50.34,35.36-43.41,71.72C2598,1743.14,2636.83,1722.43,2636.62,1761.42Z" fill="#658f96"/><path d="M2576.48,1594.2a6.5,6.5,0,0,1-6.5,6.52H2444.34a6.52,6.52,0,0,1-6.52-6.52h0a6.5,6.5,0,0,1,6.52-6.51H2570a6.48,6.48,0,0,1,6.5,6.51h0Z" fill="#7a5334"/><path d="M2629.52,1333.26a37.37,37.37,0,1,1-37.36-37.36A37.38,37.38,0,0,1,2629.52,1333.26Z" fill="#a3cecb"/><path d="M2604.12,1333.26a12,12,0,1,1-12-12A12,12,0,0,1,2604.12,1333.26Z" fill="#7a5334"/><rect x="2619.69" y="1295.9" width="16.96" height="74.73" fill="#e54630"/></g><g id="gsLogo"><path d="M936.51,1179.77c9.89,0,19.08,3.53,19.08,6.24,0,1.65-2.12,5.77-3.42,5.77-1.06,0-5.89-4.36-15.55-4.36-17.67,0-23.44,10.25-23.44,27.68,0,15.31,4.59,28.27,22.38,28.27a56.59,56.59,0,0,0,12.84-1.3v-20.14H936.75c-1.41,0-2-.94-2-2.95v-1.65c0-2.12.59-2.94,2-2.94H954.3c2.12,0,2.94.94,2.94,2.94v26.5c0,5.65-10.84,7.18-22.26,7.18-19.91,0-30.86-11.19-30.86-35C904.12,1191.08,915.67,1179.77,936.51,1179.77Z" fill="#fff"/><path d="M967.61,1213.34a58.51,58.51,0,0,0-1.18-12.6c0-1.88,4.12-2.36,5.42-2.36,2.36,0,2.95,4,3.53,6.6,3.42-4.83,7.42-7.54,11.54-7.54,3.89,0,5.77,1.65,5.77,3.89,0,1.88-.82,5.42-2,5.42s-2.12-1.06-5.54-1.06c-5.18,0-9.19,6.13-9.19,6.13v36.63c0,1.41-1.18,2.24-4,2.24h-0.35c-2.83,0-4-.82-4-2.24v-35.1h0Z" fill="#fff"/><path d="M1020,1197.44c13.66,0,20.61,9.07,20.61,26,0,1.18-2.12,4.12-3.3,4.12h-31.57c0.82,11.07,5.54,16.14,15.43,16.14,8.72,0,13.55-4.24,14.61-4.24,1.41,0,3.53,3.89,3.53,4.95,0,2.36-7.89,6.36-18,6.36-16.61,0-24.5-8.48-24.5-26.38C996.7,1206.86,1004.71,1197.44,1020,1197.44Zm11.66,23.09c0-10.48-4-15.78-12-15.78-8.72,0-13.31,5.3-14,15.78h26Z" fill="#fff"/><path d="M1071.85,1197.44c13.66,0,20.61,9.07,20.61,26,0,1.18-2.12,4.12-3.3,4.12H1057.6c0.82,11.07,5.54,16.14,15.43,16.14,8.72,0,13.55-4.24,14.61-4.24,1.41,0,3.53,3.89,3.53,4.95,0,2.36-7.89,6.36-18,6.36-16.61,0-24.5-8.48-24.5-26.38C1048.65,1206.86,1056.54,1197.44,1071.85,1197.44Zm11.78,23.09c0-10.48-4-15.78-12-15.78-8.72,0-13.31,5.3-14,15.78h26Z" fill="#fff"/><path d="M1101.53,1213.34a58.51,58.51,0,0,0-1.18-12.6c0-1.88,4.12-2.36,5.42-2.36,2.36,0,2.94,4,3.53,6.6,4.24-4.71,10-7.54,15.55-7.54,10.25,0,16.25,6.13,16.25,16.14v34.63c0,1.41-1.18,2.24-4,2.24h-0.35c-2.83,0-4-.82-4-2.24v-33.92c0-6.13-3.65-9.66-10.25-9.66-4.48,0-9.3,2.71-12.6,6.95v36.63c0,1.41-1.18,2.24-4,2.24h-0.35c-2.83,0-4-.82-4-2.24v-34.86h0Z" fill="#fff"/><path d="M1159,1233.48c1.77,0,6.71,4.59,14.72,4.59,4.24,0,9.42-1.3,9.42-7.3,0-11.78-28.86-7.18-28.86-30.74,0-14.72,12-20.49,23.67-20.49,10.6,0,18,3.65,18,6.95,0,2.71-3.06,8.72-5.54,8.72-1.3,0-4.36-2.47-11.07-2.47-7.77,0-9.3,3.65-9.3,5.89,0,11.43,28.86,6.83,28.86,30.27,0,16.61-11.66,22.14-22.61,22.14-15.19,0-23.44-5.42-23.44-8.83C1152.89,1239.25,1156.89,1233.48,1159,1233.48Z" fill="#88ce02"/><path d="M1229.09,1197.32c15.9,0,24.15,9.54,24.15,26.86s-8.24,27-24.15,27-24.26-9.54-24.26-27S1213.19,1197.32,1229.09,1197.32Zm9.19,26.86c0-10-2.83-15.19-9.19-15.19s-9.31,5.18-9.31,15.19,2.95,15.31,9.31,15.31S1238.28,1234.19,1238.28,1224.18Z" fill="#88ce02"/><path d="M1285.4,1197.32c7.07,0,16.61,2.36,16.61,6.95,0,1.89-3.65,7.66-5.3,7.66a7.51,7.51,0,0,1-1.77-.71,17.4,17.4,0,0,0-8.72-2.24c-8,0-11.31,4.95-11.31,15.19s3.06,15.31,10.72,15.31a20.92,20.92,0,0,0,9.78-2.36,5.94,5.94,0,0,1,1.77-.59c2.24,0,5.18,5.65,5.18,7.54,0,5.65-14.25,6.95-17.43,6.95-17.08,0-25.21-8.72-25.21-26.62C1259.72,1206.74,1267.49,1197.32,1285.4,1197.32Z" fill="#88ce02"/><path d="M1309.54,1178.24c0-2.12,1.77-3.18,6-3.18h2.83c4.24,0,6,1.06,6,3.18v39.58l0.35,0.12,12.13-18.14c1.18-1.65,3.18-1.89,6.13-1.89h3.65c3.77,0,5.65.59,5.65,1.53a4.19,4.19,0,0,1-.94,2l-13.9,19.79,16.25,25.79a5.46,5.46,0,0,1,.82,2.12c0,0.94-1.77,1.53-5.65,1.53h-4.24c-2.94,0-5.06-.35-6-1.88l-13.9-23-0.35.12v21.55c0,2.12-1.77,3.18-6,3.18h-2.83c-4.24,0-6-1.06-6-3.18v-69.26h0Z" fill="#88ce02"/></g><text/></svg>
<div id="buttonWrap">
<button data-view = "300 1782 1020 840">Kitchen</button>
<button data-view = "1740 900 960 840">Bathroom</button>
<button data-view = "1302 1782 1410 630">Living Room</button>
<button data-view = "300 981 1440 180">Bedroom</button>
<button data-view = "0 0 3000 3000">Whole House</button>
<h3>Bonus: Bookshelves</h3>
<button data-view = "1410 2100 180 108">Top Shelf</button>
<button data-view = "1410 2250 180 108">Middle Shelf</button>
</div>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Oswald);
body {
  font-family: "proxima-nova", sans-serif;
  display: flex;
  height: 100vh;
  background: #262626;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#houseSVG {
  width: 600px;
  height: 600px;
  overflow: hidden;
  font-family:'Oswald';
}

#buttonWrap {
  width: 600px;
  text-align: center;
  background: #262626;
  padding: 10px 0;
  color: white;
}

button {
  padding: 6px;
  cursor: pointer;
  font-family: "proxima-nova", sans-serif;
}

h3 {
  line-height: 1.5;
  margin: 5px 0;
}

              
            
!

JS

              
                console.clear();
let targets = gsap.utils.toArray("button"); 

targets.forEach((obj, i) => {
  obj.addEventListener("click", doCoolStuff);
});

function doCoolStuff() {
  let moveTo = this.getAttribute("data-view");
  gsap.to("#houseSVG", 1, {attr:{viewBox:moveTo}, ease:"power3.inOut"})
}
              
            
!
999px

Console