Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

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

+ add another resource

Packages

Add Packages

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

Behavior

Auto Save

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

Auto-Updating Preview

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

Format on Save

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <div class="container" >

  <header>
    <div class="font-m logo">COFFEE</div>
  </header>
  <main>
    <h1 class="font-m">
      This page is a Reacreation of <a href="https://www.lemonade.com/giveback-2019">lemonade</a> very cool line animation on scroll.  
    </h1>
    <p class="font-s para">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    <div id="content-wrapper">
      <svg id="line-svg"  xmlns="http://www.w3.org/2000/svg" viewBox="15 -15 1160 6740.2">
        <g id="coffee-cup-shade">
          <path id="cc-shade-outside" d="M899,2001.5c0,24-38,123-192,224-91.31,59.89-221.79,57.32-239,20s44-138,171-172c42-11.24,78.67-20.8,107.58-28,10.66-2.65,20.26-9.1,31.16-10.51C859,2024.5,899,1989.46,899,2001.5Z" transform="translate(-3.01 -4.02)" fill="#b3b3b3" />
          <path id="cc-shade-inside" d="M843.44,2036.64c0,19.36-30.66,99.22-154.89,180.7-73.66,48.31-178.92,46.24-192.8,16.13s35.49-111.32,138-138.75c33.87-9.07,63.46-16.78,86.78-22.57,8.6-2.14,16.35-7.35,25.13-8.48C811.17,2055.19,843.44,2026.92,843.44,2036.64Z" transform="translate(-3.01 -4.02)" fill="#e6e6e6" />
        </g>
        <path id="heart-fill-4" d="M523.13,6554.18c-18.08-15.06-46.29-39.94-30.13-69.19,8.56-18.15,37-16.79,42.88,1.77.27,1,4.51-3.31,5-3.81,9.09-9.75,26.36-14.17,36.12-4.68,14.28,16.16.84,43-9.56,58.8-4.68,6.3-10.62,11.1-16.37,16.06C542.26,6561.68,531.5,6562.81,523.13,6554.18Z" transform="translate(-3.01 -4.02)" fill="red" />
        <g id="heart-fill">
          <path id="heart-fill-3" d="M604,5155.08c-40-22-102.8-58.87-82.89-120.5,9.6-37.68,64.28-45.63,82.24-12.47.89,1.79,7.35-8,8.06-9.09,13.69-21.91,44.92-36.7,67-22.25,33.14,25.45,17.48,81.47,3.55,115.39-6.59,13.71-16.1,25-25.22,36.61C643.12,5162.28,623.08,5168.41,604,5155.08Z" transform="translate(-3.01 -4.02)" fill="red" />
          <path id="heart-fill-2" d="M609.27,5136.29c-68.57-43.26-39.34-103.32.43-60.58,7.16,9,5.69-15.12,27.06-17.5,35.72-3.26,9.75,55.82,1,73.42C625.19,5154.83,627.62,5147.07,609.27,5136.29Z" transform="translate(-3.01 -4.02)" fill="#ed1e79" />
          <path id="heart-fill-1" d="M617.42,5140.69c-11.1-7.35-34.28-24.91-32.73-43.29,2.27-15.7,23-9.58,30.61-3.46,1.86,1.49,4.31-3.63,4.83-4.77,3.4-10.18,20.37-19.47,22.84-3.9C640.42,5105.9,627.64,5123.81,617.42,5140.69Z" transform="translate(-3.01 -4.02)" fill="#ff7bac" />
        </g>
        <g id="base">
          <path id="line-8" d="M554.13,6121.07c17.13,7.89,28.48,24.23,28.63,46.52a53.68,53.68,0,0,1,.16,8.18c-.94,11.73-7.72,21.76-17.23,26.52-17.81,8.91-24.74-4.34-38.12,2.46-19,10-31.61,37.64-26.32,60.95,8.76,25.28,33.06,39.43,43.83,63.48,18.08,48-39.88,46.89-66.72,47.17-13.19-.57-29.72-3.68-35.69-18-.36-27.32,178.09-33.3,198.52-19.89,33.09,8.27,29.5,42.23-2.25,49-44.28,12.84-90.8,15.71-136.25,14.3-37.87-6.86-124.12,6.7-146-27.92-4-6.64-5.85-16.31-1.2-22.42,40.75-23,90.29-21.68,135.3-26.91,77.18-3,160.7-22.75,233.91,11.59,17.87,7,24.61,26.07,13.21,44.23-30.47,40.53-94.69,33.15-138.14,39.25-64.82-1.82-206,26.12-253.57-38.51-3.38-4.59-10-1.65-9.76,4.32,2.9,82.22,22.7,168.28,59.54,237.84,24.45,48.7,71.85,67.51,119.28,71.06,23,3,123.21,12.73,130.47-13.44-13.83-4.59-28.58-1-42.92.66-51.34,9.26-117-25.46-162.34,8.62-4.5,4.72-7.82,13-3.83,18.31,13.84,21.62,232.05,16.89,224.91-15-3.62-10.15-17.25-15.66-3.83-25.13,68.94-53.26,164.78-82.33,186.57-183.2,8-35.9-11.55-60.13-43.85-55.16-11.63,1.05-23.63,4-32.75,12.25-13.43,10-1.87,28.4,12.29,27.64,13.23.11,27.29-13.3,40-5.08,43.56,49.06-133.1,188.61-112.5,112.28,24-29.06,29-33.58,36.18-75.47,2.9-14.72,25.81-139.69,1.75-127.45-7.69,4.93-9.14,16.41-11.75,26-18.18,62.16-91.59,65.36-125.69,111.13-14.95,23.34-26.63,37.29-52.86,24.84-25.12-11.86-56.43-17.2-75.71-40-7.23-10.37-8.67-27.14,0-36,9.78-9.93,25.66-4.51,36,4.71,4.54,4.06,8.95,8.91,14.62,10.17,16.32,3.65,27.6-23.54,44.19-22.26,14.3,1.1,20,21.9,18.61,38-3.35,38.12-27.32,73-59.16,86-10.64,8.41-41.1-47.8-48-57.77" transform="translate(-3.01 -4.02)" fill="none" stroke="#ececec" stroke-miterlimit="10" stroke-width="5" />
          <path id="line-7" d="M881.91,5215.67c30.81,0,48.62,17.4,77.92,28.79s75.52-3.83,71.82-38.64c-47.9-137.06-381,238.93-425.73,301.05-70.55,78.34-21.29,157.67,63.83,186.64,75.46,27.48,162.66,34.53,230.06-12.7,24.9-17.45,78.89-73.3,55.51-114.71C811.4,5328.72,680.41,5744.72,597,5821.62c-85.66,80.74-380.81,144.12-311.4,293.58,58.6,115.42,185.88-21.87,268.83,5.95" transform="translate(-3.01 -4.02)" fill="none" stroke="#ececec" stroke-miterlimit="10" stroke-width="5" />
          <path id="line-6" d="M10.49,5181c47-79,138-17.62,196.44-4.38,146.56,29.49,331.31,109.57,452.69-29.07,40.87-39.43,82.57-146.4,4.54-164.85-18.13-2.52-37.07,6.35-48.38,22.58-3.57,4.92-6.36,16.91-13.35,16-5-1.13-8.7-8.51-12.61-11.91-12.17-10.56-29.27-13.3-43.86-8.49-43.39,14.13-44.55,75-15.27,106.63,14.53,17.71,33.77,29.39,52.57,40.28,11.42,4.62,27.61,23.08,38.78,10.3,15.05-21.64,55.65-78.78,25.17-100.73-11.54-5.1-25.78,5.8-31.82,16.41-2.95,7.2-6.41,1.5-9.12-2.28-18.36-22-48.4-4.88-37,24.79,9,21.16,28.56,36.06,47.58,43.89a2.23,2.23,0,0,0,3-.78c43.89-42.5,25.36-88.4-1-48.75-4.71,5.71-11.25-3.59-16.7-4-9.74-3-20.92,3.54-17.61,16.39,2.38,9.27,9.35,17.1,15.46,23.45,60.1,50.41,187.7,89.19,281.88,89.17" transform="translate(-3.01 -4.02)" fill="none" stroke="#ececec" stroke-miterlimit="10" stroke-width="5" />
          <path id="line-5" d="M1094.12,3752.8c79.61,483.17-708.59,556.94-918.39,843.45C12.58,4814.31,342.79,4843.93,318.48,4752c-24.77-101.4-123.82,6.42-160.41,50-85.8,99.11-26.79,226.09-22.23,342.17C139.44,5235,67.38,5330.59,10.5,5236c-11.22-19.88,0-55,0-55" transform="translate(-3.01 -4.02)" fill="none" stroke="#ececec" stroke-miterlimit="10" stroke-width="5" />
          <path id="line-4" d="M43.86,3528c15-27.68,20-65.25,58.63-57.74,45,6.45,73.67,68.44,43.77,105.8-6.49,9.35-20,16.22-29.12,7.62a9.62,9.62,0,0,1-2.13-3.07c-13.05-29.13,29.91-63.07,54.91-67.34,38.75-8.11,116.51,33.47,91.39,90-3.21,7.22-9.58,13.11-16.72,13.12-21.65,0-29.08-32.9-23.55-52,16.24-59,112.08-36.94,111.92,19.89a10,10,0,0,1-.06,1.1c-.54,5.14-2.17,10.26-5.4,13.89-16.43,18.41-26.42-24.18-29-35.51-44.5-155.1,87.15-183.45,118.56-85.54a9.93,9.93,0,0,0,18.37,1.27C491.21,3364,666.94,3495,494.24,3672.26c-11.51,11.85-24.63,23-38.82,30.41s-34.46,13.19-45.11-3c-20.62-31.55-40.13-68-40.15-107,.52-21.34,15.84-36.05,33.53-21.78,12.85,10.35,20,28.92,18.43,46.62a.53.53,0,1,1-1.06-.09c4.5-48.86,62.12-43.52,66.07,3.38,1.2,13.27-4.91,31.49-15,42.56-8.46,9.28-23-2.89-15.2-12.76s23.44-16.78,32.69-16.47c17.63-1,34.62,8.39,47.63,21.27,30.35,30.54,48.75,15.15,81.38,3.57a11.92,11.92,0,0,1,1.33-.38c22.18-4.71,37.29,9.39,50.66,27.46,14.94,20.2,30.39,31.58,54.24,24.11,13.23-4.15,149,46.85,161.65,52.66,62.22,28.65,199-67.85,207.6-10" transform="translate(-3.01 -4.02)" fill="none" stroke="#ececec" stroke-miterlimit="10" stroke-width="5" />
          <path id="line-3" d="M1003.15,2312.72c50.07,305.79-225.42,521.2-466.67,557-456.1,64.54-491.5,122.07-451,633.43,3.09,75.73-59.92,58.91-41.58,24.77" transform="translate(-3.01 -4.02)" fill="none" stroke="#ececec" stroke-miterlimit="10" stroke-width="5" />
          <path id="line-2" d="M891.23,1998.77c-83.2,45.37-345.15,60.59-406.93,177.73-15.61,22.88-29.19,59.91-7.87,83.28,122,75.77,399.18-109.45,422.83-258.23,2.87-40-33.76-67.55-70-74.24-87.89-5.79-148.71,5.3-229.32,48.24-41,26.63-79.23,62.9-111.89,101.57-61.38,65.86-60.69,176.75,30.69,201.11,141.66,21.13,284.32-80.58,367.62-204.86,77.13-112-15.72-167.52-115.94-162.29-111.13,9.22-205.47,56.25-276.18,147.48-27.82,31.64-56.19,67.84-59.85,112.28,3.23,112.65,117.41,275.25,198,336.45,140.1,105.11,322.85,32,358.71-134.11,18.2-96.65-17.73-246.32-47.85-350-5.8-20,4-41.54,21.85-47.46,172.72-57.35,244,188.53,89.67,286.62-18.88,12-42.72.52-47.89-23.27-11.07-50.92-41.37-99.26-41.66-152.5,25.49-8,66-28.8,91.24-23.42,12.11,4.91,17.74,20.29,22,34,29.1,74.61-35.34,108.51-91.57,111.35,3.31,35.12,10.46,70.24,16.34,104.22" transform="translate(-3.01 -4.02)" fill="none" stroke="#ececec" stroke-miterlimit="10" stroke-width="5" />
          <path id="line-1" d="M529.83,6.73C541.78,120.26,565,198.38,673.14,220.92c44.73,21.84,59.47,86.66,54.56,141.51-1.36,105.06-100.25,149.76-177.22,99.12-12.52-8-24.32-17.91-33-30.91-22.61-33.41-19.84-93.51,14.69-115.22,34.25-14.59,58.55,30.9,55.5,65.61C584.4,538.64,402.59,584.84,335.08,691.42c74.64-104.77,3.25-146.1-70.09-59.51-39.68,49.36-73.58,116.79-69,185.31,7.71,48.62,48.37,52.91,82.39,32.6C334.94,821,385.93,778.28,426.8,725.46c-21.94,22-55.12,43.89-52.78,81.59,6.59,40.15,40.77,40.67,57.53,7.59,17.72-24.58,30-70.37.25-89.09-42.52-15.08-46.76,49.88-2.72,46.62,10.76-1.61,20.11-8.21,28.61-16.25C504,721.36,555,693.73,593.39,646.85c-66.46,91-203.76,249.73-202.78,369.19,2.29,22.39,25.7,17.87,39.17,6.61,48.69-39.57,114.77-126,90.86-197.66-8.89-18.59-32.76-27.36-47.66-17.79-6.75,4.34-5.43,15.48,2.1,17.67,8.65,2.53,20-.75,28.89-5,77.81-36.85,160.24-84.76,194.3-172.09C639.35,722,465.61,926.24,495.74,1026.27c3.46,11.17,13.1,15.3,22.67,11.36,71.53-20.35,124.11-104.87,116.91-188-2.29-26.5-17.85-58.26-41-53.53-9,1.85-17.13,14.87-10.65,22.22,25.12,13.25,54.32-7.71,77.17-21.33,18.48-1.71,80.63-45.62,72-67.7-2.62-3.21-6.66-1.75-9.77.07C690.52,745,673.92,816.48,714.7,830c35.27-2.47,67.38-29.68,92.65-56.06,41.18-47.48,23.3-83.87-17-19.49-22.12,35.32-8.91,75.44,31.49,67.87,22-3,42.4-16.22,64.41-33.42,54.93-55.71,124.54-11.74,62,108.07-97.83,179.92-279.84,271.93-451,336.12-69.64,23.26-343.7,139.41-371.13,33.84,4.16-49.22,59.32-100.5,100.57-107.69,36.28-6.44,78,17.06,86.27,57.55,16.44,80-95,153.94-59.33,225.52,74.71,116.63,484.78,21.25,514.91-116.15-12.71-101-143.33-63.87-163.16,17.41C569.76,1465,673.17,1567,767.82,1599.68c34.23,14,70.12,24.67,100.47,47.39,123.16,93.22,181.84,263.57,22.94,351.7" transform="translate(-3.01 -4.02)" fill="none" stroke="#ececec" stroke-linecap="round" stroke-linejoin="round" stroke-width="5" />
        </g>
        <g id="running">
          <path id="line-8-2" data-name="line-8" d="M554.5,6120.86c17.13,7.9,28.48,24.23,28.63,46.52a53.71,53.71,0,0,1,.16,8.18c-.94,11.73-7.71,21.76-17.23,26.53-17.81,8.91-24.74-4.35-38.12,2.46-19,10-31.61,37.64-26.32,60.94,8.76,25.29,33.06,39.43,43.83,63.48,18.08,48-39.88,46.9-66.72,47.17-13.18-.57-29.72-3.68-35.69-18-.36-27.31,178.09-33.29,198.52-19.88,33.09,8.27,29.5,42.22-2.25,49-44.28,12.83-90.79,15.7-136.25,14.3-37.87-6.87-124.12,6.69-146-27.93-4.05-6.63-5.85-16.31-1.2-22.42,40.75-23,90.29-21.67,135.3-26.9,77.18-3,160.7-22.75,233.91,11.58,17.87,7,24.61,26.08,13.21,44.24-30.47,40.53-94.68,33.14-138.14,39.24-64.82-1.81-206,26.13-253.57-38.51-3.37-4.59-10-1.64-9.75,4.32,2.89,82.23,22.69,168.29,59.53,237.84,24.45,48.7,71.85,67.52,119.28,71.06,23,3,123.21,12.74,130.47-13.43-13.83-4.6-28.58-.95-42.92.65-51.34,9.26-117-25.45-162.34,8.62-4.5,4.73-7.82,13-3.83,18.31,13.84,21.63,232.05,16.89,224.91-15-3.62-10.14-17.25-15.66-3.83-25.12,68.94-53.26,164.78-82.34,186.57-183.21,8-35.9-11.55-60.12-43.85-55.16-11.63,1.05-23.63,4-32.75,12.26-13.43,10-1.87,28.39,12.29,27.63,13.23.11,27.29-13.3,40-5.07,43.56,49.06-133.1,188.6-112.5,112.27,24-29.06,29-33.57,36.18-75.47,2.9-14.72,25.81-139.69,1.75-127.44-7.69,4.92-9.14,16.41-11.75,26-18.18,62.17-91.59,65.36-125.69,111.13-14.95,23.34-26.63,37.29-52.86,24.85-25.12-11.87-56.42-17.21-75.71-40-7.23-10.37-8.67-27.14,0-36,9.78-9.94,25.66-4.51,36,4.71,4.54,4,8.95,8.9,14.62,10.17,16.32,3.64,27.6-23.55,44.19-22.27,14.3,1.1,20,21.9,18.61,38-3.34,38.13-27.32,73-59.16,86-10.64,8.4-41.1-47.81-48-57.77" transform="translate(-3.01 -4.02)" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="5" />
          <path id="line-7-2" data-name="line-7" d="M882.28,5215.46c30.81,0,48.62,17.4,77.92,28.79s75.52-3.82,71.82-38.64c-47.89-137.06-381,238.93-425.72,301.05C535.74,5585,585,5664.34,670.12,5693.3c75.46,27.48,162.66,34.53,230.06-12.69,24.9-17.45,78.89-73.3,55.51-114.72-143.92-237.38-274.91,178.63-358.37,255.53-85.66,80.73-380.81,144.12-311.4,293.58,58.6,115.41,185.89-21.87,268.83,5.95" transform="translate(-3.01 -4.02)" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="5" />
          <path id="line-6-2" data-name="line-6" d="M10.87,5180.82c47-79,138-17.61,196.43-4.37C353.86,5205.93,538.61,5286,660,5147.38c40.87-39.43,82.57-146.41,4.54-164.86-18.13-2.51-37.07,6.35-48.38,22.58-3.57,4.92-6.36,16.91-13.35,16-5-1.13-8.7-8.51-12.61-11.91-12.17-10.57-29.27-13.3-43.86-8.5-43.39,14.14-44.55,75-15.27,106.63,14.53,17.72,33.77,29.39,52.57,40.28,11.42,4.62,27.61,23.09,38.78,10.3,15.05-21.64,55.65-78.78,25.17-100.73-11.53-5.1-25.78,5.8-31.82,16.41-3,7.2-6.41,1.5-9.12-2.27-18.36-22-48.4-4.89-37,24.79,9,21.15,28.56,36.05,47.58,43.89a2.24,2.24,0,0,0,3-.78c43.89-42.51,25.36-88.4-1-48.76-4.71,5.72-11.25-3.59-16.7-4-9.74-3-20.92,3.53-17.61,16.38,2.38,9.27,9.35,17.1,15.46,23.46,60.1,50.4,187.7,89.18,281.88,89.16" transform="translate(-3.01 -4.02)" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="5" />
          <path id="line-5-2" data-name="line-5" d="M1094.49,3752.59c79.61,483.18-708.59,556.94-918.39,843.46C13,4814.1,343.16,4843.73,318.85,4751.78c-24.77-101.4-123.82,6.41-160.41,50-85.8,99.11-26.79,226.08-22.23,342.17,3.6,90.85-68.46,186.46-125.34,91.88-11.22-19.89,0-55,0-55" transform="translate(-3.01 -4.02)" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="5" />
          <path id="line-4-2" data-name="line-4" d="M44.23,3527.76c15-27.68,20-65.25,58.63-57.75,45,6.46,73.67,68.44,43.77,105.8-6.49,9.36-20,16.23-29.12,7.62a9.67,9.67,0,0,1-2.13-3.07c-13-29.13,29.91-63.07,54.91-67.34,38.76-8.1,116.52,33.47,91.39,90-3.21,7.22-9.58,13.11-16.72,13.12-21.65,0-29.08-32.91-23.55-52,16.24-59,112.08-36.94,111.92,19.88a10.32,10.32,0,0,1-.06,1.11c-.53,5.13-2.16,10.25-5.4,13.88-16.43,18.42-26.42-24.18-29-35.51-44.5-155.1,87.15-183.45,118.56-85.54a9.92,9.92,0,0,0,18.37,1.27c55.79-115.48,231.52,15.54,58.82,192.79-11.51,11.85-24.63,23-38.82,30.41s-34.46,13.2-45.11-3c-20.62-31.54-40.13-68-40.15-107,.52-21.33,15.84-36,33.53-21.78,12.85,10.36,20,28.93,18.43,46.63a.53.53,0,1,1-1.06-.1c4.5-48.85,62.12-43.52,66.07,3.38,1.2,13.28-4.91,31.49-15,42.56-8.46,9.29-23-2.88-15.2-12.75s23.45-16.78,32.7-16.47c17.62-.95,34.61,8.39,47.62,21.26,30.35,30.55,48.75,15.15,81.38,3.58a10.11,10.11,0,0,1,1.33-.38c22.18-4.72,37.29,9.38,50.66,27.45,14.94,20.2,30.39,31.58,54.24,24.11,13.23-4.14,149,46.86,161.65,52.67,62.22,28.65,199-67.85,207.6-10" transform="translate(-3.01 -4.02)" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="5" />
          <path id="line-3-2" data-name="line-3" d="M1003.52,2312.51c50.07,305.8-225.42,521.21-466.67,557-456.1,64.55-491.5,122.07-451,633.44,3.09,75.72-59.92,58.9-41.58,24.77" transform="translate(-3.01 -4.02)" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="5" />
          <path id="line-2-2" data-name="line-2" d="M891.6,1998.57c-83.2,45.37-345.15,60.59-406.93,177.73-15.61,22.88-29.19,59.91-7.87,83.28,122,75.76,399.18-109.45,422.83-258.24,2.87-40-33.76-67.54-70-74.24-87.89-5.78-148.71,5.3-229.31,48.25-41,26.63-79.24,62.9-111.9,101.57-61.38,65.86-60.69,176.75,30.69,201.1,141.66,21.13,284.32-80.57,367.63-204.85,77.12-112-15.73-167.52-116-162.3-111.13,9.22-205.47,56.25-276.18,147.49-27.82,31.64-56.19,67.84-59.85,112.28,3.23,112.64,117.41,275.24,198,336.44,140.1,105.12,322.85,32,358.71-134.1,18.2-96.66-17.73-246.32-47.85-350-5.79-20,4-41.54,21.85-47.45,172.72-57.36,244,188.53,89.67,286.61-18.87,12-42.72.53-47.89-23.26-11.07-50.93-41.37-99.27-41.66-152.5,25.49-8,66-28.8,91.24-23.43,12.11,4.91,17.74,20.29,22,34,29.1,74.6-35.34,108.5-91.57,111.35,3.31,35.12,10.46,70.24,16.34,104.21" transform="translate(-3.01 -4.02)" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="5" />
          <path id="line-1-2" data-name="line-1" d="M530.2,6.52c11.95,113.54,35.15,191.66,143.31,214.19,44.73,21.84,59.47,86.66,54.56,141.51C726.71,467.29,627.82,512,550.85,461.34c-12.52-8-24.32-17.9-33-30.9-22.61-33.42-19.84-93.52,14.69-115.23,34.25-14.59,58.55,30.91,55.5,65.61C584.77,538.43,403,584.63,335.46,691.22c74.63-104.77,3.25-146.11-70.1-59.52-39.68,49.37-73.58,116.79-69,185.31,7.71,48.62,48.37,52.92,82.39,32.61,56.55-28.82,107.54-71.55,148.41-124.36-21.94,22-55.12,43.89-52.78,81.58,6.59,40.16,40.77,40.68,57.53,7.59,17.72-24.57,30-70.37.25-89.09-42.52-15.08-46.76,49.88-2.71,46.63,10.75-1.61,20.1-8.22,28.6-16.25,46.29-34.56,97.27-62.19,135.7-109.08C527.3,737.67,390,896.37,391,1015.83c2.29,22.39,25.7,17.87,39.17,6.62,48.69-39.58,114.77-126,90.86-197.67-8.89-18.59-32.76-27.35-47.66-17.78-6.75,4.34-5.43,15.48,2.1,17.67,8.65,2.52,20-.76,28.89-5,77.81-36.85,160.24-84.76,194.3-172.1C639.72,721.83,466,926,496.11,1026.07c3.46,11.16,13.1,15.29,22.67,11.35,71.53-20.34,124.11-104.86,116.91-188-2.29-26.49-17.84-58.26-41-53.52-9,1.84-17.13,14.87-10.65,22.21,25.12,13.25,54.32-7.7,77.17-21.32,18.48-1.72,80.63-45.62,72-67.7-2.62-3.21-6.66-1.76-9.77.06-32.53,15.57-49.13,87.07-8.35,100.56,35.27-2.46,67.38-29.67,92.65-56.06,41.19-47.48,23.3-83.86-17-19.49-22.11,35.33-8.91,75.45,31.49,67.88,22-3.06,42.4-16.22,64.42-33.42,54.92-55.71,124.53-11.75,62,108.07-97.83,179.92-279.84,271.92-451,336.12C428,1256.12,154,1372.27,126.53,1266.69c4.16-49.22,59.32-100.49,100.57-107.68,36.29-6.45,78,17,86.27,57.54,16.44,80.06-95,154-59.33,225.52,74.71,116.64,484.78,21.25,514.91-116.15-12.71-101-143.33-63.86-163.16,17.42-35.66,121.48,67.75,223.45,162.4,256.13,34.23,14,70.12,24.68,100.47,47.4,123.16,93.22,181.84,263.57,22.94,351.7" transform="translate(-3.01 -4.02)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="5" />
        </g>
        <circle class="line-circle" cx="530" cy="15" r="15" fill="#ff0083"/>
      </svg>

      <!--<svg id="line-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1441 3606.19">
        <path id="line-1" d="M733.94,6.31c5.25,40.34,11.14,81.23,27.68,118.39s45.34,70.72,83.82,83.91c17.36,5.95,36.1,7.62,52.95,14.89C949.72,245.64,966.65,311.36,961,367c-2.83,27.92-10,56.27-27.07,78.56-39.24,51.35-120,53.67-176.3,21.95-14.37-8.09-27.91-18.16-37.83-31.34-20.76-27.61-22.4-68.17-3.93-97.37,5.16-8.14,12-15.6,20.79-19.47,16.76-7.33,37.41.55,48.85,14.82s15.07,33.42,14.84,51.71c-1,75.19-59,137.23-120.43,180.64s-131.33,78-169.47,134.1a147.62,147.62,0,0,0,35.45-71.37c1.14-6.1,1.88-12.5,0-18.41-5.47-17.18-28.8-20.52-46.25-16-27.15,7.09-50.23,25.1-69.64,45.39a305.54,305.54,0,0,0-75.53,137.65c-4,16.44-6.69,33.61-3.64,50.25s12.62,32.8,27.79,40.29c20.77,10.24,45.64,2.28,66.75-7.23A500.08,500.08,0,0,0,615.7,735.09c-13.18,12-28.23,21.95-40.48,34.91s-21.74,30.07-20.09,47.82S573,852.4,590.65,849.76c13.22-2,22.83-13.3,30.51-24.24,9.88-14.07,19-29.46,20.88-46.55s-5.18-36.2-20.6-43.79-38,2-39.43,19.08c-1.46,17.52,18.89,30.5,36.32,28.2,12.34-1.64,23.07-8.34,32.82-16.48a157.14,157.14,0,0,1,29.24-19.14,511.72,511.72,0,0,0,126.49-91.46A1654.12,1654.12,0,0,0,615.26,905.63c-23.54,37.72-46.35,79.66-41.07,124.11a21.36,21.36,0,0,0,1.73,6.37c7.45,16.39,29.55,9.71,43.21.33A281.58,281.58,0,0,0,719.76,911.58c9.86-24.15,16-52.63,3.62-75.58-10.18-18.84-37.58-27.73-54.68-18a9.69,9.69,0,0,0,2.41,17.92c9.93,2.56,23-.76,33.15-5,89.3-37.36,183.89-85.94,223-174.5a1388.47,1388.47,0,0,0-209.49,271.5c-20.22,34.26-39.36,76-22.91,112.25,2.15,4.73,5.14,9.45,9.86,11.61,5,2.29,10.82,1.24,16.14-.1C802.92,1031,863.26,945.29,855,861.05c-2.64-26.87-20.48-59.08-47-54.28-10.36,1.87-19.66,15.08-12.23,22.53,3.2,3.2,8.14,3.79,13,4.11,26.94,1,52.11-12.27,75.59-25.74a141.73,141.73,0,0,0,83.13-58.88,8,8,0,0,0-.53-9.76c-3-3.26-7.64-1.78-11.21.06-22.52,11.65-37.53,36.55-37.3,61.9.15,17.7,10.21,37.49,27.72,40.07,7.46,1.09,15-1.11,22.09-3.65a228.47,228.47,0,0,0,84.23-53.2c13.24-13.19,25.31-29.1,26.91-47.84a7.87,7.87,0,0,0-.72-4.09c-2.9-5.88-11.21-3-16.14.8a133.87,133.87,0,0,0-29.55,31.37c-11.79,17.48-18.57,42.85-4.3,58.38,9.8,10.67,26.09,12.42,40.44,10.45,23.84-3.28,40.41-12.06,65.85-28.51a6,6,0,0,0,.8-.4c1.37-1.18,3.25-1.51,4.08-2.43l3.19-2.55c63-56.49,142.91-11.91,71.15,109.58-42.55,72-119.87,144.39-189.7,191.28-100,67.15-213.87,110.48-327.82,149.54-112.31,38.5-227.56,73.75-346.22,77.47-33.55,1-77.51-9.68-79.67-43.18-.89-13.94,6.64-26.95,14.74-38.34,24.43-34.34,59-64.29,100.66-70.83s89.46,17.29,99,58.35c18.87,81.17-109,156.09-68.08,228.67,15.8,28,50.66,38.26,82.38,43.57,159.08,26.66,327.84-9.68,461.84-99.46,22.33-15,45.75-35,46.67-61.89.89-26-21-48.29-45.55-57.12-55.82-20.12-121.63,18.94-141.7,74.78s-.71,120.44,37.61,165.74,93,73.86,148.77,94c39.28,14.16,80.47,25,115.29,48.06,56.41,37.31,145.06,134.5,139.47,201.9s-50.14,130.16-113.14,154.71" transform="translate(-1 -3.81)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="5" />
        <path d="M920.91,779.63" transform="translate(-1 -3.81)" fill="none" stroke="red" stroke-miterlimit="10" stroke-width="5" /> -->
      <!--         <rect x="0.5" y="0.69" width="1440" height="1000" fill="none" stroke="#ff1d25" stroke-linecap="round" stroke-miterlimit="10" /> -->
      <!--         <rect x="0.5" y="992.69" width="1440" height="1000" fill="none" stroke="#ff1d25" stroke-linecap="round" stroke-miterlimit="10" />
        <path id="cup" d="M188.19,3547.14a99.9,99.9,0,0,0-18.57,41.51c-.76,3.92-1.25,8.11.29,11.78,5.15,12.25,23.93,6.64,33.82-2.23,33.43-30,50.14-74.1,62.4-117.3s21.58-88.08,44.66-126.59,63.94-70.26,108.76-67.6c27.66,1.65,55.82,19.19,62.45,46.09,5.24,21.29-4.12,44.59-20.56,59.11s-38.89,21-60.82,21.19c-48.9.48-96.29-30.11-117.67-74.09s-16.68-99.06,10.28-139.86,74.71-66.52,123.58-68.56c53.28-2.23,106.45,21.6,158.85,11.66A126.6,126.6,0,0,0,639,3109.74c9.43-9,17.71-20,19.66-32.91,4.71-31.06-27.48-54.54-56.81-65.81-100.15-38.47-218.47-25.84-309.9,31.83-25.08,54.6-111.12,66.51-150.09,20.78-40.43-47.43-18.78-126.15,30.43-164.39s115.71-45,178-43.29c111.89,3.09,222.3,28.76,327.89,65.92,31.55,11.1,74.39,19.66,91.85-8.86,14.2-23.2-1.56-53.49-21.28-72.23-47.86-45.48-117.21-61.15-183.23-61.92S434,2790.24,368,2791.84s-135.52-8.77-188-48.84-81.31-116.21-51.41-175.07c30.3-59.65,105.41-80.55,172.28-82.32,46.43-1.24,93.74,3.88,136.54,21.91,117.46,49.47,176.41,182.13,280.45,255.75,87.34,61.81,205.16,76.64,306.27,41.62s183.67-118,221.44-218.12c57.41-152.14,13.18-321.64-31.4-478" transform="translate(-1 -3.81)" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="5" />
        <path id="line-2" d="M1153.94,2031c-25.94-29.89-70.64-33.87-110.1-30.85-143.11,11-279.7,88.76-362.15,206.24-8.92,12.71-17.39,26.23-20.52,41.44s0,32.54,11.49,43c7.9,7.2,18.63,10.34,29.09,12.53,87.72,18.35,178.27-14.94,256-59.48,65.46-37.49,127-84.31,170.7-145.83,14.66-20.67,27.49-43.8,29.4-69.07s-9.61-52.91-32.62-63.52c-10.16-4.68-21.56-5.75-32.71-6.75-58.18-5.24-117.89-10.34-174.16,5.36-35.8,10-68.76,28-101,46.55-47,27-93.93,55.79-131.41,95-35.68,37.32-62.75,91.65-44.13,139.81,12.75,33,45,55.6,79.35,64.1s70.51,4.65,105.08-2.73c125.77-26.83,240.78-101.26,316.79-205,19.72-26.92,37.6-59.11,31.77-92-5.79-32.65-34.63-57.49-66.19-67.67S1043,1934,1010,1937.28c-68.66,6.89-138.22,19.75-198.52,53.31-44.59,24.83-82.42,60-118.42,96.23-31.92,32.09-64.47,68.79-68.68,113.86-3.68,39.44,15.23,77.15,34.64,111.67,49.4,87.93,108,174.47,192.53,229.47s200.42,71.95,285.84,18.34c28.34-17.79,51.93-42.18,73.49-67.76,21.88-26,42.36-54.09,52.31-86.55,14.34-46.76,5.44-97.09-3.55-145.17-15.71-83.9-31.69-168.72-62.94-244.1,41.42-23.69,92.88-30.37,138.12-15.19s83,52.82,95.56,98.85-.43,96.92-28.82,135.25-70.82,64.79-116.12,79.75c6-69.26-51.52-130.53-52-200a782.82,782.82,0,0,1,77.24-22.74c9-2.16,18.71-4.14,27.46-1,13.9,5,20.36,20.57,25.21,34.51,4.48,12.87,9,26.15,8.25,39.76-1.35,24.52-20,45.38-42,56.38s-46.93,14-71.33,16.77a737.62,737.62,0,0,0,18.75,105.67" transform="translate(-1 -3.81)" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="5" />
      </svg>
         <svg
    
          id="line"
      

          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 521 2399"
         
          strokeLinecap="round"
          strokeMiterlimit="1"
        >
          <path
            class="line-base" d="M176.22,79v71c0,27.58,7.16,33.5,18.45,42.46,11.87,9.41,26.87,9.95,38.55,9.86l35.21,0A44.78,44.78,0,0,1,301.7,217.7c13.1,13.3,12.13,29.54,12.13,40.89V289.7s1,48.43,1,61.43c0,29.35-26.8,31.3-32.47,31.3h-169c-38.09,0-54,28.18-54,60.53V734.87c0,19.56,17.73,29.6,37.82,29.8s100.7-.58,100.7-.58c24.78,0,30.85,17.48,30.85,24.52.11,10.26.22,16.61.32,26.87,0,22.69,19.18,28.5,28.5,28.5h30.59c45.91,0,71.22,36.45,71.22,66.72v63.91c0,37.82-27.92,77.22-81.13,77.22-42,0-71.62,28.69-71.62,82.83,0,25.3-.64,49.86-.64,82.82"
            fill="none"
            stroke="#ccc"
            strokeWidth="2"
          />
            <path
            class="line-running" d="M176.22,79v71c0,27.58,7.16,33.5,18.45,42.46,11.87,9.41,26.87,9.95,38.55,9.86l35.21,0A44.78,44.78,0,0,1,301.7,217.7c13.1,13.3,12.13,29.54,12.13,40.89V289.7s1,48.43,1,61.43c0,29.35-26.8,31.3-32.47,31.3h-169c-38.09,0-54,28.18-54,60.53V734.87c0,19.56,17.73,29.6,37.82,29.8s100.7-.58,100.7-.58c24.78,0,30.85,17.48,30.85,24.52.11,10.26.22,16.61.32,26.87,0,22.69,19.18,28.5,28.5,28.5h30.59c45.91,0,71.22,36.45,71.22,66.72v63.91c0,37.82-27.92,77.22-81.13,77.22-42,0-71.62,28.69-71.62,82.83,0,25.3-.64,49.86-.64,82.82"
            fill="none"
            stroke="#000"
            strokeWidth="2"
          />
            <circle class="line-circle" cx="176.22" cy="110" r="5" fill="pink"/>
        </svg> -->
      <p class="max-content font-xs text-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos repellendus minus ratione dolores voluptate blanditiis, impedit eligendi rerum explicabo velit voluptates, vero incidunt esse quia nihil tempora, omnis illo fuga?
      </p>
