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.

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

              
                <section class="browser">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="793" height="847.8" viewBox="0 0 793 847.8">
  <defs>
    <clipPath id="clip-path" transform="translate(0 0.2)">
      <path d="M27.3,38.3A10.9,10.9,0,0,1,38.3,27.3H754.7a10.9,10.9,0,0,1,10.9,10.9V809.4a10.9,10.9,0,0,1-10.9,10.9H38.3a10.9,10.9,0,0,1-10.9-10.9Z" fill="none" clip-rule="evenodd"/>
    </clipPath>
    <clipPath id="clip-path-2" transform="translate(0 0.2)">
      <path d="M54.7,114.9a5.5,5.5,0,0,1,5.5-5.5H732.8a5.5,5.5,0,0,1,5.5,5.5V787.5a5.5,5.5,0,0,1-5.5,5.5H60.2a5.5,5.5,0,0,1-5.5-5.5Z" fill="none" clip-rule="evenodd"/>
    </clipPath>
    <clipPath id="clip-path-3" transform="translate(0 0.2)">
      <path d="M147.7,68.4a8.2,8.2,0,0,1,8.2-8.2H648.1a8.2,8.2,0,0,1,0,16.4H155.9A8.2,8.2,0,0,1,147.7,68.4Z" fill="none" clip-rule="evenodd"/>
    </clipPath>
    <clipPath id="clip-path-4" transform="translate(0 0.2)">
      <path d="M678.1,68.4a8.2,8.2,0,0,1,8.2-8.2h43.7a8.2,8.2,0,1,1,0,16.4H686.4A8.2,8.2,0,0,1,678.1,68.4Z" fill="none" clip-rule="evenodd"/>
    </clipPath>
    <clipPath id="clip-path-5" transform="translate(0 0.2)">
      <circle cx="62.9" cy="68.4" r="8.2" fill="none"/>
    </clipPath>
    <clipPath id="clip-path-6" transform="translate(0 0.2)">
      <circle cx="90.2" cy="68.4" r="8.2" fill="none"/>
    </clipPath>
    <clipPath id="clip-path-7" transform="translate(0 0.2)">
      <circle cx="117.6" cy="68.4" r="8.2" fill="none"/>
    </clipPath>
  </defs>
  <title>browserwindow</title>
  <g id="Layer_1" data-name="Layer 1">
    <g clip-path="url(#clip-path)">
      <rect y="0.2" width="793" height="847.68" fill="#e4ebef"/>
    </g>
    <g clip-path="url(#clip-path-2)">
      <rect x="27.3" y="82.2" width="738.3" height="738.3" fill="#fff"/>
    </g>
    <g clip-path="url(#clip-path-3)">
      <rect x="120.3" y="33" width="563.3" height="71.1" fill="#fff"/>
    </g>
    <g clip-path="url(#clip-path-4)">
      <rect x="650.8" y="33" width="114.8" height="71.1" fill="#b9cbd8"/>
    </g>
    <g clip-path="url(#clip-path-5)">
      <rect x="27.3" y="33" width="71.1" height="71.1" fill="#b9cbd8"/>
    </g>
    <g clip-path="url(#clip-path-6)">
      <rect x="54.7" y="33" width="71.1" height="71.1" fill="#b9cbd8"/>
    </g>
    <g clip-path="url(#clip-path-7)">
      <rect x="82" y="33" width="71.1" height="71.1" fill="#b9cbd8"/>
    </g>
  </g>
  <g id="keepartboard">
    <rect x="1" y="0.5" width="790" height="845" fill="none" stroke="#fff" stroke-miterlimit="10"/>
  </g>
</svg>
</section>

