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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <div class="hero-section--how_works-scheme">
  <button class="button button-switch active">
      <span class="switch-label switch-label--on">with basement</span>
      <span class="switch-label switch-label--off"">without basement</span>
      <span class="switch-handle">
          <svg class="switch-handle__icon" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle opacity="0.6" cx="22.6875" cy="22.8125" r="22.6875" fill="#ffffff"/>
              <path d="M14.5 18.7916H30.7273V28.125H14.5V18.7916Z" fill="#2CC7C4"/>
              <rect x="19.167" y="18.7916" width="7" height="7" fill="#AFEBEA"/>
              <rect x="14.5" y="30.325" width="16.3333" height="4.66667" fill="#2CC7C4"/>
              <path d="M22.6667 7.125L34.3333 18.7917H11L22.6667 7.125Z" fill="#2CC7C4"/>
          </svg>
      </span>
  </button>
  <div class="hero-section--how_works-scheme__image-wrap">
      <svg class="hiw-hero-image" version="1.1" id="house-with-basement" opacity="0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 1163.5 736" style="enable-background:new 0 0 1163.5 736;" xml:space="preserve">
        <style type="text/css">
          .house-st0 {
            fill: #FFFFFF;
          }

          .house-st1 {
            opacity: 0.7;
          }

          .house-st2 {
            fill-opacity: 0;
          }

          .house-st3 {
            fill: none;
            stroke: #2CC7C4;
          }

          .house-st4 {
            fill: #2CC7C4;
          }

          .house-st5 {
            fill: url(#SVGID_1_);
          }

          .house-st6 {
            fill: #0B6C6A;
          }

          .house-st7 {
            fill: url(#SVGID_2_);
          }

          .house-st8 {
            fill: url(#SVGID_3_);
          }

          .house-st9 {
            fill: url(#SVGID_4_);
          }

          .house-st10 {
            fill: none;
            stroke: #FFFFFF;
            stroke-width: 2;
          }
        </style>
        <g id="house_x5F_basemant" class="house-st1">
          <rect x="172.7" y="26" class="house-st2" width="868" height="650" />
          <rect x="448.7" y="26" class="house-st2" width="570" height="518" />
          <rect x="506.2" y="161.5" class="house-st3" width="492" height="382" />
          <path class="house-st3" d="M1018.2,161.5h-569v-11.1L814.6,26.5l203.6,123.7V161.5z" />
          <rect x="702.7" y="370" class="house-st2" width="36" height="42" />
          <path class="house-st3" d="M706.2,375.5v36h-3v-36H706.2z" />
          <path class="house-st3" d="M738.2,375.5v36h-3v-36H738.2z" />
          <path class="house-st3" d="M738.2,375.5v-5h-35v5H738.2z" />
          <rect x="313.7" y="286" class="house-st2" width="193" height="258" />
          <path class="house-st3" d="M314.2,366.3l171.6-79.8h20.4v90h-192V366.3z" />
          <rect x="369.2" y="376.5" class="house-st3" width="6" height="167" />
          <path class="house-st3" d="M801.2,418.5v125h-7v-125H801.2z" />
          <path class="house-st3" d="M506.2,376.5v167h-85v-167H506.2z" />
          <rect x="525.2" y="418.5" class="house-st3" width="458" height="125" />
          <rect x="525.2" y="286.5" class="house-st3" width="458" height="125" />
          <path class="house-st3" d="M525.2,161.5h458v125h-458V161.5z" />
          <path class="house-st3" d="M525.2,279.5h458v7h-458V279.5z" />
          <path class="house-st3" d="M721.2,161.5v118h-7v-118H721.2z" />
          <path class="house-st3" d="M354.2,543.5h644v7h-644V543.5z" />
          <rect x="507.7" y="188" class="house-st2" width="476" height="356" />
          <path class="house-st3" d="M525.2,279.5h458v264h-458V279.5z" />
          <rect x="507.7" y="188" class="house-st2" width="476" height="356" />
          <rect x="889.2" y="504.5" class="house-st3" width="94" height="39" />
          <rect x="963.7" y="457" class="house-st2" width="20" height="19" />
          <path class="house-st3" d="M964.7,475.5l13.8-18h4.6v18H964.7z" />
          <rect x="852.2" y="500.5" class="house-st3" width="131" height="4" />
          <rect x="852.2" y="504.5" class="house-st3" width="4" height="39" />
          <rect x="791.7" y="286" class="house-st2" width="192" height="126" />
          <rect x="914.7" y="286" class="house-st2" width="69" height="54" />
          <path class="house-st3" d="M983.2,286.5h-68v8.9h68V286.5z" />
          <path class="house-st3" d="M983.2,295.3h-68v8.9h68V295.3z" />
          <path class="house-st3" d="M983.2,304.1h-68v8.9h68V304.1z" />
          <path class="house-st3" d="M983.2,312.9h-68v8.9h68V312.9z" />
          <path class="house-st3" d="M983.2,321.8h-68v8.9h68V321.8z" />
          <path class="house-st3" d="M983.2,330.6h-68v8.9h68V330.6z" />
          <path class="house-st4" d="M982.7,339v-1h1v1H982.7z M790.9,402h-1v-1h1V402z M805.9,402h1v1h-1V402z M805.9,393h-1v-1h1V393z M820.9,393
          h1v1h-1V393z M820.9,384h-1v-1h1V384z M835.9,384h1v1h-1V384z M835.9,375h-1v-1h1V375z M850.9,375h1v1h-1V375z M850.9,366h-1v-1h1
          V366z M865.9,366h1v1h-1V366z M865.9,357h-1v-1h1V357z M880.9,357h1v1h-1V357z M880.9,348h-1v-1h1V348z M895.9,348h1v1h-1V348z
           M895.9,339h-1v-1h1V339z M982.7,340h-15v-2h15V340z M981.7,412v-73h2v73H981.7z M913.7,410h69v2h-69V410z M862.7,410h51v2h-51V410
          z M862.7,412h-71.8v-2h71.8V412z M789.9,411.9V402h2v9.9H789.9z M790.9,401h15v2h-15V401z M804.9,402v-9h2v9H804.9z M805.9,392h15
          v2h-15V392z M819.9,393v-9h2v9H819.9z M820.9,383h15v2h-15V383z M834.9,384v-9h2v9H834.9z M835.9,374h15v2h-15V374z M849.9,375v-9
          h2v9H849.9z M850.9,365h15v2h-15V365z M864.9,366v-9h2v9H864.9z M865.9,356h15v2h-15V356z M879.9,357v-9h2v9H879.9z M880.9,347h15
          v2h-15V347z M894.9,348v-9h2v9H894.9z M895.9,338h17.8v2h-17.8V338z M913.7,338h54v2h-54V338z" />
          <path class="house-st4" d="M525.7,471v-1h-1v1H525.7z M525.7,544h-1v1h1V544z M717.7,544v1h3.6l-3.1-1.9L717.7,544z M717.5,543.9h-1v0.6
          l0.5,0.3L717.5,543.9z M717.5,534h1v-1h-1V534z M702.5,534h-1v1h1V534z M702.5,525h1v-1h-1V525z M687.5,525h-1v1h1V525z M687.5,516
          h1v-1h-1V516z M672.5,516h-1v1h1V516z M672.5,507h1v-1h-1V507z M657.5,507h-1v1h1V507z M657.5,498h1v-1h-1V498z M642.5,498h-1v1h1
          V498z M642.5,489h1v-1h-1V489z M627.5,489h-1v1h1V489z M627.5,480h1v-1h-1V480z M612.5,480h-1v1h1V480z M612.5,471h1v-1h-1V471z
           M525.7,472h15v-2h-15V472z M526.7,544v-73h-2v73H526.7z M594.7,543h-69v2h69V543z M645.7,543h-51v2h51V543z M645.7,545h71.8v-2
          h-71.8V545z M717.7,543h-0.2v2h0.2V543z M717,544.8l0.2,0.1l1-1.7l-0.2-0.1L717,544.8z M718.5,543.9V534h-2v9.9H718.5z M717.5,533
          h-15v2h15V533z M703.5,534v-9h-2v9H703.5z M702.5,524h-15v2h15V524z M688.5,525v-9h-2v9H688.5z M687.5,515h-15v2h15V515z
           M673.5,516v-9h-2v9H673.5z M672.5,506h-15v2h15V506z M658.5,507v-9h-2v9H658.5z M657.5,497h-15v2h15V497z M643.5,498v-9h-2v9
          H643.5z M642.5,488h-15v2h15V488z M628.5,489v-9h-2v9H628.5z M627.5,479h-15v2h15V479z M613.5,480v-9h-2v9H613.5z M612.5,470h-17.8
          v2h17.8V470z M594.7,470h-54v2h54V470z" />
          <rect x="524.7" y="418" class="house-st2" width="69" height="54" />
          <path class="house-st3" d="M525.2,418.5h68v8.9h-68V418.5z" />
          <path class="house-st3" d="M525.2,427.3h68v8.9h-68V427.3z" />
          <path class="house-st3" d="M525.2,436.1h68v8.9h-68V436.1z" />
          <path class="house-st3" d="M525.2,444.9h68v8.9h-68V444.9z" />
          <path class="house-st3" d="M525.2,453.8h68v8.9h-68V453.8z" />
          <path class="house-st3" d="M525.2,462.6h68v8.9h-68V462.6z" />
          <path class="house-st3" d="M711.2,247.5h-73v32h73V247.5z" />
          <rect x="592.9" y="193.5" class="house-st3" width="29" height="40" />
          <rect x="600.9" y="250.5" class="house-st3" width="13" height="29" />
          <path class="house-st3" d="M613.6,250.5h-12.3c-7.1,0-12.8-5.7-12.8-12.8c0-0.1,0.1-0.2,0.2-0.2h37.7c0.1,0,0.2,0.1,0.2,0.2
          C626.4,244.8,620.7,250.5,613.6,250.5z" />
          <rect x="931.7" y="238" class="house-st2" width="32" height="41.5" />
          <rect x="931.7" y="238" class="house-st3" width="32" height="5" />
          <path class="house-st3" d="M963.7,279.5V243h-3v36.5H963.7z" />
          <path class="house-st3" d="M934.7,279.5V243h-3v36.5H934.7z" />
          <rect x="739.7" y="238" class="house-st2" width="111" height="41" />
          <rect x="739.7" y="248" class="house-st3" width="3" height="31" />
          <path class="house-st3" d="M847.7,276v-36c0-1.1-0.9-2-2-2h-101c-1.1,0-2,0.9-2,2v36H847.7z" />
          <path class="house-st3" d="M847.7,276v-26c0-1.1-0.9-2-2-2h-101c-1.1,0-2,0.9-2,2v26H847.7z" />
          <path class="house-st3" d="M841.7,248L841.7,248c0-2.8-2.2-5-5-5h-30c-2.8,0-5,2.2-5,5l0,0H841.7z" />
          <path class="house-st3" d="M789.7,248L789.7,248c0-2.8-2.2-5-5-5h-30c-2.8,0-5,2.2-5,5l0,0H789.7z" />
          <rect x="847.7" y="248" class="house-st3" width="3" height="31" />
          <path class="house-st4" d="M1,545.1h1163.5v-2.2H1V545.1z" />
          <g id="basement">
            <path class="house-st3 basement" d="M507.2,550.5h491v125h-491V550.5z" />
            <path class="house-st3 basement" d="M525.2,550.5h458v125h-458V550.5z" />
            <rect x="525.2" y="653.5" class="house-st3 basement" width="458" height="9" />
            <path class="house-st3 basement" d="M439.2,550.5h68v8.9h-68V550.5z" />
            <path class="house-st3 basement" d="M439.2,559.3h68v8.9h-68V559.3z" />
            <path class="house-st3 basement" d="M439.2,568.1h68v8.9h-68V568.1z" />
            <path class="house-st3 basement" d="M439.2,576.9h68v8.9h-68V576.9z" />
            <path class="house-st3 basement" d="M439.2,585.8h68v8.9h-68V585.8z" />
            <path class="house-st3 basement" d="M439.2,594.6h68v8.9h-68V594.6z" />
            <path class="house-st4 basement" d="M439.7,603v-1h-1v1H439.7z M439.7,676h-1v1h1V676z M631.7,676v1h3.6l-3.1-1.9L631.7,676z M631.5,675.9h-1v0.6
            l0.5,0.3L631.5,675.9z M631.5,666h1v-1h-1V666z M616.5,666h-1v1h1V666z M616.5,657h1v-1h-1V657z M601.5,657h-1v1h1V657z M601.5,648
            h1v-1h-1V648z M586.5,648h-1v1h1V648z M586.5,639h1v-1h-1V639z M571.5,639h-1v1h1V639z M571.5,630h1v-1h-1V630z M556.5,630h-1v1h1
            V630z M556.5,621h1v-1h-1V621z M541.5,621h-1v1h1V621z M541.5,612h1v-1h-1V612z M526.5,612h-1v1h1V612z M526.5,603h1v-1h-1V603z
            M439.7,604h15v-2h-15V604z M440.7,676v-73h-2v73H440.7z M508.7,675h-69v2h69V675z M559.7,675h-51v2h51V675z M559.7,677h71.8v-2
            h-71.8V677z M631.7,675h-0.2v2h0.2V675z M631,676.8l0.2,0.1l1-1.7l-0.2-0.1L631,676.8z M632.5,675.9V666h-2v9.9H632.5z M631.5,665
            h-15v2h15V665z M617.5,666v-9h-2v9H617.5z M616.5,656h-15v2h15V656z M602.5,657v-9h-2v9H602.5z M601.5,647h-15v2h15V647z
            M587.5,648v-9h-2v9H587.5z M586.5,638h-15v2h15V638z M572.5,639v-9h-2v9H572.5z M571.5,629h-15v2h15V629z M557.5,630v-9h-2v9
            H557.5z M556.5,620h-15v2h15V620z M542.5,621v-9h-2v9H542.5z M541.5,611h-15v2h15V611z M527.5,612v-9h-2v9H527.5z M526.5,602h-17.8
            v2h17.8V602z M508.7,602h-54v2h54V602z" />
            <path class="house-st3 basement" d="M152.6,654.1h6.6V543l1.8,1.1v110h278.8v8.6H152.6c-2.4,0-4.3-1.9-4.3-4.3v0
            C148.3,656,150.2,654.1,152.6,654.1z" />
          </g>
          <g id="foundation" class="foundation">
            <g transform="translate(147, 544)">
              <path class="house-st3" d="M5.35638 58.8629H12.0429V1L13.8665 1.14118V58.8629H842.287V6.36297H851V71H5.35638C2.92491 71 1 68.3186 1 64.9315C1 61.5444 3.02622 58.8629 5.35638 58.8629Z"
               stroke="#2CC7C4" />
              <path class="house-st3" d="M86 0V59H135V0" />
            </g>
          </g>
        </g>
        <g id="moika">
          <g>
            <circle class="house-st4" cx="913.5" cy="501.5" r="40" />
            <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="856.1863" y1="529.9421" x2="924.5983" y2="562.1551"
             gradientTransform="matrix(1 0 0 1 0 -55.4501)">
              <stop offset="1.507370e-02" style="stop-color:#68EAE7" />
              <stop offset="0.8063" style="stop-color:#2FC9C6;stop-opacity:0" />
            </linearGradient>
            <circle class="house-st5" cx="913.5" cy="501.5" r="40" />
          </g>
          <g>
            <rect x="912.1" y="495.3" class="house-st6" width="4.5" height="3.1" />
            <rect x="914.1" y="494.2" class="house-st6" width="2.5" height="1.6" />
            <path class="house-st6" d="M919.5,491.7l0.1,0.4l-3,2.1h-2.5L919.5,491.7z" />
            <path class="house-st6" d="M907.5,489c0-0.9,0.7-1.6,1.6-1.6l0,0v1.6H907.5L907.5,489z" />
            <path class="house-st6" d="M907.5,489.6h1.6v-0.5h-1.6V489.6z" />
            <path class="house-st6" d="M908.6,488.5c-0.3-0.4-0.1-1,0.5-1l0,0c0.5,0,0.9,0.2,1.3,0.5c2.7,2.9,3.4,5,3.9,9h-2.1
            C911.9,493.4,911,491.4,908.6,488.5z" />
            <path class="house-st6" d="M907.4,516.5h15.3c6,0,10.9-4.9,10.9-10.9h-37C896.5,511.6,901.4,516.5,907.4,516.5z" />
            <path class="house-st6" d="M933.5,499.5h-37v5.1h37V499.5z" />
          </g>
        </g>
        <g id="toilet">
          <g>
            <circle class="house-st4" cx="543" cy="261" r="64.5" />
            <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="450.5447" y1="272.8965" x2="560.8597" y2="324.8386"
             gradientTransform="matrix(1 0 0 1 0 -55.4501)">
              <stop offset="1.507370e-02" style="stop-color:#68EAE7" />
              <stop offset="0.8063" style="stop-color:#2FC9C6;stop-opacity:0" />
            </linearGradient>
            <circle class="house-st8" cx="543" cy="261" r="64.5" />
          </g>
          <g>
            <path class="house-st6" d="M538.5,240.5h-11v-1.7c0-0.7,0.6-1.3,1.3-1.3h8.3c0.7,0,1.3,0.6,1.3,1.3v1.7H538.5z" />
            <path class="house-st6" d="M540.5,256.5h23v-1.6c0-0.8-0.6-1.4-1.4-1.4h-20.2c-0.8,0-1.4,0.6-1.4,1.4V256.5z" />
            <path class="house-st6" d="M538.5,258.4v-16h-11v17c0,4.9,3.5,8.9,8.1,9.8v9.2h9.5h8.2c7.5-6.5,9.7-10.7,10.2-20H538.5z" />
          </g>
        </g>
        <g id="irrigation">
          <g>
            <circle class="house-st4" cx="161" cy="529" r="25.5" />
            <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="124.484" y1="567.2349" x2="168.0966" y2="587.7709"
             gradientTransform="matrix(1 0 0 1 0 -55.4501)">
              <stop offset="1.507370e-02" style="stop-color:#68EAE7" />
              <stop offset="0.8063" style="stop-color:#2FC9C6;stop-opacity:0" />
            </linearGradient>
            <circle class="house-st9" cx="161" cy="529" r="25.5" />
          </g>
          <g>
            <path class="house-st6" d="M154.5,525.3h12.8l-0.9,3.9h-11L154.5,525.3z" />
            <path class="house-st6" d="M158.3,527.3h5v11.3h-5V527.3z" />
            <path class="house-st6" d="M159.2,540.7h2.8v2.8h-2.8V540.7z" />
            <g>
              <ellipse class="house-st6" cx="156.2" cy="523.1" rx="0.7" ry="0.7" />
              <ellipse class="house-st6" cx="155.2" cy="520.2" rx="0.7" ry="0.7" />
              <ellipse class="house-st6" cx="154.2" cy="517.2" rx="0.7" ry="0.7" />
              <ellipse class="house-st6" cx="153.2" cy="514.2" rx="0.7" ry="0.7" />
            </g>
            <g>
              <ellipse class="house-st6" cx="166" cy="523.1" rx="0.7" ry="0.7" />
              <ellipse class="house-st6" cx="167" cy="520.2" rx="0.7" ry="0.7" />
              <ellipse class="house-st6" cx="168" cy="517.2" rx="0.7" ry="0.7" />
              <ellipse class="house-st6" cx="169" cy="514.2" rx="0.7" ry="0.7" />
            </g>
            <g>
              <ellipse class="house-st6" cx="161.1" cy="523.1" rx="0.7" ry="0.7" />
              <ellipse class="house-st6" cx="161.1" cy="520.2" rx="0.7" ry="0.7" />
              <ellipse class="house-st6" cx="161.1" cy="517.2" rx="0.7" ry="0.7" />
              <ellipse class="house-st6" cx="161.1" cy="514.2" rx="0.7" ry="0.7" />
              <ellipse class="house-st6" cx="161.1" cy="511.2" rx="0.7" ry="0.7" />
            </g>
          </g>
        </g>
        <g id="sensor-basement">
          <circle class="house-st0" cx="618.5" cy="658" r="33" />
          <circle class="pulse-circle" cx="618.5" cy="658" r="31" />
          <circle class="pulse-circle" cx="618.5" cy="658" r="31" />
          <circle class="pulse-circle" cx="618.5" cy="658" r="31" />
          <g>
            <rect x="599.5" y="652.7" class="house-st6" width="3.5" height="10" />
            <rect x="628.9" y="652.7" class="house-st6" width="8.6" height="10" />
            <path class="house-st6" d="M604,646c-0.6,0-1,0.4-1,1v23c0,0.6,0.4,1,1,1h29.1c0.6,0,1-0.4,1-1v-23c0-0.6-0.4-1-1-1H604z" />
            <ellipse class="house-st0" cx="609" cy="653.5" rx="2.6" ry="2.5" />
          </g>
        </g>
        <g id="bridge">
          <circle class="house-st0" cx="719.5" cy="350.5" r="48" />
          <circle class="pulse-circle" cx="719.5" cy="350.5" r="45" />
          <circle class="pulse-circle" cx="719.5" cy="350.5" r="45" />
          <circle class="pulse-circle" cx="719.5" cy="350.5" r="45" />
          <path class="house-st6" d="M708.5,329.5c0-1.1,0.9-2,2-2h17c1.1,0,2,0.9,2,2v29h-21V329.5z M708.5,373.5v-13.3h21v13.3H708.5z M719,353.7
          c1.3,0,2.4-1.1,2.4-2.5s-1.1-2.5-2.4-2.5c-1.3,0-2.4,1.1-2.4,2.5C716.6,352.6,717.7,353.7,719,353.7z" />
        </g>
        <g id="router">
          <circle class="house-st0" cx="945.5" cy="231.5" r="24" />
          <circle class="pulse-circle" cx="945.5" cy="231.5" r="22" />
          <circle class="pulse-circle" cx="945.5" cy="231.5" r="22" />
          <circle class="pulse-circle" cx="945.5" cy="231.5" r="22" />
          <g>
            <path class="house-st6" d="M931.5,233.5c0-1.7,1.3-3,3-3h21c1.7,0,3,1.3,3,3s-1.3,3-3,3h-21C932.9,236.5,931.5,235.1,931.5,233.5z
             M938.5,234.2c0.4,0,0.8-0.3,0.8-0.8s-0.3-0.8-0.8-0.8c-0.4,0-0.8,0.3-0.8,0.8c0,0.2,0.1,0.5,0.3,0.6S938.3,234.2,938.5,234.2z" />
            <path class="house-st6" d="M950.8,219.2c0-0.4,0.3-0.8,0.8-0.8l0,0c0.4,0,0.8,0.3,0.8,0.8v10.5h-1.5L950.8,219.2L950.8,219.2z" />
            <ellipse class="house-st0" cx="934.6" cy="233.5" rx="1.5" ry="1.5" />
          </g>
        </g>
        <g id="line-wrap">
          <path id="right-line" class="house-st10" d="M736.9,351h111c55.2,0,100-44.8,100-100v-2" />
          <path id="foundation-line" class="house-st10" d="M671.5,352.2H366.6c-59.5,0-107.7,48.3-107.7,107.7v120.6" />
          <path id="basement-line" class="house-st10" d="M696.5,350.5L696.5,350.5c-43.1,0-78,34.9-78,78v207" />
        </g>
        <g id="washing-machine-basement">
          <g>
            <circle class="house-st4" cx="801.2" cy="649" r="62" />
            <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="712.3156" y1="662.5764" x2="818.3535" y2="712.5063"
             gradientTransform="matrix(1 0 0 1 0 -55.4501)">
              <stop offset="1.507370e-02" style="stop-color:#68EAE7" />
              <stop offset="0.8063" style="stop-color:#2FC9C6;stop-opacity:0" />
            </linearGradient>
            <circle class="house-st7" cx="801.2" cy="649" r="62" />
          </g>
          <g>
            <path class="house-st6" d="M776.2,627.3V678h50v-50.7H776.2z M801.4,667.4c-8.1,0-14.6-6.5-14.6-14.6s6.5-14.6,14.6-14.6
            s14.6,6.5,14.6,14.6C816,660.8,809.4,667.4,801.4,667.4z" />
            <ellipse class="house-st6" cx="801.4" cy="652.8" rx="10.8" ry="10.9" />
            <path class="house-st6" d="M776.2,616v9.8h50V616H776.2z M782.3,623c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S783.4,623,782.3,623z" />
          </g>
        </g>
        <path id="machine-path" stroke="none" fill="none" d="M803,652 C785.244299,643.098389 770.910966,626.431722 761,612 C754.089034,597.5682776 728.755701,566.901611 725,515.684341"></path>
        <path id="sensor-path" stroke="none" fill="none" d="M618.5,658 C531.818591,680.107446 320.4852574,720.107446 275,625 C255.3333333,600.333333 269.1,615.666667 258.6843418,602"></path>
      </svg>

      <svg class="hiw-hero-image hiw-hero-image--mobile" opacity="0" version="1.1" id="house-with-basement-768" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 857 316" style="enable-background:new 0 0 857 316;"
xml:space="preserve" class="svg-house__768">
        <style type="text/css">
          .st0 {
            opacity: 0.7;
          }

          .st1 {
            fill-opacity: 0;
          }

          .st2 {
            fill: none;
            stroke: #2CC7C4;
          }

          .st3 {
            fill: #2CC7C4;
          }

          .st4 {
            fill: url(#SVGID_1_);
          }

          .st5 {
            fill: #0B6C6A;
          }

          .st6 {
            fill: url(#SVGID_2_);
          }

          .st7 {
            fill: url(#SVGID_3_);
          }

          .st8 {
            fill: none;
            stroke: #FFFFFF;
            stroke-width: 2;
          }

          .st9 {
            fill: #FFFFFF;
          }

          .st10 {
            fill: url(#SVGID_4_);
          }

          .st11 {
            fill: #2BC7C4;
          }
        </style>
        <g id="house" class="st0">
          <rect x="90" y="1" class="st1" width="857" height="297.5" />
          <rect x="377" y="17" class="st2" width="348" height="209" />
          <path class="st2" d="M725,17.5H377v-5h348V17.5z" />
          <path class="st2" d="M756,12.5l0.2-1l-30-11h-0.1H726H375h-0.1h-0.1l-30,11l0.2,1H756z" />
          <rect x="543.5" y="131.1" class="st1" width="19.6" height="23" />
          <path class="st2" d="M545.2,134.4v19.2H544v-19.2H545.2z" />
          <path class="st2" d="M562.7,134.4v19.2h-1.2v-19.2H562.7z" />
          <path class="st2" d="M562.7,133.9v-2.3H544v2.3H562.7z" />
          <path class="st2" d="M252.7,129.3l93.5-43.6H377v48.8H252.7V129.3z" />
          <rect x="302.7" y="134.9" class="st2" width="2.8" height="90.9" />
          <path class="st2" d="M597,157.9v67.9h-3.4v-67.9H597z" />
          <path class="st2" d="M377,134.9v90.9h-45.9v-90.9H377z" />
          <path class="st2" d="M530.5,93.5v60h-33v-60H530.5z" />
          <path class="st2" d="M440.5,93.5v60h-33v-60H440.5z" />
          <rect x="386.5" y="157.5" class="st2" width="330" height="68" />
          <rect x="386.5" y="85.5" class="st2" width="330" height="68" />
          <path class="st2" d="M386.5,17.5h330.6v67.8H386.5V17.5z" />
          <path class="st2" d="M573.5,17.5v63h-3v-63H573.5z" />
          <path class="st2" d="M249,226h476v4H249V226z" />
          <rect x="386" y="31.6" class="st1" width="331" height="194.7" />
          <path class="st2" d="M386,81h331v145H386V81z" />
          <rect x="457.1" y="31.6" class="st1" width="259.9" height="194.7" />
          <rect x="665.5" y="204.5" class="st2" width="51" height="21" />
          <rect x="706" y="178.7" class="st1" width="10.9" height="10.4" />
          <path class="st2" d="M707,188.6l7.2-9.4h2.2v9.4H707z" />
          <rect x="645.3" y="202.7" class="st2" width="71" height="1.7" />
          <rect x="645.3" y="204.9" class="st2" width="1.7" height="20.9" />
          <rect x="612.1" y="85.2" class="st1" width="104.8" height="68.9" />
          <rect x="679.2" y="85.2" class="st1" width="37.7" height="29.5" />
          <path class="st2" d="M716.4,85.7h-36.7v4.4h36.7V85.7z" />
          <path class="st2" d="M716.4,90.5h-36.7v4.4h36.7V90.5z" />
          <path class="st2" d="M716.4,95.3h-36.7v4.4h36.7V95.3z" />
          <path class="st2" d="M716.4,100.2h-36.7v4.4h36.7V100.2z" />
          <path class="st2" d="M716.4,105h-36.7v4.4h36.7V105z" />
          <path class="st2" d="M716.4,109.8h-36.7v4.4h36.7V109.8z" />
          <rect x="386.3" y="157.4" class="st1" width="37.7" height="29.5" />
          <path class="st2" d="M385.8,157.9h36.7v4.4h-36.7V157.9z" />
          <path class="st2" d="M385.8,162.7h36.7v4.4h-36.7V162.7z" />
          <path class="st2" d="M385.8,167.5h36.7v4.4h-36.7V167.5z" />
          <path class="st2" d="M385.8,172.4h36.7v4.4h-36.7V172.4z" />
          <path class="st2" d="M385.8,177.2h36.7v4.4h-36.7V177.2z" />
          <path class="st2" d="M385.8,182h36.7v4.4h-36.7V182z" />
          <path class="st3" d="M-0.2,229.4c334.7,0,522.3,0,857,0v1h-857L-0.2,229.4L-0.2,229.4z" />
          <path class="st2" d="M551.5,63.5h-56V73c0,4.1,3.4,7.5,7.5,7.5h41c4.1,0,7.5-3.4,7.5-7.5V63.5z" />
          <rect x="462.8" y="33.8" class="st2" width="15.4" height="21.4" />
          <g>
            <path class="st3" d="M472.6,65v15.4h-4.3V65H472.6 M473.6,64h-1h-4.3h-1v1v15.4v1h1h4.3h1v-1V65V64L473.6,64z" />
          </g>
          <path class="st2" d="M473.8,64.6h-6.7c-3.7,0-6.7-3-6.8-6.7h20.3C480.5,61.6,477.5,64.6,473.8,64.6z" />
          <rect x="668.5" y="57.9" class="st1" width="17.5" height="22.7" />
          <g>
            <path class="st2" d="M686,80.6v-20h-1.6v20H686z" />
            <path class="st2" d="M670.1,80.6v-20h-1.6v20H670.1z" />
            <rect x="668.5" y="57.4" class="st2" width="17.5" height="3.3" />
          </g>
          <rect x="583.7" y="57.9" class="st1" width="60.6" height="22.4" />
          <path class="st2" d="M642.6,78.7V59.9c0-1.1-0.9-2-2-2h-53.3c-1.1,0-2,0.9-2,2v18.8H642.6z" />
          <path class="st2" d="M642.6,78.7V65.4c0-1.1-0.9-2-2-2h-53.3c-1.1,0-2,0.9-2,2v13.3C585.3,78.7,642.6,78.7,642.6,78.7z" />
          <path class="st2" d="M639.4,63.4L639.4,63.4c0-1.5-1.2-2.7-2.7-2.7h-16.4c-1.5,0-2.7,1.2-2.7,2.7l0,0H639.4z" />
          <path class="st2" d="M611,63.4L611,63.4c0-1.5-1.2-2.7-2.7-2.7h-16.4c-1.5,0-2.7,1.2-2.7,2.7l0,0H611z" />
          <g>
            <rect x="583.3" y="63.4" class="st2" width="1.9" height="17" />
            <rect x="643" y="63.6" class="st2" width="1.9" height="17" />
          </g>
          <polygon class="st3" points="489.3,226 490,226 490,220 481.9,220 481.9,215.1 473.7,215.1 473.7,211.2 473.7,211.2 473.7,211.2
          473.7,211.2 465.6,211.2 465.6,206.3 465.6,206.3 465.6,206.3 465.6,206.3 457.4,206.3 457.4,201.3 457.4,201.3 457.4,201.3
          457.4,201.3 449.2,201.3 449.2,196.4 449.2,196.4 441,196.4 441,191.5 432.8,191.5 432.8,186.6 432.8,186.6 432.8,186.1 386,186.1
          386,187.1 431.8,187.1 431.8,191.5 431.8,192.5 432.8,192.5 440,192.5 440,196.4 440,197.4 441,197.4 448.2,197.4 448.2,201.3
          448.2,202.3 449.2,202.3 456.4,202.3 456.4,206.3 456.4,207.3 457.4,207.3 464.6,207.3 464.6,211.2 464.6,212.2 465.6,212.2
          472.7,212.2 472.7,215.1 472.7,216.1 473.7,216.1 480.9,216.1 480.9,220 480.9,221 481.9,221 489,221 489,225.5 423.1,225.5
          386.4,225.5 386.4,187.6 385.4,187.6 385.4,226.5 423.1,226.5 490.2,226.5 	" />
          <path class="st2" d="M708.7,114.2h8.2v39.4h-37.7h-27.8h-39.2h-0.1l0.1-0.1v-5.3h8.2v-4.8h8.2v-4.8h8.2v-4.8h8.2v-4.8h8.2v-4.9h8.2
          V119h8.2v-4.8h9.7H708.7z" />
          <g>
            <path class="st3" d="M219,219.4h7l-0.5,2.1h-6L219,219.4z" />
            <path class="st3" d="M221.1,220.5h2.7v6.2h-2.7V220.5z" />
            <g>
              <g>
                <ellipse class="st3" cx="225.8" cy="218.1" rx="0.4" ry="0.4" />
                <ellipse class="st3" cx="226.4" cy="216.6" rx="0.4" ry="0.4" />
                <ellipse class="st3" cx="226.9" cy="214.9" rx="0.4" ry="0.4" />
                <ellipse class="st3" cx="227.5" cy="213.3" rx="0.4" ry="0.4" />
              </g>
              <g>
                <ellipse class="st3" cx="222.4" cy="218.1" rx="0.4" ry="0.4" />
                <ellipse class="st3" cx="222.4" cy="216.6" rx="0.4" ry="0.4" />
                <ellipse class="st3" cx="222.4" cy="214.9" rx="0.4" ry="0.4" />
                <ellipse class="st3" cx="222.4" cy="213.3" rx="0.4" ry="0.4" />
                <ellipse class="st3" cx="222.4" cy="211.6" rx="0.4" ry="0.4" />
              </g>
              <g>
                <ellipse class="st3" cx="219" cy="218.1" rx="0.4" ry="0.4" />
                <ellipse class="st3" cx="218.5" cy="216.6" rx="0.4" ry="0.4" />
                <ellipse class="st3" cx="217.9" cy="214.9" rx="0.4" ry="0.4" />
                <ellipse class="st3" cx="217.4" cy="213.3" rx="0.4" ry="0.4" />
              </g>
            </g>
            <path class="st3" d="M221.6,227.8h1.5v1.5h-1.5V227.8z" />
          </g>
          <g>
            <path class="st3" d="M109,219.4h7l-0.5,2.1h-6L109,219.4z" />
            <path class="st3" d="M111.1,220.5h2.7v6.2h-2.7V220.5z" />
            <path class="st3" d="M111.6,227.8h1.5v1.5h-1.5V227.8z" />
            <g>
              <g>
                <ellipse class="st3" cx="115.8" cy="218.1" rx="0.4" ry="0.4" />
                <ellipse class="st3" cx="116.4" cy="216.6" rx="0.4" ry="0.4" />
                <ellipse class="st3" cx="116.9" cy="214.9" rx="0.4" ry="0.4" />
                <ellipse class="st3" cx="117.5" cy="213.3" rx="0.4" ry="0.4" />
              </g>
              <g>
                <ellipse class="st3" cx="112.5" cy="218.1" rx="0.4" ry="0.4" />
                <ellipse class="st3" cx="112.5" cy="216.6" rx="0.4" ry="0.4" />
                <ellipse class="st3" cx="112.5" cy="214.9" rx="0.4" ry="0.4" />
                <ellipse class="st3" cx="112.5" cy="213.3" rx="0.4" ry="0.4" />
                <ellipse class="st3" cx="112.5" cy="211.6" rx="0.4" ry="0.4" />
              </g>
              <g>
                <ellipse class="st3" cx="109.2" cy="218.1" rx="0.4" ry="0.4" />
                <ellipse class="st3" cx="108.7" cy="216.6" rx="0.4" ry="0.4" />
                <ellipse class="st3" cx="108.1" cy="214.9" rx="0.4" ry="0.4" />
                <ellipse class="st3" cx="107.6" cy="213.3" rx="0.4" ry="0.4" />
              </g>
            </g>
          </g>
          <g id="basement" class="basement">
                  <path class="st2 basement" d="M377,230h348v68H377V230z" />
              <path class="st2 basement" d="M386,230h331v68H386V230z" />
            <rect x="449" y="269" class="st2 basement" width="268" height="5" />
            <rect x="385.4" y="229.6" class="st1 basement" width="104.8" height="68.9" />
              <path class="st2 basement" d="M385.9,230.1h36.7v4.4h-36.7V230.1z" />
              <path class="st2 basement" d="M385.9,234.9h36.7v4.4h-36.7V234.9z" />
              <path class="st2 basement" d="M385.9,239.7h36.7v4.4h-36.7V239.7z" />
              <path class="st2 basement" d="M385.9,244.6h36.7v4.4h-36.7V244.6z" />
              <path class="st2 basement" d="M385.9,249.4h36.7v4.4h-36.7V249.4z" />
              <path class="st2 basement" d="M385.9,254.2h36.7v4.4h-36.7V254.2z" />
              <polygon class="st3 basement" points="489.3,298 490,298 490,292 481.9,292 481.9,287.1 473.7,287.1 473.7,283.2 473.7,283.2 473.7,283.2
          473.7,283.2 465.6,283.2 465.6,278.3 465.6,278.3 465.6,278.3 465.6,278.3 457.4,278.3 457.4,273.3 457.4,273.3 457.4,273.3
          457.4,273.3 449.2,273.3 449.2,268.4 449.2,268.4 441,268.4 441,263.5 432.8,263.5 432.8,258.6 432.8,258.6 432.8,258.1 386,258.1
          386,259.1 431.8,259.1 431.8,263.5 431.8,264.5 432.8,264.5 440,264.5 440,268.4 440,269.4 441,269.4 448.2,269.4 448.2,273.3
          448.2,274.3 449.2,274.3 456.4,274.3 456.4,278.3 456.4,279.3 457.4,279.3 464.6,279.3 464.6,283.2 464.6,284.2 465.6,284.2
          472.7,284.2 472.7,287.1 472.7,288.1 473.7,288.1 480.9,288.1 480.9,292 480.9,293 481.9,293 489,293 489,297.5 423.1,297.5
          386.4,297.5 386.4,259.6 385.4,259.6 385.4,298.5 423.1,298.5 490.2,298.5 	" />
              <g id="sofa">
                  <rect x="523" y="203" class="st1 basement" width="63" height="22" />
                  <path class="st2 basement" d="M554,216v-11c0-1.1-0.9-2-2-2h-24c-1.1,0-2,0.9-2,2v0.5h1.8c0.9,0,1.7,0.7,1.7,1.7v8.8H554z" />
                  <path class="st2 basement" d="M583,205.5V205c0-1.1-0.9-2-2-2h-25c-1.1,0-2,0.9-2,2v11h25.5v-8.7c0-1,0.8-1.8,1.8-1.8H583z" />
                  <path class="st2 basement" d="M554,216v-2c0-1.1-0.9-2-2-2h-22.5v4H554z" />
                  <path class="st2 basement" d="M579.5,216v-4H556c-1.1,0-2,0.9-2,2v2H579.5z" />
                  <path class="st2 basement" d="M586.5,225v0.5H586h-6h-0.5V225v-18c0-0.8,0.7-1.5,1.5-1.5h4c0.8,0,1.5,0.7,1.5,1.5V225z" />
                  <path class="st2 basement" d="M529.5,225v0.5H529h-6h-0.5V225v-18c0-0.8,0.7-1.5,1.5-1.5h4c0.8,0,1.5,0.7,1.5,1.5V225z" />
              </g>
          </g>
          <g id="foundation" class="foundation">
              <g transform="translate(0,-20)">
                <path class="st2" d="M260.2,249.3v43.5h34.2v-43.5" />
                <path class="st2" d="M718.1,249.9l-0.2,29.4H223.5v-29H222v29h-53.6v-30h-1.5v30h-53.8v-29.1l-1.5,0v29.2h-4.4
            c-1.6,0-2.9,1.3-2.9,2.9c0,1.6,1.3,2.9,2.9,2.9h616.4l0.2-35.1H718.1z" />
            </g>
          </g>
        </g>
        <g id="moika">
          <ellipse class="st3" cx="679.2" cy="203.3" rx="21.8" ry="21.9" />

          <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="647.8876" y1="662.5856" x2="685.2557" y2="680.1457"
           gradientTransform="matrix(1 0 0 1 0 -474)">
            <stop offset="1.507370e-02" style="stop-color:#68EAE7" />
            <stop offset="0.8063" style="stop-color:#2FC9C6;stop-opacity:0" />
          </linearGradient>
          <ellipse class="st4" cx="679.2" cy="203.3" rx="21.8" ry="21.9" />
          <g>
            <rect x="678.4" y="200" class="st5" width="2.4" height="1.7" />
            <rect x="679.5" y="199.4" class="st5" width="1.3" height="0.9" />
            <path class="st5" d="M682.4,198v0.2l-1.6,1.1h-1.3L682.4,198z" />
            <path class="st5" d="M675.9,196.5c0-0.5,0.4-0.9,0.9-0.9l0,0v0.9H675.9L675.9,196.5z" />
            <path class="st5" d="M675.9,196.9h0.9v-0.3h-0.9V196.9z" />
            <path class="st5" d="M676.5,196.2c-0.2-0.2,0-0.6,0.3-0.6l0,0c0.3,0,0.5,0.1,0.7,0.3c1.5,1.6,1.9,2.7,2.1,4.9h-1.1
            C678.3,198.9,677.8,197.8,676.5,196.2z" />
            <path class="st5" d="M675.9,211.5h8.3c3.3,0,5.9-2.7,5.9-5.9h-20.2C669.9,208.9,672.6,211.5,675.9,211.5z" />
            <path class="st5" d="M690.1,202.2h-20.2v2.8h20.2V202.2z" />
          </g>
        </g>
        <g id="toilet">
          <ellipse class="st3" cx="407" cy="66.8" rx="35.2" ry="35.3" />

          <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="356.4583" y1="517.0499" x2="416.7142" y2="545.3648"
           gradientTransform="matrix(1 0 0 1 0 -474)">
            <stop offset="1.507370e-02" style="stop-color:#68EAE7" />
            <stop offset="0.8063" style="stop-color:#2FC9C6;stop-opacity:0" />
          </linearGradient>
          <ellipse class="st6" cx="407" cy="66.8" rx="35.2" ry="35.3" />
          <path class="st5" d="M404.5,55.6h-6V54h6V55.6z" />
          <path class="st5" d="M405.6,64.3h12.6v-1.6h-12.6V64.3z" />
          <path class="st5" d="M404.5,65.4v-8.7h-6v8.8c0,2.8,1.9,5.1,4.4,5.8v5.1h5.2h4.5c4.1-3.6,5.3-5.8,5.6-11H404.5z" />
        </g>
        <g id="irregation">
          <ellipse class="st3" cx="167.9" cy="221.4" rx="13.9" ry="13.9" />

          <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="147.9254" y1="686.0131" x2="171.7474" y2="697.2081"
           gradientTransform="matrix(1 0 0 1 0 -474)">
            <stop offset="1.507370e-02" style="stop-color:#68EAE7" />
            <stop offset="0.8063" style="stop-color:#2FC9C6;stop-opacity:0" />
          </linearGradient>
          <ellipse class="st7" cx="167.9" cy="221.4" rx="13.9" ry="13.9" />
          <path class="st5" d="M164.3,219.4h7l-0.5,2.1h-6L164.3,219.4z" />
          <path class="st5" d="M166.4,220.5h2.7v6.2h-2.7V220.5z" />
          <path class="st5" d="M166.9,227.8h1.5v1.5h-1.5V227.8z" />
          <g>
            <g>
              <ellipse class="st5" cx="171.1" cy="218.1" rx="0.4" ry="0.4" />
              <ellipse class="st5" cx="171.7" cy="216.6" rx="0.4" ry="0.4" />
              <ellipse class="st5" cx="172.2" cy="214.9" rx="0.4" ry="0.4" />
              <ellipse class="st5" cx="172.7" cy="213.3" rx="0.4" ry="0.4" />
            </g>
            <g>
              <ellipse class="st5" cx="167.7" cy="218.1" rx="0.4" ry="0.4" />
              <ellipse class="st5" cx="167.7" cy="216.6" rx="0.4" ry="0.4" />
              <ellipse class="st5" cx="167.7" cy="214.9" rx="0.4" ry="0.4" />
              <ellipse class="st5" cx="167.7" cy="213.3" rx="0.4" ry="0.4" />
              <ellipse class="st5" cx="167.7" cy="211.6" rx="0.4" ry="0.4" />
            </g>
            <g>
              <ellipse class="st5" cx="164.3" cy="218.1" rx="0.4" ry="0.4" />
              <ellipse class="st5" cx="163.8" cy="216.6" rx="0.4" ry="0.4" />
              <ellipse class="st5" cx="163.2" cy="214.9" rx="0.4" ry="0.4" />
              <ellipse class="st5" cx="162.7" cy="213.3" rx="0.4" ry="0.4" />
            </g>
          </g>
        </g>
        <g id="line-wrap">
          <path id="basement-line" class="st8" d="M540.2,122.4L540.2,122.4c-23.5,0-42.6,19.1-42.6,42.6v113.3" />
          <path id="foundation-line" class="st8" d="M540,123 L365,123 C277,123 277,174 277,186 L277,244"></path>
          <path id="right-line" class="st8" d="M562.1,121.3h59.4c30.8,0,55.8-25,55.8-55.8l0,0" />
        </g>
        <g id="sensor-basement-mobile">
          <ellipse class="st9" cx="497.1" cy="271.7" rx="18" ry="18" />
          <circle class="pulse-circle" cx="497.1" cy="271.7" r="17" />
          <circle class="pulse-circle" cx="497.1" cy="271.7" r="17" />
          <circle class="pulse-circle" cx="497.1" cy="271.7" r="17" />
          <g>
            <rect x="486.7" y="268.8" class="st5" width="1.9" height="5.5" />
            <rect x="502.8" y="268.8" class="st5" width="4.7" height="5.5" />
            <path class="st5" d="M489.6,265.2c-0.6,0-1,0.4-1,1v11.7c0,0.6,0.4,1,1,1h15c0.6,0,1-0.4,1-1v-11.7c0-0.6-0.4-1-1-1H489.6z" />
            <ellipse class="st9" cx="491.9" cy="269.3" rx="1.4" ry="1.4" />
          </g>
        </g>
        <g id="bridge">
          <ellipse class="st9" cx="553.3" cy="120.7" rx="26.2" ry="26.3" />
          <circle class="pulse-circle" cx="553.3" cy="120.7" r="25" />
          <circle class="pulse-circle" cx="553.3" cy="120.7" r="25" />
          <circle class="pulse-circle" cx="553.3" cy="120.7" r="25" />
          <path class="st5" d="M547.3,110.2c0-1.1,0.9-2,2-2h7.5c1.1,0,2,0.9,2,2v15h-11.5V110.2z M547.3,126.1h11.5v7.3h-11.5V126.1z
           M553.1,122.5c0.7,0,1.3-0.6,1.3-1.3c0-0.7-0.6-1.3-1.3-1.3s-1.3,0.6-1.3,1.3C551.7,121.9,552.3,122.5,553.1,122.5z" />
        </g>
        <g id="router">
          <ellipse class="st9" cx="676.6" cy="49.6" rx="17" ry="17" />
          <circle class="pulse-circle" cx="676.6" cy="49.6" r="15" />
          <circle class="pulse-circle" cx="676.6" cy="49.6" r="15" />
          <circle class="pulse-circle" cx="676.6" cy="49.6" r="15" />
          <path class="st5" d="M666,50.7c0-1.2,1-2.2,2.2-2.2h15.5c1.2,0,2.2,1,2.2,2.2s-1,2.2-2.2,2.2h-15.5C667,52.9,666,51.9,666,50.7z
           M669.5,50.7c0,0.6-0.5,1.1-1.1,1.1s-1.1-0.5-1.1-1.1s0.5-1.1,1.1-1.1C669,49.6,669.5,50.1,669.5,50.7z M671.2,51.2
          c0.3,0,0.6-0.2,0.6-0.6c0-0.3-0.3-0.6-0.6-0.6s-0.6,0.2-0.6,0.6C670.6,51,670.9,51.2,671.2,51.2z" />
          <path class="st5" d="M680.3,40.1c0-0.3,0.3-0.6,0.6-0.6l0,0c0.3,0,0.6,0.3,0.6,0.6v7.8h-1.1L680.3,40.1L680.3,40.1z" />
        </g>
        <g id="washing-machine-basement-mobile">
          <ellipse class="st3" cx="625.2" cy="282.1" rx="33.8" ry="33.9" />
          <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="576.6047" y1="733.2643" x2="634.5257" y2="760.4823"
           gradientTransform="matrix(1 0 0 1 0 -474)">
            <stop offset="1.507370e-02" style="stop-color:#68EAE7" />
            <stop offset="0.8063" style="stop-color:#2FC9C6;stop-opacity:0" />
          </linearGradient>
          <ellipse class="st10" cx="625.2" cy="282.1" rx="33.8" ry="33.9" />
          <g>
            <path class="st5" d="M638.8,270.2h-27.3V298h27.3V270.2z" />
            <path class="st5" d="M638.8,264h-27.3v5.4h27.3V264z" />
            <ellipse class="st11" cx="625.3" cy="284.1" rx="8" ry="8" />
            <ellipse class="st5" cx="625.3" cy="284.2" rx="5.9" ry="6" />
            <ellipse class="st11" cx="614.9" cy="266.8" rx="1.1" ry="1.1" />
          </g>
        </g>
        <path id="machine-path-mobile" stroke="none" fill="none" d="M625.2,282.1 C588.6953167,279.6214898 559.6953167,272.6214898 538.2,255.1 C520.7046833,245.5785102 516.03801663,230.2451769 511,208.1"></path>
        <path id="sensor-path-mobile" stroke="none" fill="none" d="M497.1,271.7 C459.969224,281.4334722 419.302558,285.1001389 375.1,282.7 C330.8974422,280.2998611 297.8974422,272.6331944 277.1,258.7"></path>
      </svg>

  </div>
</div>
            
          
!

CSS

            
              $handle-switch-distance: 14.1rem
$grad-dark-green: linear-gradient(0deg, #0B6C6A, #0B6C6A), linear-gradient(121.84deg, #68EAE7 -8.5%, rgba(47, 201, 198, 0) 47.7%), #2CC7C4
$grad-light-green: linear-gradient(158.53deg,#68eae7 -8.5%,rgba(47,201,198,0) 47.7%),#2cc7c4

body
  background: $grad-dark-green
  margin: 0
  padding: 0
  
.foundation
  opacity: 0
  visibility: hidden

.pulse-circle
  position: absolute
  fill: none
  stroke-width: 2px
  stroke: #fff
  transform-origin: 50% 50%

#foundation-line
  stroke-dasharray: 600
  stroke-dashoffset: 600

#basement-line
  stroke-dasharray: 330
  stroke-dashoffset: 330

.hiw-hero-image
  position: absolute
  top: 0
  left: 0
  overflow: hidden



.hero-section--how_works-scheme
  position: relative
  top: 0
  left: 0
  width: 100vw
  min-height: 600px
  max-height: 100vh
  .button-switch
    position: absolute
    display: inline-flex
    align-items: center
    top: 1.02rem
    left: 1.2rem
    width: 17.267rem
    height: 3.198rem
    padding: 0.879rem 0
    border-radius: 1.744rem
    background: $grad-light-green
    z-index: 1
    outline: none
    user-select: none
    border: none
    &.active
      .switch-handle
        transform: translateX(0)
      .switch-label
        &--on
          transition: all 200ms 400ms cubic-bezier(0.17, 0.17, 0.83, 1.00)
          opacity: 1
          transform: translateX(0)
        &--off
          transition: all 200ms cubic-bezier(0.17, 0.17, 0.83, 1.00)
          opacity: 0
          transform: translateX(-10px)
    .switch-handle
      position: absolute
      display: inline-flex
      align-items: center
      justify-content: center
      min-width: 2.616rem
      min-height: 2.616rem
      margin: 0
      padding: 0.233rem
      transition: transform 400ms 200ms cubic-bezier(0.62, 0.00, 0.25, 1.00)
      transform: translateX($handle-switch-distance)
      &__icon
        max-width: 100%
        min-width: 2.616rem
        height: auto
    .switch-label
        color: #0a5f5d
        display: block
        font-family: Open Sans, sans-serif
        font-size: .93rem
        font-weight: 700
        letter-spacing: .1em
        line-height: .93rem
        position: absolute
        text-transform: uppercase
        &--on
          transition: all 200ms cubic-bezier(0.17, 0.17, 0.83, 1.00)
          opacity: 0
          transform: translateX(10px)
          right: 1.163rem
        &--off
          transition: all 200ms 400ms cubic-bezier(0.17, 0.17, 0.83, 1.00)
          opacity: 1
          transform: translateX(0)
          left: 1.163rem
  &__image-wrap
    // position: relative
    width: 100%
    height: 100%
    overflow: hidden
    svg
      width: 100%
      height: 100%
            
          
!

JS

            
              const morphSVGPlugin = MorphSVGPlugin;

const switchEase = CustomEase.create('switchEase', 'M0,0 C0.17,0.17 0.83,1 1,1');
const lineEase = CustomEase.create('lineEase', 'M0,0 C0.55,0 0.3,1 1,1');
const pulseEase = CustomEase.create('pulseEase', 'M0,0 C0.17,0.17 0.33,1 1,1');
const deviceEase = CustomEase.create('deviceEase', 'M0,0 C0.62,0 0.25,1 1,1');

class hiwHeroSection {

  _setup() {
    this.width = 0;
    this.mobileWidth = 480;
    this.tabletWidth = 768;
    this.isTablet = undefined;
    this.isBasement = true;

    this._el = document.querySelector('.hero-section--how_works-scheme');
    this.image = this._el.querySelector('#house-with-basement');
    this.imageMobile = this._el.querySelector('#house-with-basement-768');

    this.switchButton = this._el.querySelector('.button-switch');

    this.basementLine = this._el.querySelectorAll('#basement-line');
    this.rightLine = this._el.querySelectorAll('#right-line');
    this.foundationLine = this._el.querySelectorAll('#foundation-line');

    this.basementElements = this._el.querySelectorAll('#basement');
    this.foundationElements = this._el.querySelectorAll('#foundation');

    this.basementSensor = this._el.querySelectorAll('#sensor-basement');
    this.basementMachine = this._el.querySelectorAll('#washing-machine-basement');
    this.basementSensorMobile = this._el.querySelectorAll('#sensor-basement-mobile');
    this.basementMachineMobile = this._el.querySelectorAll('#washing-machine-basement-mobile');

    this.pulseCircles = this._el.querySelectorAll('#house-with-basement .pulse-circle');
    this.pulseCirclesMobile = this._el.querySelectorAll('#house-with-basement-768 .pulse-circle');

    this.machinePath = morphSVGPlugin.pathDataToBezier('#machine-path', { align: this.basementMachine });
    this.machinePathReverse = morphSVGPlugin.pathDataToBezier('#machine-path', { align: this.basementMachine }).reverse();
    this.sensorPath = morphSVGPlugin.pathDataToBezier('#sensor-path', { align: this.basementSensor });
    this.sensorPathReverse = morphSVGPlugin.pathDataToBezier('#sensor-path', { align: this.basementSensor }).reverse();

    this.machinePathMobile = morphSVGPlugin.pathDataToBezier('#machine-path-mobile', { align: this.basementMachineMobile });
    this.machinePathMobileReverse = morphSVGPlugin.pathDataToBezier('#machine-path-mobile', { align: this.basementMachineMobile }).reverse();
    this.sensorPathMobile = morphSVGPlugin.pathDataToBezier('#sensor-path-mobile', { align: this.basementSensorMobile });
    this.sensorPathMobileReverse = morphSVGPlugin.pathDataToBezier('#sensor-path-mobile', { align: this.basementSensorMobile }).reverse();

    TweenLite.set([this.basementMachine, this.basementSensor, this.basementMachineMobile, this.basementSensorMobile], {
        xPercent: -50,
        yPercent: -50,
    });

    TweenLite.set(this.rightLine, { strokeDasharray: 450, strokeDashoffset: 450 });

    TweenLite.set(this.foundationLine, { strokeDasharray: 600, strokeDashoffset: 600 });
    TweenLite.set([
        this.pulseCircles, this.pulseCirclesMobile,
    ], { transformOrigin: '50%, 50%' });

    TweenLite.set(this.basementMachine, {
        x: this.machinePath[0].x, y: this.machinePath[0].y,
    });

    TweenLite.set(this.basementMachineMobile, {
        x: this.machinePathMobile[0].x, y: this.machinePathMobile[0].y,
    });

    TweenLite.set(this.basementSensor, {
        x: this.sensorPath[0].x, y: this.sensorPath[0].y,
    });

    TweenLite.set(this.basementSensorMobile, {
        x: this.sensorPathMobile[0].x, y: this.sensorPathMobile[0].y,
    });

    this.switchButton.addEventListener('click', () => {
        if (this.isBasement) {
            this._switchOff();
        } else {
            this._switchOn();
        }
    });

    this.linesTl = new TimelineMax({
        onComplete: () => {
            this._switchOff();
        },
    });
  }
      

    resize() {
        const width = window.innerWidth;
        if (width === this.width) {
            return;
        }
        this.width = width;
        const tablet = width < this.tabletWidth;
        if (tablet === this.isTablet) {
            return;
        }

        this.linesTl
            .to(this.basementLine, 0.6, { strokeDashoffset: 645, ease: lineEase })
            .fromTo(this.rightLine, 0.6, { strokeDashoffset: 450 }, { strokeDashoffset: 0, ease: lineEase }, '+=0.15');

        this.isTablet = tablet;
        TweenLite.set(this.foundationLine, { strokeDashoffset: 600 });

        if (!this.isTablet) {
            TweenLite.set(this.imageMobile, { autoAlpha: 0 });
            TweenLite.to(this.image, 0.3, { autoAlpha: 1 });

            TweenLite.set(this.basementSensor, { x: this.sensorPath[0].x, y: this.sensorPath[0].y });
            TweenLite.set(this.basementMachine, { x: this.machinePath[0].x, y: this.machinePath[0].y });
        } else {
            TweenLite.set(this.image, { autoAlpha: 0 });
            TweenLite.to(this.imageMobile, 0.3, { autoAlpha: 1 });

            TweenLite.set(this.basementSensorMobile, { x: this.sensorPathMobile[0].x, y: this.sensorPathMobile[0].y });
            TweenLite.set(this.basementMachineMobile, { x: this.machinePathMobile[0].x, y: this.machinePathMobile[0].y });

            TweenLite.set([this.title, this.listItems], { autoAlpha: 1 });
        }

        this._initTimeLines();
        this._switchOn(true);
    }


    _initTimeLines() {

        if (this._basementTrueTL) {
            this._basementTrueTL.pause(0);
            this._basementTrueTL.clear(true);
            this._basementTrueTL.kill();
        }
        if (this._basementFalseTL) {
            this._basementFalseTL.pause(0);
            this._basementFalseTL.clear(true);
            this._basementFalseTL.kill();
        }

        this._basementTrueTL = new TimelineMax({
            paused: true,
            onComplete: () => {
                TweenLite.set([this.pulseCircles, this.pulseCirclesMobile], { scale: 1, autoAlpha: 1 });
                if (!this.isBasement) {
                    this._basementFalseTL.play(0);
                }
            },
        });
        this._basementFalseTL = new TimelineMax({
            paused: true,
            onComplete: () => {
                TweenLite.set([this.pulseCircles, this.pulseCirclesMobile], { scale: 1, autoAlpha: 1 });
                if (this.isBasement) {
                    this._basementTrueTL.play(0);
                }
            },
        });
        if (!this.isTablet) {
            this._basementTrueTL
                .fromTo(this.foundationLine, 0.8, { strokeDashoffset: 0 }, { strokeDashoffset: 600, ease: lineEase })
                .fromTo(this.foundationElements, 0.3, { autoAlpha: 1 }, { autoAlpha: 0, ease: switchEase }, '-=0.3')
                .to(this.basementMachine, 0.45, { bezier: { values: this.machinePathReverse, type: 'cubic' }, ease: deviceEase,
                    onStart: () => {
                        TweenMax.to(this.basementMachineMobile, 0.45, { bezier: { values: this.machinePathMobileReverse, type: 'cubic' }, ease: deviceEase });
                    },
                }, '-=0.4')
                .to(this.basementSensor, 0.65, { bezier: { values: this.sensorPathReverse, type: 'cubic' }, ease: deviceEase,
                    onStart: () => {
                        TweenMax.to(this.basementSensorMobile, 0.65, { bezier: { values: this.sensorPathMobileReverse, type: 'cubic' }, ease: deviceEase });
                    },
                }, '-=0.2')
                .fromTo(this.basementLine, 0.8, { strokeDashoffset: 330 }, { strokeDashoffset: 0, ease: lineEase }, '-=0.2')
                .fromTo(this.basementElements, 0.3, { autoAlpha: 0 }, { autoAlpha: 1, ease: switchEase }, '-=0.7')
                .staggerTo(this.pulseCircles, 0.8333, { autoAlpha: 0, scale: 1.7, ease: pulseEase }, 0.1666);

            this._basementFalseTL
                .to(this.basementLine, 0.8, { strokeDashoffset: 990, ease: lineEase })
                .fromTo(this.basementElements, 0.3, { autoAlpha: 1 }, { autoAlpha: 0, ease: switchEase }, '-=0.3')
                .to(this.basementMachine, 0.45, { bezier: { values: this.machinePath, type: 'cubic' }, ease: deviceEase,
                    onStart: () => {
                        TweenMax.to(this.basementMachineMobile, 0.45, { bezier: { values: this.machinePathMobile, type: 'cubic' }, ease: deviceEase });
                    },
                }, '-=0.4')
                .to(this.basementSensor, 0.65, { bezier: { values: this.sensorPath, type: 'cubic' }, ease: deviceEase,
                    onStart: () => {
                        TweenMax.to(this.basementSensorMobile, 0.65, { bezier: { values: this.sensorPathMobile, type: 'cubic' }, ease: deviceEase });
                    },
                }, '-=0.2')
                .fromTo(this.foundationLine, 0.8, { strokeDashoffset: 600 }, { strokeDashoffset: 0, ease: lineEase }, '-=0.2')
                .fromTo(this.foundationElements, 0.3, { autoAlpha: 0 }, { autoAlpha: 1, ease: switchEase }, '-=0.7')
                .staggerTo(this.pulseCircles, 0.8333, { autoAlpha: 0, scale: 1.7, ease: pulseEase }, 0.1666);
        } else {
            this._basementTrueTL
                .fromTo(this.foundationLine, 0.8, { strokeDashoffset: 0 }, { strokeDashoffset: 600, ease: lineEase })
                .fromTo(this.foundationElements, 0.3, { autoAlpha: 1 }, { autoAlpha: 0, ease: switchEase }, '-=0.3')
                .to(this.basementMachineMobile, 0.45, { bezier: { values: this.machinePathMobileReverse, type: 'cubic' }, ease: deviceEase,
                    onStart: () => {
                        TweenMax.to(this.basementMachine, 0.45, { bezier: { values: this.machinePathReverse, type: 'cubic' }, ease: deviceEase });
                    },
                }, '-=0.4')
                .to(this.basementSensorMobile, 0.65, { bezier: { values: this.sensorPathMobileReverse, type: 'cubic' }, ease: deviceEase,
                    onStart: () => {
                        TweenMax.to(this.basementSensor, 0.65, { bezier: { values: this.sensorPathReverse, type: 'cubic' }, ease: deviceEase });
                    },
                }, '-=0.2')
                .fromTo(this.basementLine, 0.8, { strokeDashoffset: 330 }, { strokeDashoffset: 0, ease: lineEase }, '-=0.2')
                .fromTo(this.basementElements, 0.3, { autoAlpha: 0 }, { autoAlpha: 1, ease: switchEase }, '-=0.7')
                .staggerTo(this.pulseCirclesMobile, 0.8333, { autoAlpha: 0, scale: 1.7, ease: pulseEase }, 0.1666);

            this._basementFalseTL
                .to(this.basementLine, 0.8, { strokeDashoffset: 990, ease: lineEase })
                .fromTo(this.basementElements, 0.3, { autoAlpha: 1 }, { autoAlpha: 0, ease: switchEase }, '-=0.3')
                .to(this.basementMachineMobile, 0.45, { bezier: { values: this.machinePathMobile, type: 'cubic' }, ease: deviceEase,
                    onStart: () => {
                        TweenMax.to(this.basementMachine, 0.45, { bezier: { values: this.machinePath, type: 'cubic' }, ease: deviceEase });
                    },
                }, '-=0.4')
                .to(this.basementSensorMobile, 0.65, { bezier: { values: this.sensorPathMobile, type: 'cubic' }, ease: deviceEase,
                    onStart: () => {
                        TweenMax.to(this.basementSensor, 0.65, { bezier: { values: this.sensorPath, type: 'cubic' }, ease: deviceEase });
                    },
                }, '-=0.2')
                .fromTo(this.foundationLine, 0.8, { strokeDashoffset: 600 }, { strokeDashoffset: 0, ease: lineEase }, '-=0.2')
                .fromTo(this.foundationElements, 0.3, { autoAlpha: 0 }, { autoAlpha: 1, ease: switchEase }, '-=0.7')
                .staggerTo(this.pulseCirclesMobile, 0.8333, { autoAlpha: 0, scale: 1.7, ease: pulseEase }, 0.1666);
        }

    }

    // STATE -------------------------------------------------------------------

    _switchOn(skipAnimation = false) {
        this.switchButton.classList.add('active');
        this.isBasement = true;
        if (!skipAnimation && !this._basementTrueTL.isActive() && !this._basementFalseTL.isActive()) {
            this._basementTrueTL.play(0);
        }
    }

    _switchOff() {
        this.switchButton.classList.remove('active');
        this.isBasement = false;
        if (!this._basementTrueTL.isActive() && !this._basementFalseTL.isActive()) {
            this._basementFalseTL.play(0);
        }
    }

    _activate(delay, direction) {
        if (!this.isTablet) {
            TweenMax.staggerFromTo(this.listItems, 0.5, { autoAlpha: 0, y: 50 }, { autoAlpha: 1, y: 0, ease: listItemsEase }, 0.1);
        }
    }

    _deactivate(delay, direction) {
        if (!this.isTablet) {
            TweenMax.staggerTo(this.listItems, 0.5, { autoAlpha: 0, y: 50, ease: listItemsEase }, 0.1);
        }
    }
}

const toggle = new hiwHeroSection();
toggle._setup();
toggle.resize();

window.addEventListener("resize", function() {
  toggle.resize();
});

            
          
!
999px

Console