<!--       <p class="max-content font-xs text-2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> -->
      <p class="max-content font-xs text-3"> Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      <p class="max-content font-s text-4">
        Nostrum cumque nulla</p>
      <p class="max-content font-xs text-5">
        Nostrum cumque nulla, fugit consequatur doloremque repudiandae sequi voluptatem id maxime!</p>
    </div>
    <section>
      <p class="font-l">THE END</p>
    </section>
  </main>
</div>
              
            
!

CSS

              
                :root {
  color-scheme: light dark;
/* 12.75-13.33px */
  --step--1: clamp(0.83rem, calc(0.78rem + 0.07vw), 0.80rem);
/* 17-20px */
  --step-0: clamp(1.06rem, calc(0.99rem + 0.37vw), 1.25rem); 
 /* 22.66-30px */
  --step-1: clamp(1.42rem, calc(1.24rem + 0.90vw), 1.88rem);
  /* 30.21-45px */
  --step-2: clamp(1.89rem, calc(1.53rem + 1.80vw), 2.81rem);
  /* 40.27-67.5px */
  --step-3: clamp(2.52rem, calc(1.85rem + 3.32vw), 4.22rem);
   /* 53.67-101.25px */
  --step-4: clamp(3.35rem, calc(2.19rem + 5.80vw), 6.33rem);
   /* 71.55-151.88px */
  --step-5: clamp(4.47rem, calc(2.51rem + 9.80vw), 9.49rem);
  
  --aspect-ratio-svg: 1160 / 6740.2
}
.font-xxl {
  font-size: var(--step-5);
  line-height: 1;
}
.font-xl {
  font-size: var(--step-4);
}
.font-l {
  font-size: var(--step-3);
}
.font-m {
  font-size: var(--step-2);
}
.font-s {
  font-size: var(--step-1);
}
.font-xs {
  font-size: var(--step-0);
}
@font-face {
  font-family: 'lillyregular';
  src: url('https://assets.codepen.io/1528559/Lilly__-webfont.woff') format('woff2');
}
body {
  font-family: 'lillyregular',  sans-serif;
  font-size: 1rem;
  margin: 0;
}
#line-svg {
  position: absolute;
  top: 1%;
  left:0;
  visibility: hidden;
  opacity: 0
}
section {
  min-height: 100vh;
    display: flex;
  justify-content: center;
  align-items: center;
}
#content-wrapper {

  position: relative;

  aspect-ratio: var(--aspect-ratio-svg); /*    svg viewbox*/

  
}
header: {
  height: 3rem;
  padding: 1rem 0;
}
.container {
  padding: 2rem 1rem 5rem;
  text-align: center;
  max-width: 1140px;
  margin: auto;
   visibility: hidden;
  opacity: 0;
}