<section class="initial">
  <svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="791" height="846" viewBox="0 0 791 846">
  <defs>
    <clipPath id="clip-path-11" transform="translate(-0.5 0.2)">
      <path d="M289.9,528.3a19.1,19.1,0,0,1,19.1-19.1H489.4a19.1,19.1,0,0,1,0,38.3H309.1A19.1,19.1,0,0,1,289.9,528.3Z" fill="none" clip-rule="evenodd"/>
    </clipPath>
    <clipPath id="clip-path-12" transform="translate(-0.5 0.2)">
      <path d="M229.8,443.6a5.4,5.4,0,0,1,5.5-5.4H563.2a5.5,5.5,0,0,1,5.5,5.4v22a5.4,5.4,0,0,1-5.5,5.4H235.3a5.5,5.5,0,0,1-5.5-5.4Z" fill="none" clip-rule="evenodd"/>
    </clipPath>
    <clipPath id="clip-path-13" transform="translate(-0.5 0.2)">
      <path d="M300.9,326.1a8.2,8.2,0,0,1,8.2-8.2H483.9a8.2,8.2,0,1,1,0,16.4H309.1A8.2,8.2,0,0,1,300.9,326.1Z" fill="none" clip-rule="evenodd"/>
    </clipPath>
    <clipPath id="clip-path-14" transform="translate(-0.5 0.2)">
      <path d="M328.2,364.4a8.2,8.2,0,0,1,8.2-8.2H456.6a8.2,8.2,0,1,1,0,16.4H336.4A8.2,8.2,0,0,1,328.2,364.4Z" fill="none" clip-rule="evenodd"/>
    </clipPath>
  </defs>
  <title>signin</title>
  <g class="signin">
    <g class="inibutton" clip-path="url(#clip-path-11)">
      <rect x="262.1" y="482" width="273.2" height="92.89" fill="#92aec0"/>
    </g>
    <g clip-path="url(#clip-path-12)">
      <rect x="202" y="411" width="393.4" height="87.43" fill="#e4ebef"/>
    </g>
    <g clip-path="url(#clip-path-14)">
      <rect x="300.4" y="329" width="191.3" height="71.04" fill="#b9cbd8"/>
    </g>
    <g clip-path="url(#clip-path-13)">
      <rect x="273.1" y="290.8" width="245.9" height="71.04" fill="#b9cbd8"/>
    </g>
  </g>
</svg>

</section>

