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

              
                %svg{:viewbox => "0 0 292 200"}
  %clippath#myClip
    %path{:d => "M57.2,107.32a11.81,11.81,0,0,1-1-5.31,21.29,21.29,0,0,1,1.22-6.36,34.07,34.07,0,0,1,3.2-6.72,41.94,41.94,0,0,1,4.9-6.52A43.17,43.17,0,0,1,72,76.66a36.09,36.09,0,0,1,7.61-4.33,16.71,16.71,0,0,1,3.12-1,18.85,18.85,0,0,1,3.64-.44,18.59,18.59,0,0,1,3.53.24,7.62,7.62,0,0,1,2.83,1,8.58,8.58,0,0,1,3.53,4.9,15,15,0,0,1,.2,6.28A26.09,26.09,0,0,1,94.26,90a38.13,38.13,0,0,1-3.48,6A26.21,26.21,0,0,1,87,100.43c-1.27,1.14-2.28,1.7-3,1.7a1.8,1.8,0,0,1-.85-.24,2.39,2.39,0,0,1-.77-.69,1.3,1.3,0,0,1-.24-1,2.14,2.14,0,0,1,.81-1.17,25.67,25.67,0,0,0,3.65-3.77,37.27,37.27,0,0,0,3-4.46,28.76,28.76,0,0,0,2.19-4.69,20.2,20.2,0,0,0,1.09-4.58c.33-2.59-.15-4.46-1.41-5.59a6.69,6.69,0,0,0-5.15-1.46,20,20,0,0,0-7.37,2.35,36.33,36.33,0,0,0-8.18,5.91,41.56,41.56,0,0,0-4.41,4.82,39.83,39.83,0,0,0-3.41,5.11,24.65,24.65,0,0,0-2.14,5,15.91,15.91,0,0,0-.73,4.49,7.8,7.8,0,0,0,.93,4,7.65,7.65,0,0,0,2.92,2.72,23.52,23.52,0,0,0,5,2c2,.6,4.44,1.27,7.25,2q2.27.65,4.74,1.54c1.64.59,2.92,1.08,3.84,1.45a13.56,13.56,0,0,1,5,3.24,7.47,7.47,0,0,1,1.94,3.89,6.62,6.62,0,0,1-.69,4,10.68,10.68,0,0,1-2.83,3.48,15.33,15.33,0,0,1-4.54,2.52,17.14,17.14,0,0,1-5.83,1,7.46,7.46,0,0,1-4.46-1.34,4.58,4.58,0,0,1-2.06-3.36,6,6,0,0,1,1.58-4.29q1.77-2.27,6.48-4.13c1-.38,1.79-.72,2.47-1s1-.5,1-.6-1.11-.61-3.32-1.34-5-1.55-8.51-2.47q-3.24-.9-5.5-1.74A23.72,23.72,0,0,1,61.62,112,11.24,11.24,0,0,1,59,109.91,11.05,11.05,0,0,1,57.2,107.32Zm29.89,15s-.39.1-1,.29-1.38.44-2.27.77-1.83.7-2.83,1.13a29.19,29.19,0,0,0-2.8,1.38A13.2,13.2,0,0,0,76,127.32a2,2,0,0,0-.85,1.46,1.29,1.29,0,0,0,.72,1.1,3.44,3.44,0,0,0,1.79.44,10.42,10.42,0,0,0,3.8-.69A15.86,15.86,0,0,0,84.66,128a12.52,12.52,0,0,0,2.23-1.86,4.71,4.71,0,0,0,1-1.42,2.21,2.21,0,0,0,0-1.62C87.75,122.57,87.47,122.3,87.09,122.3Z"}
    %path{:d => "M100.05,126.27a3.21,3.21,0,0,1-3.52,1,5.12,5.12,0,0,1-3-3.16,17.55,17.55,0,0,1-.81-4c-.21-1.86-.35-3.77-.4-5.75s0-3.78.08-5.42a6.25,6.25,0,0,1,.65-3,1.17,1.17,0,0,1,1.25-.49,2.24,2.24,0,0,1,1.34,1,3.2,3.2,0,0,1,.48,1.41,13.52,13.52,0,0,1,0,2.23,21.39,21.39,0,0,0-.12,3.08q0,1.86.21,3.72c.1,1.25.22,2.38.36,3.41a8.39,8.39,0,0,0,.45,2.1l.48,1.22A58,58,0,0,0,99.93,117c.51-1.78.94-3.24,1.3-4.38a8.73,8.73,0,0,1,1.09-2.47,2.07,2.07,0,0,1,1.78-.77,1.8,1.8,0,0,1,1.54.65,4.36,4.36,0,0,1,.61,1.9c.19,1.06.39,2.31.61,3.77s.48,3,.81,4.62.67,3.12,1,4.49a14.59,14.59,0,0,0,1.34,3.41,2.17,2.17,0,0,0,1.82,1.33c.81,0,1.52-.77,2.14-2.31s1.31-3.44,2.07-5.71a13.51,13.51,0,0,1-3.4-5.46,18.77,18.77,0,0,1-.93-6,17.86,17.86,0,0,1,.93-5.63,14.35,14.35,0,0,1,2.19-4.29,5.39,5.39,0,0,1,2.87-2.07,3,3,0,0,1,3,1.14,7.3,7.3,0,0,1,1.7,4.37,33.07,33.07,0,0,1,0,5.63,48,48,0,0,1-.73,5.31,21.63,21.63,0,0,0-.49,3.24c0,.21.15.23.45,0a8.09,8.09,0,0,0,1.09-.89c.43-.41.91-.9,1.42-1.46a16.76,16.76,0,0,0,1.42-1.82,12.71,12.71,0,0,1,1.5-2.07,1.63,1.63,0,0,1,1.17-.53,1.41,1.41,0,0,1,1.42.81,3.41,3.41,0,0,1,.36,1.22,5.09,5.09,0,0,1-1,2.43,18.17,18.17,0,0,1-2.43,3,18.92,18.92,0,0,1-3.08,2.51,5.43,5.43,0,0,1-2.83,1c-.33,0-.62.24-.89.73a12,12,0,0,0-.81,1.9c-.27.79-.58,1.66-.93,2.63a20.54,20.54,0,0,1-1.34,2.92c-1.24,2-2.76,3.13-4.54,3.24a5.52,5.52,0,0,1-4.7-2.27,8.93,8.93,0,0,1-1.66-2.83,33.75,33.75,0,0,1-1.17-3.69c-.32-1.27-.59-2.45-.81-3.56s-.38-1.91-.49-2.39c-.16.43-.36,1-.6,1.7s-.53,1.43-.85,2.19-.65,1.47-1,2.14A5.18,5.18,0,0,1,100.05,126.27Zm15.55-14.82a18.3,18.3,0,0,0,.13,2.43,6.62,6.62,0,0,0,.36,1.58,6.42,6.42,0,0,0,.53,1.05l.6.93c.27-1,.53-2.13.77-3.32a49,49,0,0,0,.69-5.1,11.82,11.82,0,0,0,.12-1.62c0-.76,0-1.51,0-2.27a10.43,10.43,0,0,0-.16-2c-.11-.57-.3-.85-.56-.85-.06,0-.22.19-.49.56a8,8,0,0,0-.85,1.7,17.84,17.84,0,0,0-.81,2.88A19.91,19.91,0,0,0,115.6,111.45Z"}
    %path{:d => "M140.23,120.36a9.62,9.62,0,0,1-3.44,3.81,5.84,5.84,0,0,1-3.73.77,6.11,6.11,0,0,1-3.36-1.79,8.62,8.62,0,0,1-2.23-3.93,14.79,14.79,0,0,1-.32-5.71,21.75,21.75,0,0,1,2.22-7.08c.38-.76.79-1.56,1.22-2.39a13.19,13.19,0,0,1,1.46-2.27,8.11,8.11,0,0,1,1.82-1.7,4,4,0,0,1,2.31-.69,5.07,5.07,0,0,1,3.16,1.46,8.32,8.32,0,0,1,2.39,3.68,21,21,0,0,1,.69,6c0,1.08,0,2,0,2.79s.06,1.18.12,1.18a3.26,3.26,0,0,0,1.41-.73,22.76,22.76,0,0,0,2-1.62,6.22,6.22,0,0,1,1.38-1.14,1.65,1.65,0,0,1,1.13-.08,1.33,1.33,0,0,1,.85.49,2.31,2.31,0,0,1,.2,1.13,3,3,0,0,1-.32,1.46,7.1,7.1,0,0,1-1.3,1.46q-2.91,2.67-5.42,2.67a1.49,1.49,0,0,0-1.1.45A8.36,8.36,0,0,0,140.23,120.36Zm-9.48-6.4a16.55,16.55,0,0,0,.45,4.29,5.15,5.15,0,0,0,1.17,2.35,1.86,1.86,0,0,0,1.62.61,3,3,0,0,0,1.7-.93c.76-.76,1.14-1.28,1.14-1.58s-.44-.61-1.3-.93a5.9,5.9,0,0,1-1.3-.73c-.43-.33-.87-.68-1.33-1.06a15.69,15.69,0,0,1-1.26-1.13Zm2.84-5.51a6.77,6.77,0,0,0,.52,2.84,6.46,6.46,0,0,0,1.26,1.86,4.65,4.65,0,0,0,1.46,1,3,3,0,0,0,1.13.33q.24,0,.45-.69a9.59,9.59,0,0,0,.28-1.74,14.79,14.79,0,0,0,0-3.12,15.63,15.63,0,0,0-.53-2.84,6.33,6.33,0,0,0-.93-2,1.54,1.54,0,0,0-1.13-.77.56.56,0,0,0-.41.16,3.17,3.17,0,0,0-1.58,1.9A8.71,8.71,0,0,0,133.59,108.45Z"}
    %path{:d => "M159.67,120.36a9.56,9.56,0,0,1-3.45,3.81,5.8,5.8,0,0,1-3.72.77,6.11,6.11,0,0,1-3.36-1.79,8.62,8.62,0,0,1-2.23-3.93,14.79,14.79,0,0,1-.32-5.71,21.75,21.75,0,0,1,2.22-7.08c.38-.76.79-1.56,1.22-2.39a13.19,13.19,0,0,1,1.46-2.27,8.11,8.11,0,0,1,1.82-1.7,4,4,0,0,1,2.31-.69,5.07,5.07,0,0,1,3.16,1.46,8.32,8.32,0,0,1,2.39,3.68,21.06,21.06,0,0,1,.68,6c0,1.08,0,2,0,2.79s.07,1.18.13,1.18a3.26,3.26,0,0,0,1.41-.73,22.76,22.76,0,0,0,2-1.62,6.46,6.46,0,0,1,1.37-1.14,1.68,1.68,0,0,1,1.14-.08,1.35,1.35,0,0,1,.85.49,2.31,2.31,0,0,1,.2,1.13,3,3,0,0,1-.32,1.46,7.1,7.1,0,0,1-1.3,1.46q-2.91,2.67-5.42,2.67a1.49,1.49,0,0,0-1.1.45A8.36,8.36,0,0,0,159.67,120.36Zm-9.48-6.4a16.55,16.55,0,0,0,.45,4.29,5.15,5.15,0,0,0,1.17,2.35,1.86,1.86,0,0,0,1.62.61,3,3,0,0,0,1.7-.93c.76-.76,1.14-1.28,1.14-1.58s-.44-.61-1.3-.93a5.68,5.68,0,0,1-1.3-.73c-.43-.33-.88-.68-1.33-1.06a15.69,15.69,0,0,1-1.26-1.13Zm2.84-5.51a6.77,6.77,0,0,0,.52,2.84,6.46,6.46,0,0,0,1.26,1.86,4.65,4.65,0,0,0,1.46,1,3,3,0,0,0,1.13.33c.16,0,.31-.23.44-.69a8.71,8.71,0,0,0,.29-1.74,14.79,14.79,0,0,0,0-3.12,16.54,16.54,0,0,0-.53-2.84,6.33,6.33,0,0,0-.93-2,1.54,1.54,0,0,0-1.13-.77.54.54,0,0,0-.41.16,3.17,3.17,0,0,0-1.58,1.9A8.71,8.71,0,0,0,153,108.45Z"}
    %path{:d => "M170.2,124.73a20,20,0,0,0,1.78-1.21c.48-.38.73-.65.73-.81a6.45,6.45,0,0,0-1.05-2.64q-1.07-1.81-2.44-3.8c-.91-1.32-1.82-2.62-2.71-3.89a31.75,31.75,0,0,1-1.9-3,10.62,10.62,0,0,1-1.34-5.75,7.05,7.05,0,0,1,1.5-3.85A5.26,5.26,0,0,1,167.69,98a3.68,3.68,0,0,1,2.95.49,4.17,4.17,0,0,1,1.58,3,11.21,11.21,0,0,1-1.21,5.75l-1.22,3.08c.6.86,1.28,1.86,2.07,3s1.52,2.24,2.22,3.32l2.52,3.89c.21,0,.63-.27,1.25-.81a24.55,24.55,0,0,0,2-2c.7-.79,1.37-1.58,2-2.39a12.17,12.17,0,0,0,1.38-2,6,6,0,0,1,1.54-2.06,1.84,1.84,0,0,1,1.29-.45,1.35,1.35,0,0,1,.93.61,1.86,1.86,0,0,1,.37,1.09,6.75,6.75,0,0,1-1.38,3.85,28.78,28.78,0,0,1-3.08,3.73,37,37,0,0,1-3.24,3l-1.94,1.58c-.11,1.25-.2,2.5-.28,3.77a19.49,19.49,0,0,1-.61,3.73,11.08,11.08,0,0,1-1.58,3.4,10.18,10.18,0,0,1-3,2.79,7.48,7.48,0,0,1-4.05,1.22,7,7,0,0,1-3.2-.85,5.85,5.85,0,0,1-2.1-2,4.53,4.53,0,0,1-.77-2.39,7.88,7.88,0,0,1,2.18-4.94A21.46,21.46,0,0,1,170.2,124.73Zm3.4,2.43a2.87,2.87,0,0,0-1,.49c-.54.32-1.14.7-1.79,1.13s-1.27.88-1.86,1.34a15.32,15.32,0,0,0-1.21,1c-1.25,1.41-1.8,2.49-1.66,3.24a1.53,1.53,0,0,0,1.37,1.34,4.4,4.4,0,0,0,2.76-.65,5.86,5.86,0,0,0,2.47-2.71c.21-.49.43-1,.64-1.62a8.51,8.51,0,0,0,.45-1.71,9.27,9.27,0,0,0,.12-1.33C173.84,127.34,173.76,127.16,173.6,127.16Zm-6.08-21.46c.06,0,.18-.21.37-.61a6.38,6.38,0,0,0,.44-1.34,9.07,9.07,0,0,0,.21-1.33c0-.41-.1-.61-.37-.61-.11,0-.23.13-.36.4a4,4,0,0,0-.33,1c-.08.38-.15.77-.2,1.17a1.64,1.64,0,0,0,.08.93C167.36,105.56,167.42,105.7,167.52,105.7Z"}
    %path{:d => "M188.67,127.89a1.83,1.83,0,0,1-2.76-.24,6.31,6.31,0,0,1-.45-2.31c-.13-1.38-.23-3.16-.28-5.35s-.07-4.68,0-7.49.12-5.71.28-8.71.38-6,.65-9,.62-5.86,1.06-8.5a55,55,0,0,1,1.58-7.09,16.48,16.48,0,0,1,2.14-4.82,6.88,6.88,0,0,1,3-2.59,4,4,0,0,1,3.12,0,5,5,0,0,1,2.43,2.47,10.88,10.88,0,0,1,1,5,32,32,0,0,1-.73,6.4,67.33,67.33,0,0,1-5,15,58.86,58.86,0,0,1-3.89,7L189,110.48v7.93c.48-.91,1.06-2.09,1.74-3.52s1.43-2.92,2.27-4.45,1.73-3,2.67-4.54a35.22,35.22,0,0,1,2.92-4,12,12,0,0,1,3-2.63,4.23,4.23,0,0,1,3.07-.57,2.31,2.31,0,0,1,1.06.57,3.24,3.24,0,0,1,.64,1.58,21.5,21.5,0,0,1,.33,3.4q.08,2.23.24,6,.08,4,.24,6.24c.11,1.46.22,2.55.33,3.28a9.06,9.06,0,0,0,.32,1.54c.11.3.24.64.41,1a14.72,14.72,0,0,0,2.95-4c.78-1.54,1.49-2.93,2.11-4.17a9.92,9.92,0,0,1,1.82-2.71c.6-.57,1.27-.47,2,.28a6.4,6.4,0,0,1,.48.69,1.33,1.33,0,0,1,0,.89,8.49,8.49,0,0,1-.56,1.62c-.3.68-.72,1.58-1.26,2.71-.76,1.57-1.44,2.89-2.06,4a14,14,0,0,1-1.87,2.6,6,6,0,0,1-1.86,1.37,4.92,4.92,0,0,1-2,.41,3.52,3.52,0,0,1-2.34-1.14,6.12,6.12,0,0,1-1.71-2.75,13.13,13.13,0,0,1-.28-2c-.08-1-.15-2.09-.2-3.36s-.11-2.62-.16-4-.1-2.8-.12-4.13-.06-2.52-.09-3.6,0-1.89,0-2.43q-.72.89-1.74,2a25.88,25.88,0,0,0-2.31,3c-.86,1.3-1.85,3-3,5.06s-2.37,4.71-3.77,7.9q-1.29,2.84-2.39,5A17.62,17.62,0,0,1,188.67,127.89Zm.89-28.67c-.11,1.46-.15,2.32-.13,2.59s.18.22.45-.16a19.76,19.76,0,0,0,1.25-2.39c.52-1.11,1-2.39,1.58-3.85s1.07-3,1.58-4.66,1-3.26,1.34-4.86.66-3.06.85-4.41a11.14,11.14,0,0,0,0-3.4q-.33-2.76-1.29-2.76c-.71,0-1.31.5-1.83,1.5A19,19,0,0,0,192,80.63,51.38,51.38,0,0,0,191,85.77c-.29,1.89-.54,3.73-.73,5.51s-.33,3.39-.44,4.82Z"}
  %path.path{:d => "M54.17,215s229.5-72.5,189.5-136.5S138.8,75,173.84,109.87,263.1,56.5,196.63,31s-129-9-154,15-37.5,78.55,2.5,68.53S95.92,97,93.92,77.5s-37.32,7.63-36,20.43,2.44,13.69,15,16,16.75,5.64,17,8.34-2.7,9-10.25,9.15-7.5-2.71-1.75-6.45,13-3.88,18.73-12.81,7.75-15.62,0-17.94-3.41,29.47,0,30.75,8.27-20.36,8.27-19.3.12,28.09,6.3,25.75,8.45-10,9-15.71S123.44,99,118.84,100s-5.92,6.24-5.17,9.87,1.5,14.95,9.75,8.92,8.5-14.65,8.5-13.09-6.16,16.55,1.67,17.55,9.26-18,5.18-20.77-10.26,3.77-6.35,9.71,13.46,6.33,17.12.39c0,0-3.69,8.77,2.13,9.72s7.5-3.5,8.25-7.77,1.12-12.68-3.65-12.72-5.85,4.43-5.1,8.06,9.71,11.75,16.73,2.32,5.06-12.47,2-12.19-8.5.74,1.25,15.74,2.25,18.5.5,20-8.22,1.43-5.66-4.3,12.29-7.64,14.66-12.66,13.38-15.29,16-30.14,2.6-15.06-1.21-15.15-11.35,20.5-8,50.5c0,0,9.8-23.5,16-24s-1.54,25.83,3.5,25S269.17,22.5,274.67-9", :fill => "none", :opacity => "0", :stroke => "#3cbcbc", "stroke-miterlimit" => "10"}
  %path#text{"clip-path" => "url(#myClip)", :d => "M79.67,102.48s18.5-7.59,14-27.16c0,0-2-4.57-8.5-2.57S70.92,77.5,65.92,85s-10.5,15.12-6,23.94c0,0,6.3,5.14,14.25,5.59s13,4.81,15.25,6.7-.25,7.66-3.5,9.09-7,2.34-9.48,1.13-4-3.08-2.27-5.14,6.25-5.08,10.75-5.08.25-11.36.25-11.36L82.92,88.65h22.25L93.92,101.81s-.25,17.29,1.25,20.49,3.25,4.2,4.25,1.2l4.68-14.08s1.82,16.46,3.94,19.08,3.66,5.44,7,1.82,7.13-22.82,4.88-29.44-6.5,6.12-6.25,8.06,0,15,9,10.44a14.78,14.78,0,0,0,6-6.26s-.13,12.48,6.75,9.18,5.94-15.93,3.35-19.42-8.25.81-8,6.06,9,11.94,17,4.44c0,0-.06,10.54,5.44,9.5s6.19-5.09,6.69-8.92,1.19-10.58-3.65-12.71-6.23,6.61-5.35,8.62,2.12,4.87,6,5.87,9.05.14,10.33-2.74,4.56-7.38,2.67-12.25-6.83,1.41-3.91,6.25,12.28,14.88,9.28,22.62-6.87,9.13-10.5,6.88,2-8.38,7-10.75S185.67,115,187,111.49,204.77,79,196.63,73.83,186.4,107,187.37,125c0,0,10.63-23.83,16.46-25,0,0,1.17-1.16,1.34,3.75s-.5,19.75,2,20.25,4.16-1.33,5.16-3.5,5.43-10.63,5.43-10.63", :fill => "none", :stroke => "#4aceb5", "stroke-miterlimit" => "10", "stroke-width" => "6"}