.max-content {
  width: 16ch;
  margin: auto;
}
/* .logo, h1, .para {
  visibility: hidden;
  opacity: 0;
} */

.text-1 {
  top: calc((0.2 * 20%) + 20%);
  position: absolute;
  text-align: left;
  margin: 0;
}

.text-3 {
   top: calc((0.2 * 26%) + 26%);;
  position: absolute;
}
.text-5 {
  top:  calc((0.2 * 50%) + 50%);
  position: absolute;
  text-align: left;
  margin: 0;
}
.text-4 {
   top: calc((0.2 * 45%) + 45%);
  position: absolute;
}
@media(min-width: 767px) {
  .max-content {
  width: 29ch;
}
  .text-1 {
    margin: auto;
  }
  .text-5 {
  top:  calc((0.2 * 65%) + 65%);
}
  .text-3 {
   top: calc((0.2 * 35%) + 35%);;
}
}
/*  Base 330px; height at minimum device size(320) is 1740.22 ratio */





              
            
!

JS

              
                
gsap.set([".container","#line-svg"], {autoAlpha: 1})
gsap.set(["#cc-shade-outside", "#cc-shade-inside", "#heart-fill-1", "#heart-fill-2",
         "#heart-fill-3", "#heart-fill-4", ".logo", "h1", ".para"], {autoAlpha: 0})