<section class="grid">
  <svg xmlns="http://www.w3.org/2000/svg" width="791" height="846" viewBox="0 0 791 846">
  <title>componentdemo</title>
    <g class="darker">
      <path d="M88.5,331.3H378.4a5.5,5.5,0,0,0,5.5-5.5V145.4a5.5,5.5,0,0,0-5.5-5.5H88.5a5.5,5.5,0,0,0-5.5,5.5V325.8A5.5,5.5,0,0,0,88.5,331.3Z" transform="translate(-0.5 0.2)" fill="#BACDD8"/>
      <g>
        <polyline points="356.4 302 282.3 238.5 247.6 273.2 186.8 212.5 118.2 280.9" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
        <ellipse cx="245.9" cy="194.4" rx="18.2" ry="18.1" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="5"/>
      </g>
    </g>
    <g>
      <path d="M416.6,331.3H706.5a5.5,5.5,0,0,0,5.5-5.5V145.4a5.5,5.5,0,0,0-5.5-5.5H416.6a5.5,5.5,0,0,0-5.5,5.5V325.8A5.5,5.5,0,0,0,416.6,331.3Z" transform="translate(-0.5 0.2)" fill="#e4ebef"/>
      <g>
        <polyline points="684.5 302 610.5 238.5 575.7 273.2 514.9 212.5 446.4 280.9" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
        <ellipse cx="574" cy="194.4" rx="18.2" ry="18.1" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="5"/>
      </g>
    </g>
    <g>
      <path d="M87.5,550.3H377.4a5.5,5.5,0,0,0,5.5-5.5V364.4a5.5,5.5,0,0,0-5.5-5.5H87.5a5.5,5.5,0,0,0-5.5,5.5V544.8A5.5,5.5,0,0,0,87.5,550.3Z" transform="translate(-0.5 0.2)" fill="#e4ebef"/>
      <g>
        <polyline points="355.4 521 281.3 457.5 246.6 492.2 185.8 431.5 117.2 499.9" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
        <ellipse cx="244.9" cy="413.4" rx="18.2" ry="18.1" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="5"/>
      </g>
    </g>
    <g>
      <path d="M415.6,550.3H705.5a5.5,5.5,0,0,0,5.5-5.5V364.4a5.5,5.5,0,0,0-5.5-5.5H415.6a5.5,5.5,0,0,0-5.5,5.5V544.8A5.5,5.5,0,0,0,415.6,550.3Z" transform="translate(-0.5 0.2)" fill="#e4ebef"/>
      <g>
        <polyline points="683.5 521 609.5 457.5 574.7 492.2 513.9 431.5 445.4 499.9" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
        <ellipse cx="573" cy="413.4" rx="18.2" ry="18.1" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="5"/>
      </g>
    </g>
    <g>
      <path d="M87.5,766.3H377.4a5.5,5.5,0,0,0,5.5-5.5V580.4a5.5,5.5,0,0,0-5.5-5.5H87.5a5.5,5.5,0,0,0-5.5,5.5V760.8A5.5,5.5,0,0,0,87.5,766.3Z" transform="translate(-0.5 0.2)" fill="#e4ebef"/>
      <g>
        <polyline points="355.4 737 281.3 673.5 246.6 708.2 185.8 647.5 117.2 715.9" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
        <ellipse cx="244.9" cy="629.4" rx="18.2" ry="18.1" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="5"/>
      </g>
    </g>
    <g>
      <path d="M415.6,766.3H705.5a5.5,5.5,0,0,0,5.5-5.5V580.4a5.5,5.5,0,0,0-5.5-5.5H415.6a5.5,5.5,0,0,0-5.5,5.5V760.8A5.5,5.5,0,0,0,415.6,766.3Z" transform="translate(-0.5 0.2)" fill="#e4ebef"/>
      <g>
        <polyline points="683.5 737 609.5 673.5 574.7 708.2 513.9 647.5 445.4 715.9" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
        <ellipse cx="573" cy="629.4" rx="18.2" ry="18.1" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="5"/>
      </g>
    </g>
  <g id="griddialog" data-name="dialog for instructions">
      <g id="textcursor">
        <path d="M651.3,477.1a.9.9,0,0,1-.9.9h-1.9a3,3,0,0,0-4.2,0h-1.9a.9.9,0,1,1,0-1.7h1.9a1.3,1.3,0,0,0,1.3-1.3h0v-6.6h-1.1a.9.9,0,1,1,0-1.7h1.1v-6.5a1.3,1.3,0,0,0-1.3-1.3h-1.9a.9.9,0,0,1,0-1.7h1.9a3,3,0,0,0,4.2,0h1.9a.9.9,0,1,1,0,1.7h-1.9a1.3,1.3,0,0,0-1.3,1.3v6.5h1.1a.9.9,0,1,1,0,1.7h-1.1v6.6h0a1.3,1.3,0,0,0,1.3,1.3h1.9A.9.9,0,0,1,651.3,477.1Z" transform="translate(-0.5 0.2)" fill="#8e9da5"/>
      </g>
      <rect x="584.5" y="369.5" width="181" height="209" fill="#fff" stroke="#9aa9b2" stroke-miterlimit="10"/>
      <rect x="606.5" y="399.5" width="102" height="16" rx="6" ry="6" fill="#9aa9b2" stroke="#fff" stroke-miterlimit="10"/>
      <rect x="607.5" y="435.5" width="122" height="12" rx="6" ry="6" fill="#e4ebef" stroke="#fff" stroke-miterlimit="10"/>
      <rect x="607.5" y="462.5" width="122" height="12" rx="6" ry="6" fill="#e4ebef" stroke="#fff" stroke-miterlimit="10"/>
      <rect x="607.5" y="492.5" width="122" height="12" rx="6" ry="6" fill="#e4ebef" stroke="#fff" stroke-miterlimit="10"/>
      <rect x="688.7" y="532.1" width="62.8" height="25.75" rx="6" ry="6" fill="#f7941d" stroke="#f7941d" stroke-miterlimit="10"/>
      <rect x="608.7" y="533.5" width="62.8" height="25.75" rx="6" ry="6" fill="#fff" stroke="#cddce2" stroke-miterlimit="10" stroke-width="2" opacity="0.31"/>
      <path d="M730.9,544.4l-6.9-6.2a.7.7,0,0,0-.9,0,.5.5,0,0,0,0,.7l6.2,5.6H712.1a.5.5,0,1,0,0,1.1h16.8l-5.8,5.2a.5.5,0,0,0,0,.7h.4l.4-.2,6.9-6.2a.7.7,0,0,0,0-.9Z" transform="translate(-0.5 0.2)" fill="#fff"/>
      <path d="M630.7,545.9l6.9-6.2a.7.7,0,0,1,.9,0,.5.5,0,0,1,0,.7l-6.2,5.6h17.2a.5.5,0,1,1,0,1.1H632.7l5.8,5.2a.5.5,0,0,1,0,.7H638l-.4-.2-6.9-6.2a.7.7,0,0,1,0-.9Z" transform="translate(-0.5 0.2)" fill="#b9cbd8" opacity="0.31"/>
    </g>
