Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

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

+ add another resource

Behavior

Save Automatically?

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

Auto-Updating Preview

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML Settings

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

HTML

            
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1462.84 1540.42">
	<defs>
		<mask id="mask1">
			<path id="pathmask1" d="M206.47,316.52C230.69,329.31,309,370,335,378.47c30.86,10.1,27.06-1.63,46.79,24.16" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:120px"/>
		</mask>
		<mask id="mask2">
			<path id="pathmask2" d="M60,708.2C84.22,721,171.78,744.3,197.82,752.81c30.86,10.1,27.06-1.63,46.79,24.17" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:120px"/>
		</mask>
		<mask id="mask3">
			<path id="pathmask3" d="M219.63,1450.42c13.34-22.8,57.07-188.89,67.86-213,8.38-18.75,19.68-36.05,28.4-54.64,9.93-21.16,16.4-43.74,22.82-66.2l36.89-129c7.84-27.37,15.72-55.1,16.5-83.57" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:180px"/>
		</mask>
		<mask id="mask4">
			<path id="pathmask4" d="M520.8,586.42C585.47,542.88,747,469.84,817,435.51c16.18-7.94,73.6-53.32,89.72-61.39,72-36,82.39-42.53,162.57-49.7,12.65-1.13,58.52,30.34,67,39.83,5.62,6.3-37.13,100.22-36.21,108.62,1.65,15-114.23,53.28-119.39,67.47" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:180px"/>
		</mask>
		<mask id="mask5">
			<path id="pathmask5" d="M611.26,418.56c-8.19,43.35,11.14,224,9.73,268.05-1,30-19.93,61.69-27,90.86L539.15,1003c-9.32,38.36-18.68,76.84-32.75,113.73-10.1,26.49-22.57,52-35,77.47-13.76,28.15-37.09,87.58-50.85,115.72" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:135px"/>
		</mask>
		<mask id="mask6">
			<path id="pathmask6" d="M721.22,75c47,54.31,106.6,65.89,122.14,116.45s-8.86,103.17-15.13,155.69c-17,142.39-34.22,285.63-75.54,423-9,30-19.44,60.12-38,85.33S668.21,900.57,637,902.54c-14.84.93-30.84-2.77-40.88-13.73-14-15.28-12-40.27-1-57.85s74.64-25.83,92-37.18C788.53,727.42,840.79,633.7,957,599.31c32.44-9.6,71.2,6.18,101.64-8.58s58.3-38.84,68.35-71.15c6.45-20.74,3.77-46.16-12.92-60.07-9.41-7.85-22-11-34.31-11-36.27.14-68.25,26.71-85.41,58.66S972.09,576,967.22,611.92q-13.82,101.87-27.61,203.73c-5.91,43.65-12,87.9-29.3,128.4-23.3,54.55-65.88,99.14-114.17,133.6-83,59.19-182.52,90.56-282.13,112.06" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:150px"/>
		</mask>
		<mask id="mask7">
			<path id="pathmask7" d="M577.69,809.81c31,24,151.28,48,186.9,64.41,28.95,13.33,22.14,16.21,45.8,37.57,74.3,67.09,143.72,139.48,219,205.47,30.65,26.87,74.57,59.3,110.42,78.69,80.93,43.78,151.88,25.71,233,69.09" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:180px"/>
		</mask>
	</defs>
	<path id="path4" mask="url(#mask4)" d="M1155,421.75c-.32-14.31-7.25-24.32-12.93-32.52-9-13-21.25-20.61-45.69-35.77-4.6-2.86-10-6-17.68-7.78-13.93-3.17-26.77.3-26.89,2.42,0,.56.86.92,1.75,3a8.18,8.18,0,0,1,.79,2.73c-.44,3-24.15.1-43.65,2.32-10.4,1.18-20.68,5-41.23,12.58-23.72,8.77-35.58,13.16-40.59,16a44.57,44.57,0,0,1-14.55,5.59c-4.94.93-6,.2-10,.89-8.92,1.53-8.45,6-18.91,10.24-3.53,1.43-2.74.58-22.57,6l-3.51,1a649.65,649.65,0,0,0-98.91,36.44h0l-.73.41-.42.24c-20.09,11.18-47.3,21.31-47.3,21.31-49.44,18.4-67.65,45.65-94.56,48.45-1,.1-3.5.33-4.93,2.17C605.14,527,631.3,572.85,662,573.82c13.11.41,26-7.5,27.61-8.35,9-4.81,10.26-9,22.16-16.65,20.82-13.44,21.89-9.09,30.51-18.34,10.35-11.1,18.78-26.16,24.53-27a36.11,36.11,0,0,0,5.45-1.12c1.59-.44,2.74-.88,2.89-.94,6.85-2.53,69.85,1.14,97.14-19.23l.32-.24c13.54-10.07,27.52-11.67,33.49-12.72,5.7-1,4.09-1.51,36-16.73,34.53-16.47,51.8-24.71,53.51-22.33,3.26,4.52-29.5,33.71-44.53,47.09-25.27,22.52-55.83,46.77-55.12,47.69.3.4,6.27-3.84,7.16-2.82,1.14,1.31-8.13,8.76-6.37,12.88,1.29,3,7.8,2.66,14.23,2.71,10.93.09,18.6,1.39,33.95,4,20.62,3.49,23.17,8.24,34.41,6,8-1.61,17-6.1,16.83-6.73-.08-.26-1.6.37-2-.12-1.34-1.8,14.75-17,33.42-29.69,22.85-15.58,29.84-14.11,32.21-13.41,4.64,1.39,7.64,4.61,14.36,4.57,4.52,0,8.36-1.52,12.89-4,10.51-5.8,16.92-12.68,20.65-16.35,16-15.77,21-10.33,32.18-22.8C1142.54,456.22,1155.46,441.82,1155,421.75ZM662.19,498q3.15-6.1,9.17-6.12C671.56,498.2,667.3,498.86,662.19,498ZM688,490q-2.79-5.82,3.07-7.82Q693.59,492.19,688,490Zm226.59-95.71c2.18-3.06,10-4.2,9.78.83Z"/>
	<path id="path3" mask="url(#mask3)" d="M377.16,861.38c6.29-3,4.58-11.18,7.49-16.4,12.57,23.14,30.44,48.26,27.16,75.44-3,24.73-4.26,48.7-10.56,72.43-7.89,29.69-23.76,62.37-22.55,93.76.27,7,4,12.14,5.15,18.84,1,5.71.63,12.94.44,18.83-.46,14.9-6.19,29.2-9.6,43.63-5.75,24.37-16.65,49-26.76,72.3-6.12,14-10.15,24.39-7.61,40,2.3,14.16,1.64,26.3,0,40.6-1.4,12.37,2.78,23.42,1,35.06-2.25,14.52-10.57,25.65-21.43,35.16-17.86,15.66-44.31,2.15-62.23-8.68-12.05-7.29-22.32-19.44-29.9-31.79-3.85-6.25-6.33-13.63-11.11-19.28-4.56-5.4-10.47-5.26-15.44-8.92-8.25-6.07-6.27-17.52-6.46-26.21-.05-2.21-10.28-43.29,1.11-36.18-2.85-14.49,25,.5,32.27-5,5.9-4.44,9.9-17.58,13.44-24.12,5.06-9.34,9.83-18.84,14.71-28.28,9.41-18.23,20.49-35.72,29.09-54.34,8.26-17.9,13.85-36.76,20.42-55.31,13.27-37.44,27-73.94,37-112.43C353.15,940.48,365.08,900.9,377.16,861.38Z" />
	<path id="path1" mask="url(#mask1)" d="M376.18,437.28c-8.85-1.25-16.26,2.58-20,5a1.09,1.09,0,0,1-1,.1l-84-32a1.13,1.13,0,0,1-.68-.79,38.39,38.39,0,0,0-3.55-9.54c-4-7.43-8.91-8.5-15.41-19.13-6.28-10.27-7.72-12-2.11-21.51C256.13,348,276.18,341.9,287.89,336c14.14-7.14,26.07-14,41.79-10.74,25.67,5.28,45.55,20.37,65.92,35.75a1.1,1.1,0,0,1-.81,2h0A1.09,1.09,0,0,0,393.5,364c0,7,5.36,7.9,6.41,13.69a1.09,1.09,0,0,0,1.3.88l.87-.17a1.11,1.11,0,0,0,.86-1.3c-2.5-12.4,6.29-.37,9.6,4.73,7.42,11.38,10.88,28.77,11.48,42.07.42,9.14-1,14.44-5,18.27-7.21,6.92-22.56,5.45-38.63-3.92a.94.94,0,0,0-.23-.1A24.7,24.7,0,0,0,376.18,437.28Z" />
	<path id="path2" mask="url(#mask2)" d="M155.61,791.53c-6.13-13.95-16.31-22.9-28-32.17-5.61-4.44-12.32-9.79-17-15-2.59-2.89-3.94-3-3.53-7,.24-2.39,7.11-8.06,2.65-10.17,4.39-2,5.87-.95,2.71-5.86,7.91-1.63,14.4-7,22.2-8.84,8.78-2,13.4-5.15,21.55-9.34,14-7.22,26.47-4.23,40.91-.67,17.75,4.37,34.83,9.39,51.48,17.17,7.36,3.44,11.61,6.24,16.89,12.11,4.84,5.39,11.36,8.56,14.13,15.5,2.19,5.48,2,12,3.24,17.72,1.63,7.5,3.24,11.58-.55,18.68-6.41,12-16.23,19.19-29.32,22.4-13.79,3.38-28.35,5.65-42,1.67Z" />
	<g id="group6" mask="url(#mask6)">
		<path d="M945.57,985.58a40,40,0,0,0-6,10c-12.93,30.57-23.13,40-32.67,57.85-7.69,14.35-15.62,27.93-30.36,40.44-9.54,8.1-11.85,7.2-27,17.66-25.75,17.74-46.22,39-45.26,40.18.8,1,17.91-10.7,16.7-13.13-1-1.91-12.65,3.23-35.82,9.06-22.28,5.59-35.09,6.77-35.34,5.76-.2-.8,7.43-2.43,7.4-5.27,0-2.21-4.68-4.32-5.63-3.44-.7.65,1,2.52,0,4.06a3.16,3.16,0,0,1-3.9,1c-.32-.22-.62-.64-.52-.89.18-.43,1.44,0,1.8-.58,0,0,.24-.38-.15-1.13-1.81-3.49-54.66,15.38-54.66,15.38-27.11,9.68-40.66,14.52-45.58,15.54-46.76,9.65-95.51-18.2-93.83-26.94,1.39-7.21,36.1,4,87.72-13.58,25.67-8.77,46.57-21.61,57.78-28.5A360.94,360.94,0,0,0,745,1076.55c29.28-24.55,20.3-23.91,54.8-55.69,11.48-10.57,26.64-23.69,29.86-44.63.29-1.87.29-2.6.49-4.44,3-28.37,21.68-47.17,37.19-74.7,10-17.73,14.76-32.17,22.07-54.28,6-18,9-31.42,13.32-50.22,6.64-29.25,20.94-66.57,21.1-95.59-7.52.67-11.69,6.23-18.71,8.48,8.42-26.33-20.94-2.79-26.74,6.48l3.86-.51c-9.75,11.58-18.59,21.77-27.46,33.61-8.62,11.51-24.45,17.71-32,29-6.29,9.37-2.73,20.9-9.28,30.73-5.61,8.41-13.86,7.6-11.73,18.41l-4.17-1.85q6.49,5.06,2.44,8c-12.39-11.44-20.31,1.84-33.73-2.85-3.45-1.2-5.13-10.17-9.06-12.6-2.18-1.34-6.61.76-8.86-.9-11.09-8.13-12.23-14.59-18.26-26.11,1.64,5.16.83,7.85-2.42,8-3.27-9.28-5.12-21.46-8.07-28.8-2-4.87-8.16-8.72-8.11-14.45.09-9.4,4-2.64,6.62-10.6,2.83-8.5,3.32-27.81,9.26-35.16,5.5-6.82,13-5.16,21.79-16.82.91-1.2,1.52-2.12,1.72-2.43,13.6-20.33,86.58-49.17,87.34-47.25,0,0,0,0,0,1.36v1.38c13.12-2.89,26-8.86,38.3-14.14,9.43-4,10.19-4.6,22.92-8,10.42-2.79,50.46-11.36,49.66-23.45,17.72,4,76,42.11,78,66.92l-4.24,4.91q-10.29,1.2-2.55,11.81c-1.75,6-2.42,16.93-5.32,22.6-3.57,7-8.32,5.42-11.48,13.1-3.24,7.89-1,19.16-3.65,27.75-11.39,36.54-13.28,77.48-20.82,116.14-4.69,24,4.22,26.87,1.88,48.88-2.36,22.28-23.08,45.07-27.35,61.2A50.37,50.37,0,0,1,945.57,985.58Z" />
		<path d="M981,873.79c1.68-6.07,3.36-12.14,5.28-19,3.77,5.47,2.66,10.3-3.49,19.46Z" />
		<path d="M904.47,198.06c6.58-12.55-2.48-30-9.27-42.65C875,117.7,842.69,97.14,840.7,99.08c-.79.78,3,5.36,1,8.4-.89,1.33-2.78,2.19-3.65,1.65s0-2.23-.68-4.06c-1.26-3.48-7.3-5.35-8.68-3.86s2.71,6.65,1.57,7.63c-1.63,1.39-11.48-7.78-12.72-6.54a1.18,1.18,0,0,0-.14,1.2c.25.46.87.37,1.08.84a.94.94,0,0,1-.19,1c-.72.54-2.38-1.72-4-1.49s-2.44,3-2.89,4.1c-3.48,8.53-23.55,8.66-23.46,12,0,1.32,3.24,1.77,3.23,3.63s-3.51,3.5-3.07,4.49c.19.43,1,.37,1.06.85s-.55.94-.93,1.22a3.9,3.9,0,0,1-1.94.9c-2,.2-2.89-2.05-5-1.84a3.48,3.48,0,0,0-1.14.35c-7.74,3.44-13.88,4.24-15.71,8.73-1.16,2.84-.08,5.83-.39,5.87s-.34-5.51-2.16-6.14c-3.36-1.16-16.18,13.22-14.45,27.46.88,7.25,5.53,12.48,14.83,22.94,7.46,8.39,12.33,11.3,17,20.49A52.28,52.28,0,0,1,783.37,220a56.59,56.59,0,0,1,0,25.82c-4.7,22.37-6.71,70.6-6.25,95.37.6,32.18,5.72,43.31.35,71.38-1.91,10-3.47,13.37-5.37,23.37a177.23,177.23,0,0,0,.16,66.48c0,16.7-4.94,34.88-3.37,51.34.75,7.8,1.87,14,1.75,19.57a96.33,96.33,0,0,1-2.37,19.23c-3,13.73-9.06,46.82-17.39,94.08l87.34-47.25C838.7,598,844,571.81,849,555.1a200.23,200.23,0,0,0,8.46-40.91c.85-8.8.64-16.56.71-29.6.16-29,.15-35.74,0-75.63a255.08,255.08,0,0,1,4.22-46.68c3.36-18.11,5.22-16.92,14.09-51,10.54-40.45,7.2-39.4,13.33-52.25,4.4-9.24,9.19-16.24,8.6-27.07-.4-7.15-2.91-11.69-1.12-19.7C898.89,205.14,902.36,202.06,904.47,198.06Zm-122.41-58.3c-3.14-1.94-4.67-1.77-4.6.48l3.87,2.3c-1.11,2.38-12-3.56-13.26-4.07C771.08,138,783.69,128.3,782.06,139.76Z" />
	</g>
	<g id="group7" mask="url(#mask7)">
		<path d="M967.9,998.21c15.66,14.32,30.48,19.89,51.41,35.18,4.67,3.41,7.45,5.46,11.34,8.61,9.29,7.53,11.78,10.89,24,18.16,15.17,9,22.75,13.49,27.16,15.51,9.77,4.49,20.63,8.37,20.23,12.59-.16,1.69-2,2-2.28,3.12-1.71,7,61.6,27.73,102.85,42.64,59.17,21.4,55.11,24.36,104.94,40.79,18.48,6.09,36.33,14,54.87,19.94,20.3,6.49,44.57,13.29,58.1,31.92,1.52,2.09,7.13,10,4.52,14.2-2,3.27-7.33,1.75-18.7,5.21-6.48,2-11.31,3.44-12.25,6.81-1.51,5.37,8.21,10.56,6.83,13.57-1.56,3.41-14.8-1.45-28.12-1.42-16,0-20.93,7.11-38.54,13.58-29.16,10.7-61.88,8.28-86.87,6.42-10.06-.74-17.27-2-26.34,1.69s-13.64,9.63-22.71,9.11c-5.07-.29-5.85-2.29-11.71-4.16-16.52-5.27-24.8,6-34.61,1.4-12.29-5.79-8.07-27.67-18.66-30.14-7-1.64-13.63,6.92-21.56,3.1a15.52,15.52,0,0,1-4.89-4c-3-3.65-3-6.94-4.33-11.63-1.69-6-4.4-10-7.7-14.78a60.63,60.63,0,0,0-10.13-11.38c-21-18.81-25.86-27.88-53.1-49.78-46.42-37.31-62.66-35.37-75.92-60.46-2.61-4.93-3.63-7-6.95-12.71,0,0-2.7-4.61-6.34-9.91-10.63-15.47-31.16-28.66-31.16-28.66-38.61-24.8-83.09-85-85.87-88.82a284.76,284.76,0,0,0-26.94-31c-1.07-1.08-2.13-2.08-3.37-3.22-28.4-26.14-58.77-39.37-80-46.47Q709.15,895,703.26,897l-2.91-4.47c6.06.3-20.17-3-12.22.6-13.26-6.05-14.45-11.56-20.59-24.85-2.87-6.23-9.28-18.51-5.1-28.33,3.22-7.55,20.16-11.11,28.27-13.85C728.13,813.43,761,831.42,793,850.52c31.12,18.57,21.47,17.83,69.68,48.73h0c38.07,21.41,87.55,78.54,87.55,78.54C964.34,994.12,962.8,993.55,967.9,998.21Z"/>
		<path d="M1076.8,1238.78l-18.23-14.51,1.1-1.47c6.66,4.12,13.74,7.65,18.95,13.76Z"/>
		<path d="M1069.32,1217.78c-8.84.39-12.4-4-16-13.45Z"/>
	</g>
	<g id="group5" mask="url(#mask5)">
		<path d="M561.35,575.41c14.58,23.76,15.82,55.86,9.42,98.78-1.31,8.84,3.28,23.24-12.1,107.22-6.79,37.08-12,74.43-16,111.91-3.35,31.13-12.7,60.93-16.49,91.71-10.86,88.26-47.62,188.5-91.3,267.41,14.74,7.55,72.68-156.36,75.36-165.55-1.18,5-9,35.89-7.52,36.4.73-2.12,6.75-25.58,10.62-24.32-17.71,68-54.31,132-89,192.56,2.45,2.07,4.44,1.15,6-2.73-6.54,19.44-22.6,40.59-31.51,58.45,17.25-11,26-35.55,42.73-48.37,17.24-13.2,33.2-26.12,47.5-43.62,15.32-15.09,24.24-32.85,32.75-53,8.77-20.7,15.5-29.77,26-50.12l-15.71,15.7c-4.33-3.59,10.13-24,10.44-30.39,9,9.08,16.83-15.73,15.86-16.16-1.77,5.94-6.21,9.46-12.4,10.09,2.89-7.15,14.81-27.23,13.62-31.41l-2.7,3.5c5.41-14.74,13.44-26.52,17.73-41.42l-4.22,5.55c-.86-20.14,15-29.2,23-43.57a2.73,2.73,0,0,1-2.64-.31c2.87-8.53,29.2-67.15,15.45-60.86-.83-10.36,5.81-28,8.91-38.42,5.63-19,9.53-33,13-51.55,6.55-34.58,12.23-66,15.68-101.91,3.09-32.17,8.71-69.16,18.05-98.55,5.68-17.84,9.4-34,10.24-53,.21-4.84,2.26-12.94.19-23.09,0,0-2.6-12.7-10.26-22.56a26.4,26.4,0,0,0-8-6.66,38.55,38.55,0,0,1-11.79-10.41l-18.5-24.49A34.3,34.3,0,0,0,601,519c-3.38-.47-6.83-1.44-12.95-1.07-8,.49-16,2.5-20.78,6.63-2.29,2-7.64,5.7-10.11,12.66-1,2.81-1.53,6.07-.68,14.33A124.23,124.23,0,0,0,561.35,575.41Z"/>
		<path d="M537.24,1180.9q-3.82,8.41-7.66,16.84C527.18,1190.7,529.71,1185.14,537.24,1180.9Z" />
		<path d="M566.87,1090.79l7.74-18.24C576,1076.15,573.25,1094.82,566.87,1090.79Z"/>
		<path d="M566.45,1112.81q-3-7.66-6.47,3.92c-.56-9.87,2.24-9.2,10.26-13.86Z" />
		<path d="M577.89,1066.64c-1.3-3.91,3.87-20.68,7.21-20.53C585.1,1053.68,581.05,1059.84,577.89,1066.64Z" />
		<path d="M537.61,1201c-7.4,13.59-6.37,9.72-16.45,14.45C523.78,1211.38,533.45,1202.71,537.61,1201Z"/>
		<path d="M492.61,1253.62l2-2,4.89-5.14,2.44-2.57,1,.82a83.47,83.47,0,0,1-5.89,8.74C496.38,1254.23,494.12,1253.61,492.61,1253.62Z"/>
	</g>