const linesBase = gsap.utils.toArray("#base path")
const linesrunning = gsap.utils.toArray("#running path")
const texts = [".text-1", ".text-3", ".text-4", ".text-5"]
gsap.set([ linesrunning], {drawSVG: "0% 0%"})
gsap.set([".logo", "h1", ".para"], {y: 50})

gsap.to([".logo", "h1", ".para"], {autoAlpha: 1, y: 0, stagger: 0.1, duration: 1})

texts.forEach(text => {
   ScrollTrigger.create( {
    trigger: text,
   animation: gsap.from(text, {autoAlpha: 0, y: 50, ease: "sine.out"}),
     toggleActions: "play none none reset"
  })
})

function draw(el) {
  let tl = gsap.timeline({paused: true})
  tl
  // .to(el, {drawSVG: true, duration: 0.5})
  .to(`${el}-2`, {drawSVG: "50% 100%", duration: 0.5}, "<")
  .to(".line-circle", { duration: 0.5, motionPath: {
  path: el,
  align: el,
  alignOrigin: [0.5, 0.5],
  autoRotate: true,
}}, "<")
  .set(`${el}-2`, {autoAlpha: 0})
  return tl;
  
}

//Cofee text
 ScrollTrigger.create( {
    trigger: "#base #line-1",
    scrub: true,
    start: () => "top 70%",
    end: "bottom 50%",
     // markers: {startColor: "red", endColor: "red"},
    fastScrollEnd: true,
   animation: draw("#line-1"),
  })