</svg>

</section>

<section class="single">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="791" height="846" viewBox="0 0 791 846">
  <defs>
    <clipPath id="clip-path" transform="translate(-0.5 0.2)">
      <path d="M82.3,551.4c0-3.4,2.4-6.1,5.5-6.1H710.7c3,0,5.5,2.8,5.5,6.1V759.9c0,3.4-2.4,6.1-5.5,6.1H87.8c-3,0-5.5-2.8-5.5-6.1Z" fill="#b9cbd8" clip-rule="evenodd"/>
    </clipPath>
    <clipPath id="clip-path-2" transform="translate(-0.5 0.2)">
      <path d="M82.3,189.5a8.2,8.2,0,0,1,8.2-8.2H265.3a8.2,8.2,0,1,1,0,16.4H90.5A8.2,8.2,0,0,1,82.3,189.5Z" fill="none" clip-rule="evenodd"/>
    </clipPath>
    <clipPath id="clip-path-3" transform="translate(-0.5 0.2)">
      <path d="M660.1,189.5a8.2,8.2,0,0,1,8.2-8.2h38.3a8.2,8.2,0,0,1,0,16.4H668.2A8.2,8.2,0,0,1,660.1,189.5Z" fill="none" clip-rule="evenodd"/>
    </clipPath>
    <clipPath id="clip-path-4" transform="translate(-0.5 0.2)">
      <rect x="198.3" y="334.9" width="71.1" height="71.06" rx="1.3" ry="1.3" fill="none"/>
    </clipPath>
    <clipPath id="clip-path-5" transform="translate(-0.5 0.2)">
      <path d="M410.2,352.9c0-4.2,2-7.6,4.5-7.6H570.5c2.5,0,4.5,3.4,4.5,7.6s-2,7.6-4.5,7.6H414.7C412.2,360.5,410.2,357.1,410.2,352.9Z" fill="none" clip-rule="evenodd"/>
    </clipPath>
    <clipPath id="clip-path-6" transform="translate(-0.5 0.2)">
      <path d="M410.2,390.9c0-4.1,1.4-7.4,3-7.4H498c1.7,0,3,3.3,3,7.4s-1.4,7.4-3,7.4H413.2C411.5,398.3,410.2,395,410.2,390.9Z" fill="none" clip-rule="evenodd"/>
    </clipPath>
    <clipPath id="clip-path-7" transform="translate(-0.5 0.2)">
      <path d="M410.2,430a8.2,8.2,0,0,1,8.2-8.2h92.9a8.2,8.2,0,1,1,0,16.4H418.4A8.2,8.2,0,0,1,410.2,430Z" fill="none" clip-rule="evenodd"/>
    </clipPath>
    <clipPath id="clip-path-8" transform="translate(-0.5 0.2)">
      <path d="M515.2,390.9c0-4.1.9-7.4,2.1-7.4h57.7c1.1,0,2.1,3.3,2.1,7.4s-.9,7.4-2.1,7.4H517.2C516.1,398.3,515.2,395,515.2,390.9Z" fill="none" clip-rule="evenodd"/>
    </clipPath>
  </defs>
  <title>singledemo</title>
  <g id="Layer_6" data-name="Layer 6">
    <g>
      <path d="M82.3,551.4c0-3.4,2.4-6.1,5.5-6.1H710.7c3,0,5.5,2.8,5.5,6.1V759.9c0,3.4-2.4,6.1-5.5,6.1H87.8c-3,0-5.5-2.8-5.5-6.1Z" transform="translate(-0.5 0.2)" fill="#b9cbd8" fill-rule="evenodd"/>
      <g clip-path="url(#clip-path)">
        <rect x="54.5" y="514.8" width="688.5" height="282.02" fill="#b9cbd8"/>
      </g>
    </g>
    <g clip-path="url(#clip-path-2)">
      <rect x="54.5" y="154.2" width="245.9" height="71.03" fill="#b9cbd8"/>
    </g>
    <g clip-path="url(#clip-path-3)">
      <rect x="632.2" y="154.2" width="109.3" height="71.03" fill="#e4ebef"/>
    </g>
    <g clip-path="url(#clip-path-4)">
      <rect x="191.4" y="328.6" width="84" height="83.98" fill="#b9cbd8"/>
    </g>
    <g class="text1" clip-path="url(#clip-path-5)">
      <rect x="394.7" y="320" width="194.8" height="66.15" fill="#e4ebef"/>
    </g>
    <g class="text2" clip-path="url(#clip-path-6)">
      <rect x="399.6" y="359.2" width="111" height="63.82" fill="#e4ebef"/>
    </g>
    <g class="text3" clip-path="url(#clip-path-7)">
      <rect x="382.3" y="394.6" width="163.9" height="71.03" fill="#e4ebef"/>
    </g>
    <polyline points="261.8 386.5 244.3 371.1 236.1 379.5 221.8 364.8 205.6 381.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
    <ellipse cx="235.7" cy="360.1" rx="4.3" ry="4.4" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="5"/>
    <g id="tabs">
      <path id="firsttab" d="M464.9,285.2H412.6c-1.4,0-2.5,3.9-2.5,8.7s1.1,8.7,2.5,8.7h52.3c1.4,0,2.5-3.9,2.5-8.7S466.3,285.2,464.9,285.2Z" transform="translate(-0.5 0.2)" fill="#b9cbd8"/>
      <path id="secondtab" d="M535.9,285.2H483.6c-1.4,0-2.5,3.9-2.5,8.7s1.1,8.7,2.5,8.7h52.3c1.4,0,2.5-3.9,2.5-8.7S537.3,285.2,535.9,285.2Z" transform="translate(-0.5 0.2)" fill="#b9cbd8" opacity="0.28"/>
      <path id="thirdtab" d="M604.9,285.2H552.6c-1.4,0-2.5,3.9-2.5,8.7s1.1,8.7,2.5,8.7h52.3c1.4,0,2.5-3.9,2.5-8.7S606.3,285.2,604.9,285.2Z" transform="translate(-0.5 0.2)" fill="#b9cbd8" opacity="0.28"/>
    </g>
    <rect x="84.5" y="222.5" width="630" height="3" fill="#e4ebef"/>
    <g id="proplines">
      <g id="thirdplus">
        <line x1="130.3" y1="675.7" x2="130.3" y2="688.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
        <line x1="123.3" y1="682.1" x2="137.3" y2="682.1" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
      </g>
      <g id="secondplus">
        <line class="away-y" x1="130.3" y1="624.7" x2="130.3" y2="637.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
        <line x1="123.3" y1="631.1" x2="137.3" y2="631.1" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
      </g>
      <g id="firstplus">
        <line x1="130.3" y1="578.7" x2="130.3" y2="591.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
        <line x1="123.3" y1="585.1" x2="137.3" y2="585.1" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
      </g>
      <rect id="thirdline" x="159.5" y="576.8" width="516.7" height="16" rx="6" ry="6" fill="#e4ebef"/>
      <rect id="secondline" x="159.4" y="623.8" width="516.8" height="16.24" rx="6" ry="6" fill="#e4ebef"/>
      <rect id="firstline" x="161" y="672.8" width="515.1" height="16.95" rx="6" ry="6" fill="#e4ebef"/>
    </g>
    <g class="text2extra" clip-path="url(#clip-path-8)">
      <rect x="507.8" y="359.2" width="75.6" height="63.82" fill="#e4ebef"/>
    </g>
    <g id="textcursor">
        <path d="M651.3,477.1a.9.9,0,0,1-.9.9h-1.9a3,3,0,0,0-4.2,0h-1.9a.9.9,0,1,1,0-1.7h1.9a1.3,1.3,0,0,0,1.3-1.3h0v-6.6h-1.1a.9.9,0,1,1,0-1.7h1.1v-6.5a1.3,1.3,0,0,0-1.3-1.3h-1.9a.9.9,0,0,1,0-1.7h1.9a3,3,0,0,0,4.2,0h1.9a.9.9,0,1,1,0,1.7h-1.9a1.3,1.3,0,0,0-1.3,1.3v6.5h1.1a.9.9,0,1,1,0,1.7h-1.1v6.6h0a1.3,1.3,0,0,0,1.3,1.3h1.9A.9.9,0,0,1,651.3,477.1Z" transform="translate(-0.5 0.2)" fill="#8e9da5"/>
    </g>
    <g id="dialog" data-name="dialog for instructions">
      <rect x="584.5" y="369.5" width="181" height="209" fill="#fff" stroke="#9aa9b2" stroke-miterlimit="10"/>
      <rect x="606.5" y="399.5" width="102" height="16" rx="6" ry="6" fill="#9aa9b2" stroke="#fff" stroke-miterlimit="10"/>
      <rect x="607.5" y="435.5" width="122" height="12" rx="6" ry="6" fill="#e4ebef" stroke="#fff" stroke-miterlimit="10"/>
      <rect x="607.5" y="462.5" width="122" height="12" rx="6" ry="6" fill="#e4ebef" stroke="#fff" stroke-miterlimit="10"/>
      <rect x="607.5" y="492.5" width="122" height="12" rx="6" ry="6" fill="#e4ebef" stroke="#fff" stroke-miterlimit="10"/>
      <rect x="688.7" y="532.1" width="62.8" height="25.75" rx="6" ry="6" fill="#f7941d" stroke="#f7941d" stroke-miterlimit="10"/>
      <rect x="608.7" y="533.5" width="62.8" height="25.75" rx="6" ry="6" fill="#fff" stroke="#cddce2" stroke-miterlimit="10" stroke-width="2" opacity="0.31"/>
      <path d="M730.9,544.4l-6.9-6.2a.7.7,0,0,0-.9,0,.5.5,0,0,0,0,.7l6.2,5.6H712.1a.5.5,0,1,0,0,1.1h16.8l-5.8,5.2a.5.5,0,0,0,0,.7h.4l.4-.2,6.9-6.2a.7.7,0,0,0,0-.9Z" transform="translate(-0.5 0.2)" fill="#fff"/>
      <path d="M630.7,545.9l6.9-6.2a.7.7,0,0,1,.9,0,.5.5,0,0,1,0,.7l-6.2,5.6h17.2a.5.5,0,1,1,0,1.1H632.7l5.8,5.2a.5.5,0,0,1,0,.7H638l-.4-.2-6.9-6.2a.7.7,0,0,1,0-.9Z" transform="translate(-0.5 0.2)" fill="#b9cbd8" opacity="0.31"/>
    </g>
    <g id="bloops">
      <ellipse id="blooptop" cx="406.5" cy="282" rx="14" ry="13.5" fill="#ef4136"/>
      <ellipse id="bloopbottom" cx="108.5" cy="575.7" rx="14" ry="13.5" fill="#ef4136"/>
    </g>
  </g>
  <rect class="radio" width="100" height="150" fill="#BACDD8" x="550" y="350" />