</svg>
<a href="https://twitter.com/AlaricBaraou">
  <img id="twitterbtn" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/939680/twitterpaint.png' alt='twitter paint logo'>
</a>
<img id="replaybtn" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/939680/replay.png" alt="replay button"/>
            
          
!

CSS

            
              html{
  height:100%;
  width:100%;
  margin:0;
  overflow:hidden;
  background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/939680/bg_paper.jpg');
  background-size:cover;
}
svg{
  max-height:100%;
  max-width:100%;
  position: fixed;
  left:0;
  top:0;
  opacity:0;
}
path{
  fill:#000000;
}
#twitterbtn{
  position:fixed;
  bottom:80px;
  right:10px;
  width:10%;
  max-width:50px;
  min-width:50px;
  opacity:0;
  cursor:pointer;
}
#replaybtn{
  position:fixed;
  bottom:10px;
  right:10px;
  width:10%;
  max-width:50px;
  min-width:50px;
  opacity:0;
  cursor:pointer;
}
            
          
!

JS

            
              var t = new TimelineMax({
  delay:2,
  onReverseComplete:function(){
      t.timeScale(0.8);
      t.play();
  }
});

t.timeScale(0.8);

t
.set('svg',{opacity:0.75})
  .fromTo('#pathmask1',0.4,{drawSVG:false},{drawSVG:true})
.fromTo('#pathmask2',0.4,{drawSVG:false},{drawSVG:true})
.fromTo('#pathmask3',0.6,{drawSVG:false},{drawSVG:true})
.fromTo('#pathmask4',1,{drawSVG:false},{drawSVG:true})
.fromTo('#pathmask5',1,{drawSVG:false},{drawSVG:true})
.fromTo('#pathmask6',0.75,{drawSVG:false},{drawSVG:"0% 27%",ease: Power0.easeNone})
.set('#pathmask6',{drawSVG:"0% 44%"})
.to('#pathmask6',0.25,{drawSVG:"0% 54%",ease: Power0.easeNone})
.set('#pathmask6',{drawSVG:"0% 70%"})
.to('#pathmask6',0.75,{drawSVG:true,ease: Power0.easeNone})
.fromTo('#pathmask7',1,{drawSVG:false},{drawSVG:true})
.add('showbtn')
.to('#replaybtn',0.4,{autoAlpha:1},'showbtn')
.to('#twitterbtn',0.4,{autoAlpha:1},'showbtn');

document.getElementById('replaybtn').addEventListener('click',function(){
  t.timeScale(3);
  t.reverse();
});
            
          
!
999px

Console