//Cofee cup
 ScrollTrigger.create( {
    trigger: "#base #line-2",
    scrub: true,
    start: "top+=75 50%",
    end: "bottom center",
    // markers: {startColor: "black", endColor: "black"},
    fastScrollEnd: true,
   onEnter: () => gsap.to(["#cc-shade-outside", "#cc-shade-inside"], {autoAlpha: 1, stagger: 0.01, duration: 1}),
    onEnterBack: () => gsap.to(["#cc-shade-outside", "#cc-shade-inside"], {autoAlpha: 0, stagger: 0.01, duration: 1}),
   animation:  draw("#line-2")
  })

 ScrollTrigger.create( {
    trigger: "#base #line-3",
    scrub: true,
    start: "top+=19.3% 50%",
    end: "bottom center",
    // markers: {startColor: "blue", endColor: "blue"},
    fastScrollEnd: true,
   animation:  draw("#line-3")
  })
 ScrollTrigger.create( {
    trigger: "#base #line-4",
    scrub: true,
    start: "top+=42.5% 50%",
    end: "bottom center",
    // markers: {startColor: "green", endColor: "green"},
    fastScrollEnd: true,
   animation:  draw("#line-4")
  })
 ScrollTrigger.create( {
    trigger: "#base #line-5",
    scrub: true,
    start: "top 50%",
    end: "bottom-=10% center",
    // markers: {startColor: "red", endColor: "red"},
    fastScrollEnd: true,
   animation:  draw("#line-5")
  })