</svg>
</section>
              
            
!

CSS

              
                $lt: #E4ECF1;
$md: #BACDD8;
$dk: #91AEC0;

// body {
//   background: orangered;
// }

.browser {
  z-index: -1;
}

section {
  position: absolute;
  top: 0;
}

section svg {
  width: 100vw;
  height: 90vh;
}

.grid, .single, #secondplus, #thirdplus, .griddialog, .radio, #textcursor {
  visibility: hidden;
  opacity: 0;
}

              
            
!

JS

              
                const dialog = document.querySelector('#dialog');
      
function sceneOne() {
  var tl = new TimelineMax();

  tl.add('begin');
  tl.staggerFrom('.signin g', 0.7, {
    autoAlpha: 0, 
    ease: Sine.easeOut
  }, -0.1);
  tl.to('.inibutton', 0.2, {
    scale: 1.05,
    opacity: 0.8,
    transformOrigin: '50% 50%',
    ease: Sine.easeOut
  }, "begin+=1.5");
  tl.to('.inibutton', 0.2, {
    scale: 1,
    opacity: 1,
    transformOrigin: '50% 50%',
    ease: Sine.easeIn
  });
  tl.to('.initial', 0.2, {
    autoAlpha: 0,
    ease: Sine.easeIn
  });
  //component grid
  tl.to('.grid', 0.2, {
    autoAlpha: 1,
    ease: Sine.easeOut
  });
  tl.fromTo('#griddialog', 0.6, {
    x: -50,
    scale: 0.97,
    autoAlpha: 0
  }, {
    autoAlpha: 1,
    x: -50,
    scale: 1,
    transformOrigin: '50% 50%',
    ease: Power4.easeOut
  });
  tl.staggerFromTo('.grid g:not(#griddialog)', 0.6, {
    autoAlpha: 0, 
    scale: 0.9
  }, {
    autoAlpha: 1,
    scale: 1,
    transformOrigin: '50% 50%',
    ease: Power4.easeOut
  }, 0.03, "-=0.6");
  //end grid
  tl.staggerTo('.grid g:not(.darker)', 0.6, {
    autoAlpha: 0, 
    scale: 0.9,
    transformOrigin: '50% 50%',
    ease: Power4.easeIn
  }, 0.03, 'begin+=4');
  tl.to('.darker', 0.5, {
    scale: 0.25,
    y: 170,
    x: 120,
    autoAlpha: 0,
    transformOrigin: '0% 0%',
    ease: Power4.easeOut
  }, 'begin+=4.8');
  tl.fromTo('.single', 0.2, {
    autoAlpha: 0
  }, {
    autoAlpha: 1,
    ease: Sine.easeOut
  }, 'begin+=5');

  return tl;
}

