Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

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

+ add another resource

Packages

Add Packages

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

Behavior

Save Automatically?

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

Auto-Updating Preview

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

Format on Save

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                        <div class="hint">click safari</div>
        <div class="socials-container">
          <!-- codepen -->
          <a class="social-link" target="_blank" href="https://codepen.io/lukes611">
            <div class="social-wrapper codepen">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.95 78.95">
                <title>codepen</title>
                <g id="codepen">
                  <path id="code-pen-3" d="M12.66,30.35l26.5-17.51a.82.82,0,0,1,.9,0L66.41,30.48a.16.16,0,0,1,0,.26l-27,17.71L12.66,30.87A.31.31,0,0,1,12.66,30.35Z" style="fill:none;stroke:#c1272d;stroke-miterlimit:10;stroke-width:2px" />
                  <path id="code-pen-2" d="M12.26,48.26V30.91a.56.56,0,0,1,.25-.46L39.25,12.78a.23.23,0,0,1,.36.19l-.18,17.52L66.57,48.42a0,0,0,0,0,0,0V30.94a.17.17,0,0,0-.27-.15L39.43,48.45V66a.22.22,0,0,1-.34.19L12.42,48.55A.34.34,0,0,1,12.26,48.26Z" style="fill:none;stroke:#c1272d;stroke-miterlimit:10;stroke-width:2px" />
                  <path id="code-pen-1" d="M12.58,48.14,39.29,30.65a.38.38,0,0,1,.41,0L66.52,48.24a.36.36,0,0,1,0,.61L39.57,66.18a.36.36,0,0,1-.4,0L12.58,48.76A.37.37,0,0,1,12.58,48.14Z" style="fill:none;stroke:#c1272d;stroke-miterlimit:10;stroke-width:2px" />
                </g>
              </svg>
            </div>
          </a>

          <!-- twitter -->
          <a class="social-link" target="_blank" href="https://twitter.com/Lukes611">
            <div class="social-wrapper twit">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.95 78.95">
                <title>twitter</title>
                <g id="twitter">
                  <path id="twitter-icon" d="M39.66,28.54a.52.52,0,0,0,.51-.57c-.17-2.24-.31-10.75,7.29-14.3a14.25,14.25,0,0,1,16.22,2.5.51.51,0,0,0,.48.16,41.73,41.73,0,0,0,6.67-2.18.72.72,0,0,1,.93,1,14.81,14.81,0,0,1-3.23,4.19.52.52,0,0,0,.44.91c1.08-.21,2.39-.5,3.47-.81a.58.58,0,0,1,.6.94c-1.48,1.8-3.75,4.34-5.13,5.06a.49.49,0,0,0-.29.43c-.1,2.39-.81,18.35-9.29,26.94-8.91,9-24.37,20.73-49.2,9a.52.52,0,0,1,.19-1c3.67-.21,11.33-1.06,16.45-4.52A.75.75,0,0,0,25.51,55c-2.86-.7-8.55-3-10.64-8.8a.53.53,0,0,1,.55-.69c.65.06,1.62.12,2.55.13a.71.71,0,0,0,.36-1.32c-3.12-1.71-8.41-5.65-8.72-12a.52.52,0,0,1,.7-.51,32.7,32.7,0,0,0,3.19,1,.64.64,0,0,0,.59-1.08c-2.44-2.35-6.44-7.83-2.87-16.42a.54.54,0,0,1,.9-.13C14.47,18,24.45,28.89,39.66,28.54Z" style="fill:none;stroke:#c1272d;stroke-miterlimit:10;stroke-width:2px" />
                </g>
              </svg>
            </div>
          </a>

          <!-- instagram -->
          <a class="social-link" target="_blank" href="https://www.instagram.com/sip.wave/">
            <div class="social-wrapper insta">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.95 78.95">
                <title>insta</title>
                <g id="insta">
                  <rect id="insta-rect" x="10.03" y="10.66" width="58.89" height="57.64" rx="14.16" style="fill:none;stroke:#c1272d;stroke-miterlimit:10;stroke-width:2px" />
                  <circle id="insta-circ" cx="39.47" cy="41.08" r="12.93" style="fill:none;stroke:#c1272d;stroke-miterlimit:10;stroke-width:2px" />
                  <circle id="insta-circ-2" cx="57.2" cy="22.78" r="3.38" style="fill:none;stroke:#c1272d;stroke-miterlimit:10;stroke-width:2px" />
                </g>
              </svg>
            </div>
          </a>
        </div>

        <svg id="woman" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 505.12 1304.22">
          <defs>
            <clipPath id="clip-path">
              <polygon points="81.08 481.05 78.65 348.32 135.46 352.49 137.88 485.22 81.08 481.05" style="fill:none" />
            </clipPath>
          </defs>
          <g id="body">
            <path id="left-leg" d="M20.93,973.44s-76.29,62.22-92.59,90.37-25.92,47.4-45.92,96.29-96.52,199.13-96.52,199.13,47.64,23.93,66.69,12c1.19-3.57,132.17-222.67,131-226.24s196.48-64.31,215.53-97.65S20.93,973.44,20.93,973.44Z" style="stroke:#f2ff7f;stroke-miterlimit:10" />
            <path id="right-leg" d="M-44.13,939.49s216.22,161.08,325.51,140.76,178-58.15,158.33-185c-7-35-51.3-84-51.3-84L210.17,815,154,886.43l-169.58-62s-77.23-42-111.56,45.77-127.21,254.08-136.36,258c0,1.31,20.91,36.46,57.51,26.73,0,.72,129.46-94.18,158.84-213Z" style="stroke:#f2ff7f;stroke-miterlimit:10" />
            <g id="leg-crease">
              <path d="M154.1,886.21c14.92,4.17,29.65,8.93,44.33,13.88s29.24,10.18,43.68,15.77q10.83,4.21,21.52,8.74t21.15,9.62c7,3.38,13.81,7,20.43,11,.83.51,1.66,1,2.48,1.52l2.43,1.6c.8.53,1.62,1,2.41,1.61l2.35,1.71a61.11,61.11,0,0,1,8.73,7.65h0a101.6,101.6,0,0,0-18.54-13.84c-6.62-4-13.48-7.6-20.44-11s-14-6.51-21.16-9.54-14.31-5.88-21.53-8.66c-14.45-5.54-29-10.71-43.72-15.62q-11-3.68-22.08-7.16c-7.37-2.36-14.77-4.61-22.16-6.91Z" style="fill:#f2ff7f" />
            </g>
            <path id="left-arm" d="M87,450.64l20,21.29-17.31,22.4c-16,91.25,24.3,137.84,24.3,137.84A539.58,539.58,0,0,1,149,559.05l20.52-11.53,53.94,5.16s-26.34,44.77-33.64,77.09-55.48,79.85-62.3,87.1-32,9.38-61.39-10.66S45.62,568.49,46.47,563.38,51.38,496.1,58.24,472V460.35Z" style="stroke:#f2ff7f;stroke-miterlimit:10" />
            <path id="dark-top" d="M273,434.3l-3.94,16.06c-.09.39-1.29.77-1.65.91-5.75,2.17-52.37,19.52-59.65,35.09a1.22,1.22,0,0,0-.05.84c1.51,4.85,13.78,51.55,13.14,52.83s-24.52,51.2-25.58,53.41a1,1,0,0,1-.08.14c-.78,1.17-11.56,18.78-1.74,87.53,10.19,71.29,15.28,64.74,16.73,133.85,0,.73,91.85,36.17,177.47-3.28a1.19,1.19,0,0,0,.69-1.2c-.87-9.17-8.44-90.35,15-113.77,24-24,1.05-124.55-.29-130.29a1.23,1.23,0,0,1,0-.54c.63-2.62,6.26-22,33.26-11.2.73,2.18,1.62-40.4-33.3-55.68-34.68-15.18-28.07-29.26-43.49-68.95a1.19,1.19,0,0,0-1.17-.76l-85.39,4C272.4,433.27,273.11,433.78,273,434.3Z" style="stroke:#f2ff7f;stroke-miterlimit:10" />
            <path id="highlighted-pink-top" d="M267.4,576.7l46.77-8.47c-3.22-29,88.78-2.06,88.78-2.06s-20.91-32.69,8-21.08c.73,2.18,42.92-50.22,8-65.5s-44-10-59.79-50.34l-87.14,4-4.1,17.15s-50.54,11.13-85.73,54.07c-10.13,12.36-16.25,25.1-33.37,54.54,0,0,38.68-11.11,56.71,13.72l-9.34,20C211.23,582.35,267.4,576.7,267.4,576.7Z" style="fill:#ff3fa6" />
            <path id="highlighted-yellow-top" d="M455.86,511.72c-36.59-51.66-77.11-33-96.69-82.47L333,430.46s-15.29,9.9-17.76,15.19c1.7,45-26.34,90.8-47.79,131.05,42.83-3.51,94.89,38.44,144.86,44.07,0,0,39.26,5.29,43.6-4.78C469.81,583.54,482.26,555.89,455.86,511.72Z" style="fill:#f2ff7f" />
            <g id="arm-crease">
              <path d="M114.33,632c2.13,3.27,4.27,6.55,6.5,9.76q1.69,2.4,3.51,4.69a21.26,21.26,0,0,0,4.13,4.13h0A19.92,19.92,0,0,1,124,646.7c-1.32-1.46-2.54-3-3.74-4.56a105.07,105.07,0,0,1-6.59-9.77Z" style="fill:#f2ff7f" />
            </g>
            <path id="right-under-arm" d="M374.83,611.11s-4.66-4.43,30.15-51.22c-1.62,3.39-1.84,3.75-1.84,3.75-2.65,13.7-18.89,43-18.89,43l-3.34,7.09Z" style="opacity:0.49" />
            <path id="left-sleeve-outline" d="M205.3,572.46s-13.77-23.3-56.47-13.38" style="fill:none;stroke:#f2ff7f;stroke-miterlimit:10" />
            <path id="arm-pit" d="M205.82,572.24l9.79-18.17-6.43-6.55s-3.26,12.8-5.22,22.42A14,14,0,0,1,205.82,572.24Z" style="opacity:0.49" />
          </g>
          <g id="hair-wrapper">
            <path id="black-hair-bg" d="M171.3,426.34c2.57,2.06,12.44-4.36,12.44-4.36s3.35,15,16.55,23.67c.33.23,1.69-13.14,9.47-14.41.34-.24,9.33,14,18.19,14.51.41.47,5.82-15.77,13.94-11.37,1,.68,14.14,11.27,14.14,11.27l12-14.41,23.63-13.45s43.37-23.15,56.16-4.31,47.12,14.13,47.12,14.13c-12.95-4.68-10.77-24.23-10.77-24.23l19.51,5.39-4-20.19c11.44,12.11,33.65,8.75,33.65,8.75l-9.42-12.79c12-3.16,23.55,5.38,23.55,5.38L442,369.06l26.25,11.44c7.05-5.56-.68-25.57-.68-25.57,10.09-2.73,31,10.76,31.64,10.76-23.5-95.48-65.93-160.7-134.51-191.14-47.27-17.65-76.39-18.55-104-15.63C133,177.68,90,345.94,171.3,426.34Z" style="fill:#ff3fa6" />
            <path id="black-hair" d="M166.76,426.34c2.57,2.06,12.45-4.36,12.45-4.36s3.34,15,16.54,23.67c.33.23,1.69-13.14,9.47-14.41.34-.24,9.33,14,18.2,14.51.4.47,5.82-15.77,13.93-11.37,1,.68,14.14,11.27,14.14,11.27l12-14.41,23.62-13.45s43.38-23.15,56.16-4.31,47.12,14.13,47.12,14.13c-12.95-4.68-10.77-24.23-10.77-24.23l19.52,5.39-4-20.19c11.44,12.11,33.65,8.75,33.65,8.75l-9.42-12.79c12-3.16,23.55,5.38,23.55,5.38l-5.38-20.86,26.25,11.44c7.06-5.56-.68-25.57-.68-25.57,10.1-2.73,31,10.76,31.64,10.76C471.2,270.21,428.78,205,360.19,174.55c-47.27-17.65-76.39-18.55-104-15.63C128.47,177.68,85.48,345.94,166.76,426.34Z" style="stroke:#f2ff7f;stroke-miterlimit:10" />
            <path id="bottom-right-yellow-hair" d="M430.51,271.39a33,33,0,0,0-25.94-8.81s4.26,15-2.86,20.4c-11.86-6.12-25.25-5.37-25.25-5.37s9.7,13.69,6.92,17.48c-8.38-6.71-19.57-.35-20.06,11.45-4.48-19.84-24.51-10.17-24.51-10.17s-4.57-33.36-24.23-50c0,0,17.05-4,29.83,5.1,2.55-7-6.33-15.9-6.33-15.9s13.63-2.17,18.33,3.46c6.9-5.72-.35-19.37-.35-19.37s13.92.61,15.16,6.39c4.34-.23,5.1-14.5,2-24.71C418.88,216.66,430.33,254,430.51,271.39Z" style="fill:#f2ff7f" />
            <path id="bottom-right-pink-hair" d="M479.86,339.76s-15.66,2.15-21.46-5.36c-15.39,4.05-7.08,21.29-7.08,21.29s-22.76-8.57-28.32-4.41l2.48,21.41s-16.66-.36-28-9.38c-5.71,6.45,5.31,13.62,5.31,13.62a29.13,29.13,0,0,1-20.53,0c-2.57,2.57,0,14.52,0,14.52l-12.75-3.9c-5.81,6-5.39,27.21-5.39,27.21s-16.57-33.56-19.74-63.48c4.73-9.37,16.78-.37,19.82-4.44,2.61-3.47-1.06-17.34-1.06-17.34s16.29,5.69,20.18,2.43c-3.8-6.23,1.06-19.31,1.06-19.31s19.92,8.45,23.37,3.64c-9.26-4.95-9.92-19-9.92-19s17.71,6.61,21.6,2.8c-11.3-4.47-2.83-25.81-2.83-25.81s11.54,16.75,19.87,7.91c4.72-4.28,2.53-26.48,2.53-26.48S465.52,282.75,479.86,339.76Z" style="fill:#ff3fa6" />
            <path id="right-center-hair-line" d="M244.63,226.09s35.18-25,52.09-5.89l-8.91-12.47s31.6-1.33,35.16,14.69C323,222.42,304.8,161,244.63,226.09Z" style="fill:#f2ff7f" />
            <path id="pink-top-hair-line" d="M237.35,189.66s3.28-25.11,23-23.91c0,0-14.24,9.42-8.61,11.93,0,0,7.45-.86,11.09,0A39.09,39.09,0,0,0,237.35,189.66Z" style="fill:#ff3fa6" />
            <path id="left-hair-line-top" d="M202.29,207.23s-19.34,4.3-20.87,15.34c0,0-7.37-5.21,0-16.87-.31,0-6.1-3.51-8.88,4.38" style="fill:none;stroke:#f2ff7f;stroke-miterlimit:10" />
            <path id="medium-left-pink" d="M131.38,296.47l14.5-8.07,5.23,5.19,9-5.19,5.08,5.94,1.58-12.62-5.21,2.18-8.7-11.32L151.69,282l-15.34-9.43C132.29,281.74,131.38,296.47,131.38,296.47Z" style="fill:#ff3fa6" />
            <path id="bottom-left-yellow" d="M151,352.81c1.89,3.21,2.32,7.26,13.95,5,0,0,.36,12.92,16.3,26.55,0,0-14.77-.78-17.8-4-.2-.1,1.21,15.79,4.45,16.6.1-.1-9.41-1.41-11.13-3.54,0,.2-2.63,9.72,0,12.25.1.3-22.77-30.06-22.07-56.78.11.3,7.06,18,12.17,14.87C144.87,362.26,149.37,358.92,151,352.81Z" style="fill:#f2ff7f" />
          </g>
          <g id="face-wrapper">
            <path id="pink-face" d="M173.41,263.37s8.56-45.94,40.48-35.82,21.81,9.34,35.82,4.67,37.37-3,48.27,12.51,25.7,56,25.7,64.58l7.51,1.72s8.56-14.51,17.49-13,15.62,17.49,8.55,29.4-14.88,14.88-24.55,13c.37.37,27.51,92.28,27.51,92.28s-45.74,27.53-88.53,2.6c.37,0,3.34-27.16,3.34-27.16s-27.9,13.39-38.69,13.76-16-.74-21.58-3.34-39.81-48.75-39.81-48.75-10.13-9.69-7.82-45.76C172.31,287.22,166.69,300.16,173.41,263.37Z" style="fill:#ff3fa6" />
            <path id="neck-shadow" d="M275,408.15s37.68-15,39.43-22.77c0,.15,4.83,24.89-41.44,40.45Z" style="opacity:0.3" />
            <path id="face-shadow" d="M228.35,403.07c-5.65-8.32-7.18-10.69-8.37-17.69s-1.8-22.07-1.8-22.07l-5.52-3.62.54-2.39,5-5S226.35,305,223.42,272c-2.44-27.39,1-35,4.39-39.87-3.46-1.18-7.95-2.69-13.92-4.58-31.92-10.12-40.48,35.82-40.48,35.82-6.72,36.79-1.1,23.85-6.31,60.69-2.31,36.07,7.82,45.76,7.82,45.76s34.23,46.14,39.81,48.75c4.72,2.2,9.19,3.33,17,3.41l.74-.55S234,411.4,228.35,403.07Z" style="fill:#f2ff7f" />
            <g id="nose">
              <path d="M218.24,351.3a7.05,7.05,0,0,1-1.28,4.5,7.93,7.93,0,0,1-1.6,1.91,4.06,4.06,0,0,1-2.63,1.07l.84-1.38h0c.26.54.57,1.14.87,1.69a18.38,18.38,0,0,0,1,1.61,6.15,6.15,0,0,0,1.23,1.35,13.28,13.28,0,0,0,1.49,1v.52a2.6,2.6,0,0,1-2.3-.32,7.44,7.44,0,0,1-1.75-1.43,12.88,12.88,0,0,1-2.37-3.64h0l-.55-1,1.39-.39a3.39,3.39,0,0,0,1.33-.78,9.55,9.55,0,0,0,1.34-1.41,19.86,19.86,0,0,1,2.86-3.35Z" />
            </g>
            <path id="mouth" d="M212.66,382.86l20.62-2s11.95.31,13.52,4.47-8.89,2.19-14.91,3.28a124.09,124.09,0,0,1-15,1.31Z" />
            <path id="right-ear-section" d="M315.18,445.67c26.93-.9,45-13,45-13s-27.14-91.91-27.51-92.28c9.67,1.86,17.49-1.12,24.55-13s.38-27.91-8.55-29.4-17.49,13-17.49,13l-7.51-1.72c0-8.57-14.79-49.06-25.7-64.58a30.1,30.1,0,0,0-6.31-6.57C297.64,264,319.31,364.46,315.18,445.67Z" style="fill:#f2ff7f" />
            <path d="M271,431.64s27.78,29.28,95.07-.91l.62,1.8s-66.49,31-96.16.48Z" style="opacity:0.24" />
          </g>
          <g id="eyes">
            <g id="left-arch">
              <path d="M212.34,313a95.44,95.44,0,0,0-9.43-4.95,44.79,44.79,0,0,0-9.76-3.31,23.31,23.31,0,0,0-9.73-.07,21.5,21.5,0,0,0-4.57,1.67,37.1,37.1,0,0,0-4.39,2.81l-.77-.63a15.35,15.35,0,0,1,3.52-4.54,16,16,0,0,1,5.13-3,20.91,20.91,0,0,1,11.7-.22,36.28,36.28,0,0,1,10.37,4.48,41.37,41.37,0,0,1,8.58,7Z" />
            </g>
            <g id="right-arch">
              <path d="M251.1,312.83a16.93,16.93,0,0,1,4.27-5.1,21.4,21.4,0,0,1,5.84-3.44,25.07,25.07,0,0,1,13.46-1.23A36.36,36.36,0,0,1,287,307.74a45.71,45.71,0,0,1,10,8.13l-.61.79c-3.76-1.94-7.4-3.88-11.14-5.43a48.54,48.54,0,0,0-11.36-3.33,28.7,28.7,0,0,0-22,5.54Z" />
            </g>
            <ellipse id="left-ball" cx="191.3" cy="319.64" rx="8.74" ry="12.29" />
            <ellipse id="riight-ball" cx="262.19" cy="323.82" rx="8.74" ry="13.14" />
          </g>
          <g id="brows">
            <path id="left" d="M171.39,291.92s31-8.81,40.34-4.54c4.61-.53,9.39-8.26-.72-9.45s-38.16.93-38.22,6.33S166.41,291.65,171.39,291.92Z" />
            <path id="right" d="M296.57,293.59S266,283.29,256.5,287.1c-4.58-.75-9-8.7,1.17-9.4s38.07,2.77,37.87,8.17S301.56,293.56,296.57,293.59Z" />
          </g>
          <g id="phone">
            <path id="front" d="M83.11,328.88l54.47.48A10.3,10.3,0,0,1,147.77,339L158,505.5a10.3,10.3,0,0,1-12.28,10.73L91.06,505.4A10.3,10.3,0,0,1,82.78,496l-10-156.12A10.31,10.31,0,0,1,83.11,328.88Z" style="stroke:#f2ff7f;stroke-miterlimit:10" />
            <path id="back" d="M78.2,329.05l54.47.47a10.3,10.3,0,0,1,10.19,9.67l10.21,166.47a10.29,10.29,0,0,1-12.28,10.73L86.15,505.56a10.3,10.3,0,0,1-8.28-9.44L67.84,340A10.28,10.28,0,0,1,78.2,329.05Z" style="stroke:#f2ff7f;stroke-miterlimit:10" />
            <polygon id="phone-p1" points="145.68 360.15 146.66 373.3 149.26 373.01 148.45 359.75 145.68 360.15" style="stroke:#a2ab55;stroke-miterlimit:10;stroke-width:0.75px" />
            <polygon id="phone-p2" points="146.9 375.16 147.88 388.31 150.48 388.02 149.67 374.76 146.9 375.16" style="stroke:#a2ab55;stroke-miterlimit:10;stroke-width:0.75px" />
          </g>
          <g id="safari-log">
            <g style="isolation:isolate">
              <g style="clip-path:url(#clip-path)">
                <path d="M115.67,406.66l-8.43,6.12-5.78,9,8.43-6.12,5.78-9m-6.91,19.94c-6.12-.45-11.18-6.36-11.31-13.21s4.73-12,10.86-11.57,11.2,6.36,11.32,13.2-4.74,12-10.87,11.58m-.47-25.67c-6.53-.48-11.74,5.07-11.6,12.38s5.55,13.63,12.09,14.11,11.75-5.05,11.61-12.37-5.55-13.64-12.1-14.12" id="safari-clip" style="fill:#323232" />
                <path d="M101.46,421.82l5.78-9,8.43-6.12-5.78,9-8.43,6.12m6.85-20c-6.13-.45-11,4.73-10.86,11.57s5.19,12.76,11.31,13.21,11-4.73,10.87-11.58-5.19-12.75-11.32-13.2" />
                <path d="M108.78,427.42c-6.54-.48-12-6.79-12.09-14.11s5.07-12.86,11.6-12.38,12,6.81,12.1,14.12-5.07,12.85-11.61,12.37m22.37-75.25L78.7,350.78l7.64,130.65,51.54,3.79-6.73-133" />
              </g>
            </g>
          </g>
          <g id="arms-1">
            <path id="right-arm" d="M455.86,616c-26.71-22.21-69.62-9.76-69.62-9.76L403,566.16s-25.51,70.35-64.26,108.08c0,.34-64.58-78.84-78.51-108.08s-42.83-75.46-46.91-78.86-23.58-44.18-23.58-44.18-9.15-8.82-20.71-12.56-25.77-7.68-25.77-7.68-8.16-1.63-11.11,3.92S120.68,439.22,122,444.12,132.11,448,132.11,448s-6.81,4.9-6.34,9.15-.52,14.71,3.4,17l14.23,10.93c7.18,3.92,37.74,22.52,41,27.42s10,9,15.3,23,63.71,143,89.37,176.77S325,746,325,746s22,9.53,44-10.27,57.18-57.91,66.71-78.43c4.91-10.58,12.67-23.83,20.17-41.3" style="stroke:#f2ff7f;stroke-miterlimit:10" />
            <path id="left-hand" d="M55.64,483.94s-6.26-34.29,2.6-50.37c4.69-8.53,15.15-16.11,22.08-15.8,3.72.16,25.09-3,29.66,6.16,3.94,7.92-1,20.28-1.42,23-1,5.9-9.66,11.55-19.14,14.86-7.35,2.55-15.43,11.07-14.11,19.14" style="stroke:#f2ff7f;stroke-miterlimit:10" />
          </g>
          <g id="Layer_12" data-name="Layer 12">
            <polygon id="pink-face-box" points="207.55 219.31 212.66 464.38 337.18 460.37 325.93 219.31 207.55 219.31" style="fill:#7ff6ff;opacity:0.41000000000000003" />
            <polygon id="right-ear-section-box" points="266.88 235.42 310.23 461.24 400.48 438.6 353.58 216.05 266.88 235.42" style="fill:#7ff6ff;opacity:0.41000000000000003" />
            <polygon id="shirt-box" points="199.71 373.3 128.47 579.85 446.93 668.95 515.88 461.24 199.71 373.3" style="fill:#ff3fa6;opacity:0.25" />
            <polygon id="face-shadow-box" points="143.53 210.41 173.2 439.35 257.78 427.56 229.81 196.19 143.53 210.41" style="fill:#ff3fa6;opacity:0.25" />
            <polygon id="bottom-right-pink-hair-box" points="306.26 340.28 366.66 429.29 505.12 326.84 441.81 238.16 306.26 340.28" style="fill:#ff3fa6;opacity:0.25" />
            <polygon id="bottom-right-yellow-hair-box" points="293.06 242.52 361.35 340.28 459.21 262.54 382.71 178.93 293.06 242.52" style="fill:#ff3fa6;opacity:0.25" />
            <polygon id="right-center-hair-line-box" points="237.34 238.16 330.98 224.35 325.93 180.58 233.4 196.19 237.34 238.16" style="fill:#ff3fa6;opacity:0.25" />
            <polygon id="pink-top-haiir-line-box" points="239.78 198.94 272.99 179.64 260.73 158.92 225.56 177.68 239.78 198.94" style="fill:#ff3fa6;opacity:0.25" />
            <polygon id="medium-left-pink-box" points="174.08 272.58 125.38 267.02 120.9 301.7 166.76 305.1 174.08 272.58" style="fill:#ff3fa6;opacity:0.25" />
            <polygon id="bottom-left-yellow-box" points="118.52 363.31 154.07 411.78 191.3 385.38 154.91 340.28 118.52 363.31" style="fill:#ff3fa6;opacity:0.25" />
            <polygon onclick="togglePattern()" id="safari-box" points="83.78 417.6 111.58 439.96 132.88 411.85 104.76 390.77 83.78 417.6" style="fill:#ff3fa6;opacity:0.25" />
            <polyline id="safari-pointer" points="100.43 422.41 110.14 415.56 107.19 412.8" style="fill:#262626;opacity:0.38" />
          </g>
        </svg>
              
            