ScrollTrigger.create( {
    trigger: "#base #line-6",
    scrub: true,
    start: "top+=42% 50%",
    end: "bottom center",
    // markers: {startColor: "blue", endColor: "blue"},
  onEnter: () => gsap.to(["#heart-fill-1", "#heart-fill-2",
         "#heart-fill-3"], {autoAlpha: 1, stagger: 0.01, duration: 1}),
   onEnterback: () => gsap.to(["#heart-fill-1", "#heart-fill-2",
         "#heart-fill-3"], {autoAlpha: 0, stagger: 0.01, duration: 1}),
    fastScrollEnd: true,
   animation:  draw("#line-6")
  })
ScrollTrigger.create( {
    trigger: "#base #line-7",
    scrub: true,
    start: "top+=10% 50%",
    end: "bottom center",
    // markers: {startColor: "green", endColor: "green"},
    fastScrollEnd: true,
   animation:  draw("#line-7")
  })
ScrollTrigger.create( {
    trigger: "#base #line-8",
    scrub: true,
    start: "top+=10% 50%",
    end: "bottom center",
    // markers: {startColor: "green", endColor: "green"},
   onEnter: () => gsap.to("#heart-fill-4", {autoAlpha: 1, duration: 1}),
    fastScrollEnd: true,
  onEnterBack: () => gsap.to("#heart-fill-4", {autoAlpha: 0, duration: 2}),
   animation:  draw("#line-8")
  })





// ScrollSmoother.create({
//   smooth: 1,               // how long (in seconds) it takes to "catch up" to the native scroll position
//   effects: true,           // looks for data-speed and data-lag attributes on elements
//   smoothTouch: 0.1,        // much shorter smoothing time on touch devices (default is NO smoothing on touch devices)
// });

// tl.to(".line-base", {drawSVG: true, duration: 1})
// tl.to(".line-running", {drawSVG: "80% 100%", duration: 1}, "<")
// //.set(".line-circle", {motionPath: {start: 0.05}})
// .to(".line-circle", { duration: 1, motionPath: {
//   path: ".line-base",
//   align: ".line-base",
//   alignOrigin: [0.5, 0.5],
//   autoRotate: true,
//   start: 0.02
// }}, "<")
              
            
!
999px

Console