function sceneTwo() {
  var tl = new TimelineMax();

  tl.add('single');
  tl.call( dialogPlace(tl, -480, -200, '+=0', '+=1') );
  tl.fromTo('#blooptop, #bloopbottom', 0.5, {
    opacity: 0,
    scale: 0
  }, {
    opacity: 0.4,
    scale: 1,
    transformOrigin: '50% 50%',
    repeat: 4, 
    yoyo: true,
    ease: Power4.easeInOut
  }, 'single+=2');
  tl.to('#blooptop, #bloopbottom', 1, {
    opacity: 0,
    scale: 0,
    transformOrigin: '50% 50%',
    ease: Power4.easeIn
  }, 'single+=4');
  tl.fromTo('#secondplus', 0.2, {
    autoAlpha: 0,
    scale: 0.9
  }, {
    autoAlpha: 1,
    scale: 1,
    transformOrigin: '50% 50%',
    ease: Power4.easeOut
  }, 'single+=2');
  tl.to('#secondplus', 0.2, {
    autoAlpha: 0,
    scale: 0.9,
    transformOrigin: '50% 50%',
    ease: Power4.easeIn
  }, 'single+=4.5');
  tl.call( dialogPlace(tl, -50, 0, '+=2.5', '+=4.5') );
  tl.fromTo('.radio', 0.2, {
    autoAlpha: 0
  }, {
    autoAlpha: 1,
    ease: Power4.easeOut
  }, 'single+=5');
  tl.to('.radio', 0.2, {
    autoAlpha: 0,
    ease: Power4.easeIn
  }, 'single+=7');
  tl.call( dialogPlace(tl, -350, 0, '+=5', '+=7') );
  
  tl.call( dialogPlace(tl, -480, -200, '+=7.5', '+=9.5') );
  tl.fromTo('#blooptop, #bloopbottom', 0.5, {
    opacity: 0,
    scale: 0
  }, {
    opacity: 0.4,
    scale: 1,
    transformOrigin: '50% 50%',
    repeat: 4, 
    yoyo: true,
    ease: Power4.easeInOut
  }, 'single+=7.5');
  tl.to('#blooptop, #bloopbottom', 1, {
    opacity: 0,
    scale: 0,
    transformOrigin: '50% 50%',
    ease: Power4.easeIn
  }, 'single+=9.5');
  tl.fromTo('#secondplus', 0.2, {
    autoAlpha: 0,
    scale: 0.9
  }, {
    autoAlpha: 1,
    scale: 1,
    transformOrigin: '50% 50%',
    ease: Power4.easeOut
  }, 'single+=7.5');
  tl.to('.away-y', 0.2, {
    autoAlpha: 0
  }, 'single+=6.5');
  tl.to('#secondplus', 0.2, {
    autoAlpha: 0,
    scale: 0.9,
    transformOrigin: '50% 50%',
    ease: Power4.easeIn
  }, 'single+=9.5');

  return tl;
}