%div
  - (1..100).each do |i|
    %div{:class => "dot dot2"}
%div
  - (1..100).each do |i|
    %div{:class => "dot dot1"}
    
              
            
!

CSS

              
                body {
  min-height: 100vh;
  overflow: hidden;
  background-color: #e6495a;
}

svg {
  position: absolute;
  width: 70vw;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.dot {
  transform-box: fill-box;
  border-radius: 50%;
  opacity: 0;
}
.dot1 {
  background-color: #4aceb5;
}
.dot2 {
  background-color: #fff;
}

@for $i from 1 through 200 {
  .dot:nth-child(#{$i}) {
    width: 1px + $i/7;
    height: 1px + $i/7;
  }
}

.gsap-3-logo {
    width: 20vw;
    max-width: 150px;
    position: fixed;
    bottom: 15px;
    right: 15px;
}
              
            
!

JS

              
                //register the plugin
gsap.registerPlugin(MotionPathPlugin, DrawSVGPlugin);
  
gsap.set('.dot', {
	xPercent: -50,
	yPercent: -50,
  autoAlpha: 1,
	transformOrigin: "50% 50%"
});

const timeline = gsap.timeline({ 
    delay: 1,
		defaults: {
      ease: "linear",
		}		  
	})
.from('.dot',{
  duration: 0.8,
  autoAlpha: 0,
  stagger: {
    each:-0.0009,
   },
}, 0.2)
.to('.dot1', {
  duration: 4,
	immediateRender: true,
	motionPath:{
    path: '.path',
    align: '.path'
   },
   stagger: {
     each:-0.0009,
   },
},0.1)
.to('.dot2', {
  duration: 4,
	immediateRender: true,
	motionPath:{
    path: '.path',
    align: '.path'
   },
   stagger: {
     each:-0.0009,
   },
},0.15)
.fromTo("#text", {
  drawSVG:"0%"
},{
  drawSVG:"100%", 
  immediateRender:true,
  duration: 1.85,
}, 2.03)
.to('.dot',{
  duration: 0.4,
  autoAlpha: 0,
  stagger: {
    each:-0.0009,
   },
}, 3.5)

//Chris Gannons timeline scrubber tool
// ScrubGSAPTimeline(timeline);





              
            
!
999px

Console