!

CSS

              
                body {
  margin: 0;
  background-color: black;
  color: white;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#woman {
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  animation-duration: 500ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes loading {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.socials-container {
  position: absolute;
  top: 0;
  left: 0;
  padding: 16px;
  z-index: 100;
  display: grid;
  grid-auto-flow: rows;
  grid-gap: 12px;
}

.social-link {
  cursor: pointer;
}

.social-wrapper {
  width: 50px;
  height: 50px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  position: relative;
  animation-name: social-anim;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-duration: 600ms;
  animation-delay: 1200ms;
  opacity: 0;
  animation-fill-mode: forwards;
}

@media (max-width: 600px) {
  .social-wrapper {
    width: 30px;
    height: 30px;
  }
}

.twit {
  animation-delay: 1400ms;
}
.insta {
  animation-delay: 1600ms;
}

.social-wrapper > svg {
  width: 100%;
  height: auto;
}

@keyframes social-anim {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.hint {
  position: fixed;
  top: 16px;
  left: calc(50% - 100px);
  padding: 8px;
  width: 150px;
  background-color: black;
  text-align: center;
  z-index: 200;
  border-radius: 20px;
  font-family: helvetica;
  font-size: 14px;
  animation-name: hint-anim;
  animation-duration: 4s;
  animation-delay: 6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes hint-anim {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  40% {
    opacity: 0.8;
    transform: translateY(0px);
  }
  60% {
    opacity: 0.8;
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px);
  }
}

              
            
!

JS

              
                const Colors = (() => {
  // main
  const main = {
    primary: "#ff3388",
    secondary: "#33bbff"
  };

  // original
  const original = {
    primary: "#ff3fa6",
    secondary: "#f2ff7f"
  };

  // pg
  const pg = {
    primary: "#FF3388",
    secondary: "#33FFAA"
  };

  // goldBlue
  const goldBlue = {
    primary: "#465CFA",
    secondary: "#FAE446"
  };

  // pink
  const pink = {
    primary: "#DC1A93",
    secondary: "#E841A9"
  };

  let color = main;
  const rand = Math.floor(Math.random() * 1000);
  const colorVariantToRange = new Map([
    [original, [0, 5]],
    [pg, [5, 8]],
    [goldBlue, [8, 80]],
    [pink, [80, 82]]
  ]);
  for (let [variant, range] of colorVariantToRange) {
    if (rand >= range[0] && rand < range[1]) color = variant;
  }

  return {
    bg: "#000000",
    loadingColor: "#424242",
    ...color
  };
})();

class Point2D {
  constructor(x = 0, y = 0) {
    this.x = x;
    this.y = y;
  }

  mag() {
    return Math.sqrt(this.x * this.x + this.y * this.y);
  }

  scale(s) {
    return new Point2D(this.x * s, this.y * s);
  }

  unit() {
    return this.scale(1 / this.mag());
  }

  add(p2) {
    return new Point2D(this.x + p2.x, this.y + p2.y);
  }

  sub(p2) {
    return new Point2D(this.x - p2.x, this.y - p2.y);
  }

  norm() {
    return new Point2D(-this.y, this.x);
  }

  dot(p2) {
    return this.x * p2.x + this.y * p2.y;
  }
}

class ContainerBox {
  constructor(ptsIn, flippy = 0) {
    let indices = [0, 1, 2, 3];
    switch (flippy) {
      case 1:
        indices = [1, 2, 3, 0];
        break;
      case 2:
        indices = [2, 3, 0, 1];
        break;
      case 3:
        indices = [3, 0, 1, 2];
        break;
      default:
        indices = [0, 1, 2, 3];
    }
    this.points = indices.map(i => ptsIn[i]);
    this.xAx = this.points[3].sub(this.points[0]);
    this.xAxUnit = this.xAx.unit();
    this.wid = this.xAx.mag();
    this.yAx = this.points[1].sub(this.points[0]);
    this.yAxUnit = this.yAx.unit();
    this.hei = this.yAx.mag();
    this.up = this.getUp();
    this.r = this.getRotation();
  }

  makeRandomPoint(padding = 1) {
    const xs = Math.random() * (this.wid - padding * 2);
    const ys = Math.random() * (this.hei - padding * 2);
    return this.xAxUnit
      .scale(xs)
      .add(this.yAxUnit.scale(ys))
      .add(this.points[0]);
  }

  makeRandomPointAtBottom(padding = 1) {
    const xs = Math.random() * (this.wid * 1.1);
    const ys = 0.99 * this.hei + padding;
    return this.xAxUnit
      .scale(xs)
      .add(this.yAxUnit.scale(ys))
      .add(this.points[0]);
  }

  getUp() {
    return this.points[0].sub(this.points[1]).unit();
  }

  aboveBox(p) {
    const i = 3;
    const j = 0;
    const vNorm = this.points[j]
      .sub(this.points[i])
      .unit()
      .norm();
    const x = p.sub(this.points[i]);
    const y = x.dot(vNorm);
    return y > 0;
  }

  getRotation() {
    return Math.atan2(this.xAx.y, this.xAx.x);
  }
}

function darken(hexColor, scalar = 0.5, opacity) {
  const col = {
    r: parseInt(hexColor.substring(1, 3), 16),
    g: parseInt(hexColor.substring(3, 5), 16),
    b: parseInt(hexColor.substring(5), 16),
    a: opacity !== undefined ? opacity : 1
  };
  return `rgba(${col.r * scalar}, ${col.g * scalar}, ${col.b * scalar}, ${
    col.a
  })`;
}

function randomColor(minV, opacity) {
  const r = Math.random() * (255 - minV) + minV;
  const g = Math.random() * (255 - minV) + minV;
  const b = Math.random() * (255 - minV) + minV;
  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
}

function svgPolyElementToPointsList(polyElement) {
  const rv = [];
  const list = polyElement
    .getAttribute("points")
    .split(" ")
    .map(Number);
  for (let i = 0; i < list.length; i += 2) {
    rv.push(new Point2D(list[i], list[i + 1]));
  }
  return rv;
}

function createSvgElement(type, attributes) {
  const svgUrl = "http://www.w3.org/2000/svg";
  const element = document.createElementNS(svgUrl, type);
  Object.keys(attributes).forEach(k =>
    element.setAttributeNS(null, k, attributes[k])
  );
  return element;
}

function watchSize() {
  const svg = document.querySelector("#woman");

  function setOptimalSize() {
    const W = window.innerWidth;
    const H = window.innerHeight;
    // original viewBox = 0 0 1189.68 1549
    // console.log(`WH: ${Math.round(W*100/H)}`);
    if (W < H) {
      const topLeft = new Point2D(83, 50);
      const size = new Point2D(418, 630).sub(topLeft);
      const heightAdjust = H / W;
      size.y = heightAdjust * size.x;
      const midY = size.y / 2;
      topLeft.y = (630 - 50) / 1.5 - midY;

      svg.style.width = "100vw";
      svg.style.height = "auto";
      svg.setAttribute(
        "viewBox",
        `${topLeft.x} ${topLeft.y} ${size.x} ${size.y}`
      );
    } else {
      const topLeft = new Point2D(0, 146);
      const size = new Point2D(505, 629).sub(topLeft);
      const widthAdjust = W / H;
      size.x = widthAdjust * size.y;
      const midX = size.x / 2;
      topLeft.x = 505 / 2 - midX;
      svg.style.width = "auto";
      svg.style.height = "100vh";
      svg.setAttribute(
        "viewBox",
        `${topLeft.x} ${topLeft.y} ${size.x} ${size.y}`
      );
    }
  }

  setOptimalSize();
  window.onresize = setOptimalSize;
}

watchSize();

const PATTERN_MAPS = new Map();
const SK_INC = 2;

async function chessPattern(w, h, { color = red, size = 8 }) {
  const SK = window.devicePixelRatio * 1;
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  const W = Math.ceil(w * SK);
  const H = Math.ceil(h * SK);
  canvas.width = Math.ceil(W);
  canvas.height = Math.ceil(H * 2);

  ctx.fillStyle = color;
  ctx.fillRect(0, 0, W, H * 2);

  const sqSize = size * 5 * SK;

  for (let i = 0; i < Math.round(W / sqSize); i++) {
    const cols =
      i % 2 === 0 ? [color, darken(color, 0.9)] : [darken(color, 0.9), color];
    for (let j = 0; j < Math.floor(H / sqSize) + 1; j++) {
      const x = sqSize * i;
      const y = sqSize * j;
      const width = sqSize;
      const height = sqSize;
      ctx.fillStyle = cols[j % 2];
      ctx.fillRect(x, y, width, height);
      ctx.fillRect(x, y + H, width, height);
    }
  }

  return {
    canvas
  };
}

function chunkUpRects(rects, chunkWidth, spacing, H, variation) {
  const out = [];
  for (let i = 0; i < rects.length; i++) {
    const rect = rects[i];
    let m = rect.x;
    const endX = rect.x + rect.width;
    while (m < endX) {
      let distLeft = endX - m;
      const randScalar = 1 + (Math.random() - 0.5) * variation;
      const len = randScalar * chunkWidth;
      const word = {
        x: m,
        y: rect.y,
        width: len
      };
      out.push(word);
      out.push({ ...word, y: word.y + H });

      m = m + word.width + spacing;
      distLeft = endX - m;

      if (distLeft < chunkWidth) {
        break;
      }
    }
  }
  return out;
}

async function glowTextPattern(
  w,
  h,
  { N = 300, color = "red", size = 4, seed }
) {
  const SK = window.devicePixelRatio + SK_INC;
  const height = 10 * SK;
  const chunkWidth = 30 * SK;
  const gap = 2 * SK;
  const totalSize = height + gap;
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  const W = Math.ceil(w * SK);
  const H = Math.ceil(h * SK);
  canvas.width = Math.ceil(W);
  canvas.height = Math.ceil(H * 2);

  const bgColor = darken(color, 0.6);

  ctx.fillStyle = bgColor;
  ctx.fillRect(0, 0, W, H * 2);

  const key = `textPattern-${seed || ""}`;
  const radius = height / 2;

  let rects = [];
  if (seed && PATTERN_MAPS.has(key)) {
    rects = PATTERN_MAPS.get(key);
  } else {
    for (let j = 0; j < Math.floor(H / totalSize); j++) {
      const x =
        Math.random() < 0.8 ? Math.floor(Math.random() * 4) * 10 * SK : 0;
      const y = totalSize * j;
      const width = W - (x + radius * 2);
      rects.push({ x, y, width });
      if (Math.random() < 0.14) j += 1;
    }
    rects = chunkUpRects(rects, chunkWidth, radius / 2, H, 0.8);
    if (seed) {
      PATTERN_MAPS.set(key, rects);
    }
  }

  const glowFillPerc = 0.05;

  ctx.fillStyle = color;
  for (let i = 0; i < rects.length; i++) {
    const { x, y, width } = rects[i];

    const c1 = new Point2D(x + radius, y + radius);
    const radialGrad1 = ctx.createRadialGradient(
      c1.x,
      c1.y,
      0,
      c1.x,
      c1.y,
      radius
    );
    radialGrad1.addColorStop(0, color);
    radialGrad1.addColorStop(glowFillPerc / 2, color);
    radialGrad1.addColorStop(1, darken(color, 1, 0));
    ctx.fillStyle = radialGrad1;
    ctx.fillRect(x, y, radius * 2, radius * 2);
    ctx.fillStyle = bgColor;
    ctx.fillRect(x + radius, y, radius, radius * 2);

    const c2 = new Point2D(x + width - radius, y + radius);
    const radialGrad2 = ctx.createRadialGradient(
      c2.x,
      c2.y,
      0,
      c2.x,
      c2.y,
      radius
    );
    radialGrad2.addColorStop(0, color);
    radialGrad2.addColorStop(glowFillPerc / 2, color);
    radialGrad2.addColorStop(1, darken(color, 1, 0));
    ctx.fillStyle = radialGrad2;
    ctx.fillRect(x + width - radius * 2, y, radius * 2, radius * 2);
    ctx.fillStyle = bgColor;
    ctx.fillRect(x + width - radius * 2, y, radius, radius * 2);

    const linearGradient = ctx.createLinearGradient(0, y, 0, y + height);
    linearGradient.addColorStop(0, darken(color, 1, 0));
    linearGradient.addColorStop(0.5 - glowFillPerc, color);
    linearGradient.addColorStop(0.5 + glowFillPerc, color);
    linearGradient.addColorStop(1, darken(color, 1, 0));

    ctx.fillStyle = linearGradient;
    ctx.fillRect(x + radius, y, width - radius * 2, height);
    ctx.fillStyle = "white";
    ctx.fillRect(x + radius, y + height / 2 - 1, width - radius * 2, 1);
  }

  return {
    canvas
  };
}

async function textPattern(w, h, { N = 300, color = "red", size = 4, seed }) {
  const SK = window.devicePixelRatio * 1; // todo(luke): draw fast v then slow v
  const height = 7 * SK;
  const gap = 2 * SK;
  const totalSize = height + gap;
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  const W = Math.ceil(w * SK);
  const H = Math.ceil(h * SK);
  canvas.width = Math.ceil(W);
  canvas.height = Math.ceil(H * 2);

  ctx.fillStyle = darken(color, 0.8);
  ctx.fillRect(0, 0, W, H * 2);

  const key = `textPattern-${seed || ""}`;

  let rects = [];
  if (seed && PATTERN_MAPS.has(key)) {
    rects = PATTERN_MAPS.get(key);
  } else {
    for (let j = 0; j < Math.floor(H / totalSize) + 1; j++) {
      const x =
        Math.random() < 0.8 ? Math.floor(Math.random() * 4) * 10 * SK : 0;
      const y = totalSize * j;
      const width = W - x;
      rects.push({ x, y, width });
      if (Math.random() < 0.4) j += 2;
    }
    if (seed) {
      PATTERN_MAPS.set(key, rects);
    }
  }

  ctx.fillStyle = color;
  for (let i = 0; i < rects.length; i++) {
    const { x, y, width } = rects[i];
    ctx.fillRect(x, y, width, height);
    ctx.fillRect(x, y + H, width, height);
  }

  return {
    canvas
  };
}

async function layeredBubbles(w, h, { N = 300, color = "red", size = 4 }) {
  const SK = window.devicePixelRatio + SK_INC;

  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  const W = Math.ceil(w * SK);
  const H = Math.ceil(h * SK);
  canvas.width = Math.ceil(W);
  canvas.height = Math.ceil(H * 2);

  ctx.fillStyle = color;
  ctx.fillRect(0, 0, W, H * 2);

  for (let i = 0; i < N * 6; i++) {
    const r = (size * SK) / 1;
    const cy = Math.random() * (H + r);
    const cx = Math.random() * (W + r);
    const fill = darken(color, Math.random() * 0.4 + 1);
    ctx.fillStyle = fill;
    ctx.beginPath();
    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(cx, cy + H, r, 0, 2 * Math.PI);
    ctx.fill();
  }
  return {
    canvas
  };
}

async function coloredBubbles(
  w,
  h,
  { N = 300, color = "#ff0000", size = 4, secondaryColor = "#00ff00" }
) {
  const SK = window.devicePixelRatio * 1;

  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  const W = Math.ceil(w * SK);
  const H = Math.ceil(h * SK);
  canvas.width = Math.ceil(W);
  canvas.height = Math.ceil(H * 2);

  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, W, H * 2);

  for (let i = 0; i < N * 6; i++) {
    const r = size * SK;
    const cy = Math.random() * (H + r);
    const cx = Math.random() * (W + r);
    let fill = Math.random() < 0.8 ? color : secondaryColor;
    fill = darken(fill, Math.random() * 0.4 + 1, Math.random() * 0.2 + 0.1);
    ctx.fillStyle = fill;
    ctx.beginPath();
    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(cx, cy + H, r, 0, 2 * Math.PI);
    ctx.fill();
  }
  return {
    canvas
  };
}

const svg = document.querySelector("#woman");
const svgUrl = "http://www.w3.org/2000/svg";

//color socials
function colorSocials() {
  try {
    const color = Colors.secondary;
    document.querySelector("#twitter-icon").style.stroke = color;
    document.querySelector("#insta-rect").style.stroke = color;
    document.querySelector("#insta-circ").style.stroke = color;
    document.querySelector("#insta-circ-2").style.stroke = color;
    [1, 2, 3].forEach(
      i => (document.querySelector(`#code-pen-${i}`).style.stroke = color)
    );
  } catch (e) {}
}
colorSocials();

async function createAnimationObjects({ shapeId, boxId, flippy = 0, options }) {
  const boundsRect = document.querySelector(`#${boxId}`);
  if (!boundsRect) {
    console.log("cant find", boxId);
    return () => {};
  }
  // grab bounds points
  const boundsPoints = svgPolyElementToPointsList(boundsRect);
  const containerBox = new ContainerBox(boundsPoints, flippy);
  const vector = containerBox.getUp();
  boundsRect.style.opacity = "0";
  const angle = Math.atan2(vector.y, vector.x) * 57.3;

  const patternHolder = createSvgElement("g", {});
  const canvasImgElement = createSvgElement("image", {
    width: containerBox.wid,
    height: containerBox.hei * 2,
    href: ""
  });
  patternHolder.appendChild(canvasImgElement);

  // insert this group right after
  const mainPath = document.querySelector(`#${shapeId}`);
  mainPath.style.opacity = 0;
  const g = createSvgElement("g", {});
  mainPath.parentNode.insertBefore(g, mainPath.nextElementSibling);

  const clipId = `mange-` + Math.floor(Math.random() * 200000);
  const clipPath = createSvgElement("clipPath", {});
  clipPath.id = clipId;
  clipPath.innerHTML = `<path d=${mainPath.getAttribute("d")}></path>`;
  g.appendChild(clipPath);
  g.setAttribute("clip-path", `url(#${clipId})`);
  if (mainPath.getAttribute("transform"))
    g.setAttribute("transform", mainPath.getAttribute("transform"));
  g.appendChild(patternHolder);

  const topLeftCorner = containerBox.points[0];
  patternHolder.style.transform = `translate(${topLeftCorner.x}px, ${
    topLeftCorner.y
  }px) rotateZ(${angle + 90}deg) translate(0px, 0px)`;

  return {
    step: (offset = 0) => {
      const Y = -offset % containerBox.hei;
      patternHolder.style.transform = `translate(${topLeftCorner.x}px, ${
        topLeftCorner.y
      }px) rotateZ(${angle + 90}deg) translate(0px, ${Y}px)`;
    },
    imgElement: canvasImgElement,
    options,
    patternSpec: {
      width: containerBox.wid,
      height: containerBox.hei
    },
    originalShape: mainPath
  };
}

const pathsToGo = [
  {
    shapeId: "pink-face",
    boxId: "pink-face-box",
    options: {
      N: 800 * 0.7,
      color: Colors.primary,
      secondaryColor: Colors.secondary,
      size: 8
    }
  },
  {
    shapeId: "highlighted-yellow-top",
    boxId: "shirt-box",
    options: {
      N: 1200 * 0.7,
      color: Colors.secondary,
      secondaryColor: Colors.primary,
      size: 8,
      seed: "shirt"
    }
  },
  {
    shapeId: "highlighted-pink-top",
    boxId: "shirt-box",
    options: {
      N: 1200 * 0.7,
      color: Colors.primary,
      secondaryColor: Colors.secondary,
      size: 8,
      seed: "shirt"
    }
  },
  {
    shapeId: "right-ear-section",
    boxId: "right-ear-section-box",
    options: {
      N: 400 * 0.7,
      color: Colors.secondary,
      secondaryColor: Colors.primary,
      size: 8
    }
  },
  {
    shapeId: "face-shadow",
    boxId: "face-shadow-box",
    options: {
      N: 400 * 0.7,
      color: Colors.secondary,
      secondaryColor: Colors.primary,
      size: 8
    }
  },
  {
    shapeId: "bottom-right-pink-hair",
    boxId: "bottom-right-pink-hair-box",
    options: {
      N: 200 * 0.7,
      color: Colors.primary,
      secondaryColor: Colors.secondary,
      size: 8
    }
  },
  {
    shapeId: "bottom-right-yellow-hair",
    boxId: "bottom-right-yellow-hair-box",
    options: {
      N: 200 * 0.7,
      color: Colors.secondary,
      secondaryColor: Colors.primary,
      size: 8
    }
  },
  {
    shapeId: "right-center-hair-line",
    boxId: "right-center-hair-line-box",
    options: {
      N: 50 * 0.7,
      color: Colors.secondary,
      secondaryColor: Colors.primary,
      size: 8
    },
    flippy: 3
  },
  {
    shapeId: "pink-top-hair-line",
    boxId: "pink-top-haiir-line-box",
    options: {
      N: 20 * 0.7,
      color: Colors.primary,
      secondaryColor: Colors.secondary,
      size: 8
    },
    flippy: 3
  },
  {
    shapeId: "medium-left-pink",
    boxId: "medium-left-pink-box",
    options: {
      N: 20 * 0.7,
      color: Colors.primary,
      secondaryColor: Colors.secondary,
      size: 8
    },
    flippy: 1
  },
  {
    shapeId: "bottom-left-yellow",
    boxId: "bottom-left-yellow-box",
    options: {
      N: 20 * 0.7,
      color: Colors.secondary,
      secondaryColor: Colors.primary,
      size: 8
    }
  },
  {
    shapeId: "safari-clip",
    boxId: "safari-box",
    options: {
      N: 13 * 0.7,
      color: Colors.secondary,
      secondaryColor: Colors.primary,
      size: 8
    }
  }
];

const items = [
  { id: "dark-top", fill: Colors.bg, stroke: Colors.secondary },
  { id: "highlighted-yellow-top", fill: Colors.secondary },
  { id: "highlighted-pink-top", fill: Colors.primary },
  { id: "left-arm", fill: Colors.bg, stroke: Colors.secondary },
  { id: "arm-crease", stroke: Colors.secondary },
  { id: "left-sleeve-outline", stroke: Colors.secondary },
  { id: "left-sleeve-outline", stroke: Colors.secondary },
  { id: "black-hair-bg", fill: Colors.primary },
  { id: "black-hair", fill: Colors.bg, stroke: Colors.secondary },
  { id: "bottom-right-yellow-hair", fill: Colors.secondary },
  { id: "bottom-right-pink-hair", fill: Colors.primary },
  { id: "right-center-hair-line", fill: Colors.secondary },
  { id: "pink-top-hair-line", fill: Colors.primary },
  { id: "left-hair-line-top", stroke: Colors.secondary },
  { id: "medium-left-pink", fill: Colors.primary },
  { id: "bottom-left-yellow", fill: Colors.secondary },
  { id: "pink-face", fill: Colors.primary },
  { id: "face-shadow", fill: Colors.secondary },
  { id: "right-ear-section", fill: Colors.secondary },
  { id: "left-hand", fill: Colors.bg, stroke: Colors.secondary },
  { id: "right-arm", fill: Colors.bg, stroke: Colors.secondary },
  { id: "back", fill: Colors.bg, stroke: Colors.secondary },
  { id: "front", fill: Colors.bg, stroke: Colors.secondary },
  { id: "phone-p1", fill: Colors.bg, stroke: Colors.secondary },
  { id: "phone-p2", fill: Colors.bg, stroke: Colors.secondary }
];

pathsToGo.forEach(i => (document.getElementById(i.boxId).style.opacity = 0));
function updateColors(isLoading = false) {
  items.forEach(item => {
    const e = document.getElementById(item.id);
    if (!e) {
      console.log("could not find", item.id);
      return;
    }
    if (item.stroke)
      e.style.stroke = isLoading ? Colors.loadingColor : item.stroke;
    if (item.fill) e.style.fill = isLoading ? "black" : item.fill;
  });
}
updateColors(true);
svg.style.animationName = "loading";
var togglePattern = () => {};

async function start() {
  const animationObjects = await Promise.all(
    pathsToGo.map(p => createAnimationObjects(p))
  );
  let isChanging = false;
  function redraw(offset) {
    animationObjects.forEach(x => x.step(offset));
  }

  function setLoading() {
    updateColors(true);
    svg.style.animationName = "loading";
    for (let obj of animationObjects) {
      obj.imgElement.style.opacity = 0;
      obj.originalShape.style.opacity = 1;
    }
  }

  async function changePatterns(patternFn) {
    if (isChanging) return false;
    isChanging = true;
    updateColors(true);
    svg.style.animationName = "loading";
    setLoading();
    await new Promise(r => setTimeout(r, 50));
    const animationObjectToPattern = new Map();
    for (let obj of animationObjects) {
      const pattern = await patternFn(
        obj.patternSpec.width,
        obj.patternSpec.height,
        obj.options
      );
      animationObjectToPattern.set(obj, pattern.canvas.toDataURL());
    }
    for ([obj, pattern] of animationObjectToPattern) {
      obj.imgElement.setAttribute("href", pattern);
    }
    await new Promise(r => setTimeout(r, 50));
    animationObjects.forEach(obj => {
      obj.imgElement.style.opacity = 1;
      obj.originalShape.style.opacity = 0;
    });
    svg.style.animationName = "none";
    svg.style.opacity = 1;
    updateColors(false);

    isChanging = false;
    return true;
  }
  changePatterns(layeredBubbles);
  let isLayeredBubbles = true;
  togglePattern = async () => {
    if (isLayeredBubbles) {
      const changed = await changePatterns(glowTextPattern);
      if (changed) isLayeredBubbles = false;
    } else {
      const changed = await changePatterns(layeredBubbles);
      if (changed) isLayeredBubbles = true;
    }
  };

  let offset = 0;
  const useScroll = window.location.search.includes("scroll");
  if (useScroll) {
    addEventListener("scroll", () => {
      offset = window.scrollY;
    });
    document.body.style.height = "77000px";
  }

  let lastRedraw = 0;
  let lastDelta = 0;
  function step(delta) {
    const timePassed = delta - lastDelta;
    const scalar = timePassed / 16;
    if (lastRedraw !== offset) redraw(offset * 0.1);
    lastRedraw = offset;
    if (!useScroll) offset += 4 * scalar;
    lastDelta = delta;
    requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}
setTimeout(start, 20);

              
            
!
999px

Console