function sceneThree() {
  var tl = new TimelineMax();

  tl.add('single2');
  tl.call( dialogPlace(tl, -480, -200, '2+=0.5', '2+=2') );
  tl.to('.text2, .text3, .text2extra', 0.2, {
    autoAlpha: 0,
    ease: Power4.easeInOut
  }, 'single2');
  tl.to('#firsttab', 0.5, {
    opacity: 0.28,
    ease: Power4.easeInOut
  }, 'single2');
  tl.to('#secondtab', 0.5, {
    opacity: 1,
    ease: Power4.easeInOut
  }, 'single2');
  tl.to('#textcursor', 0.2, {
    autoAlpha: 1,
    ease: Power4.easeInOut
  }, 'single2');
  tl.to('#textcursor', 0.3, {
    x: -220,
    y: -80,
    ease: Circ.easeInOut
  }, 'single2+=0.2');
  tl.to('.text2', 1.5, {
    autoAlpha: 1,
    ease: Power4.easeOut
  }, 'single2+=0.5');
  tl.to('#textcursor', 1, {
    x: -150,
    ease: Sine.easeInOut
  }, 'single2+=0.5');
  //autotype
  tl.to('#textcursor', 0.2, {
    autoAlpha: 0,
    ease: Sine.easeInOut
  }, 'single2+=2');
  tl.to('#secondtab', 0.5, {
    opacity: 0.28,
    ease: Power4.easeInOut
  }, 'single2+=2.2');
  tl.to('#thirdtab', 0.5, {
    opacity: 1,
    ease: Power4.easeInOut
  }, 'single2+=2.2');
  tl.fromTo('.text1', 0.2, {
    autoAlpha: 1,
    scale: 1
  }, {
    autoAlpha: 0,
    scale: 0,
    ease: Power4.easeIn
  }, 'single2+=1.9');
  tl.to('.text2', 0.2, {
    autoAlpha: 0,
    ease: Power4.easeIn
  }, 'single2+=1.9');
  tl.call( dialogPlace(tl, 0, 0, '2+=2.4', '2+=4.5') );
  tl.to('.text1', 0.5, {
    autoAlpha: 1,
    scale: 1,
    transformOrigin: '0% 50%',
    y: 30,
    ease: Power4.easeOut
  }, 'single2+=2.4');

  return tl;
}

function sceneFour() {
  var tl = new TimelineMax();

  tl.add('single3');
  //jump back to data tab
  tl.call( dialogPlace(tl, -480, -200, '3', '3+=2') );
  tl.to('#firsttab', 0.5, {
    opacity: 1,
    ease: Power4.easeInOut
  }, 'single3');
  tl.to('#thirdtab', 0.5, {
    opacity: 0.28,
    ease: Power4.easeInOut
  }, 'single3');
  tl.to('.text2, .text3, .text2extra', 0.2, {
    autoAlpha: 1,
    ease: Power4.easeInOut
  }, 'single3');
  tl.fromTo('#bloopbottom', 0.3, {
    opacity: 0,
    scale: 0
  }, {
    opacity: 0.4,
    scale: 1,
    transformOrigin: '50% 50%',
    repeat: 5, 
    yoyo: true,
    ease: Circ.easeInOut
  }, 'single3+=0.5');

  return tl;
}

var master = new TimelineMax();
master.add(sceneOne(), "scene1");
master.add(sceneTwo(), "scene2");
master.add(sceneThree(), "scene3");
master.add(sceneFour(), "scene4", "-=0.5");

master.seek('scene2');

// // create the player
// gsapPlayer({
//   playerTL: master,
//   fullWidth: true,
//   light: true,
//   bottom: '0'
// });

//helper functions
function dialogPlace(tl, x, y, start, end) {
  tl.fromTo(dialog, 0.25, {
    opacity: 0,
    scale: 0.9,
    x: x,
    y: y
  }, {
    opacity: 1,
    scale: 1,
    x: x,
    y: y,
    transformOrigin: '50% 50%',
    ease: Sine.easeOut
  }, 'single' + start);
  tl.to(dialog, 0.25, {
    opacity: 0,
    scale: 0.9,
    transformOrigin: '50% 50%',
    ease: Sine.easeIn
  }, 'single' + end);
  
  return tl;
}
              
            
!
999px

Console