cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <div class="wrap"><!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In  -->
<svg version="1.1"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 x="0px" y="0px" width="3392.2px" height="914.7px" viewBox="0 0 3392.2 914.7" style="enable-background:new 0 0 3392.2 914.7;"
	 xml:space="preserve">
<style type="text/css">
	.st0{clip-path:url(#SVGID_2_);}
	.st1{fill:none;stroke:#0000AC;stroke-width:9.951;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st2{fill:none;stroke:#0000AC;stroke-width:9.9508;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st3{clip-path:url(#SVGID_4_);}
</style>
<defs>
</defs>
<g>
	<defs>
		<path id="SVGID_1_" d="M179.5,727.7V194.1h193.6v361.6h163.2v172H179.5z M601.1,727.7V194.1h193.6v533.6H601.1z M901.9,727.7
			V194.1h184.8l124,201.6c20,32,32.8,52.8,50.4,94.4h5.6c-8-33.6-16.8-87.2-16.8-126.4V194.1h185.6v533.6h-185.6l-132.8-210.4
			c-12-19.2-26.4-47.2-36.8-69.6h-5.6c5.6,28.8,12,74.4,12,98.4v181.6H901.9z M1708.3,661.3l-14.4,66.4h-204.8l184.8-533.6h214.4
			l190.4,533.6h-205.6l-17.6-66.4H1708.3z M1786.7,372.5h-7.2c-0.8,22.4-4,40.8-8.8,60l-26.4,102.4h77.6l-24.8-102.4
			C1792.3,411.7,1789.1,391.7,1786.7,372.5z M2373.1,417.3h300v12c0,65.6-5.6,154.4-69.6,223.2c-52.8,56.8-138.4,87.2-226.4,87.2
			c-112,0-180-44.8-220-88c-50.4-54.4-68.8-119.2-68.8-189.6c0-97.6,37.6-159.2,73.6-196c43.2-44.8,116.8-84,224-84
			c57.6,0,107.2,11.2,156.8,37.6c45.6,24.8,77.6,55.2,102.4,98.4l-180.8,67.2c-11.2-17.6-32.8-40.8-73.6-40.8
			c-28,0-51.2,9.6-68,24.8c-21.6,20-39.2,54.4-39.2,100.8c0,36,12,72.8,35.2,95.2c15.2,14.4,36,24,63.2,24
			c28.8,0,66.4-10.4,79.2-45.6h-88V417.3z M2755.4,727.7V194.1h360v146.4H2949v49.6h151.2v140H2949v51.2h171.2v146.4H2755.4z"/>
	</defs>
	<clipPath id="SVGID_2_">
		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
	</clipPath>
	<g class="st0">
		<path class="st1" d="M3376.9,513.3c15.8-64.8,13.8-134.7-9.5-202.4c-33.2-96.5-103-170.4-189.1-209.5c-2.4-1.1-7.2-3.2-9.6-4.3
			c-16.8-7.4-34.2-13.6-52.2-17.8c-8.3-1.9-24.9-5.4-33.2-6.9c-65.6-12.1-135.3-2.9-200.9,25.7c-93.5,40.9-160.9,116.6-193.6,205.3"
			/>
		<path class="st2" d="M3014.5,40.5c-48,1.5-96.4,12-143.1,32.4c-56.5,24.7-104.2,61.3-141.4,105.5"/>
		<path class="st2" d="M3285.9,678.3c53.3-144.8,45.6-263.5,45.6-263.5c-1.6-36.5-9.8-73.2-25.3-108.7
			c-67.5-154.3-247.3-224.7-401.6-157.3c-119.8,52.4-189,172.5-182.4,295.8v0c0,0,4.1,62.9-14.2,153"/>
		<path class="st1" d="M3332.5,618.1c32.3-116.7,26.7-204.6,26.7-204.6l0,0c-1.8-39.8-10.7-79.9-27.6-118.6
			c-73.6-168.3-269.7-245.1-438-171.5c-49,21.4-91.3,52.4-122.3,91.7c-5.4,6.9-15.9,20.9-20.9,28c-33,46.7-52.7,102.6-55.3,160
			c-0.5,10.7-0.8,32-0.5,42.7c0.7,26.9,2.7,42.3-6.4,107.3"/>
		<path class="st2" d="M3136.1,771.7c45.1-85.4,67.1-168.2,76.7-232.1c0.9-5.8,2.5-17.4,3.3-23.2c3.3-24.6,4.5-45.6,5.1-61.6
			c0.8-22.1,0-34.7,0-34.7v0c-1-23.4-6.2-47-16.2-69.8c-43-98.4-157.7-143.3-256-100.2c-76.6,33.5-120.8,110.4-116.3,189.2l0,0
			c0,0,7.7,116.8-44.1,260.1"/>
		<path class="st2" d="M3019,788.9c102.7-185.8,91.7-363.5,91.7-363.5l0,0c-0.4-10.3-2.6-20.7-7-30.7c-18.6-42.4-68-61.8-110.5-43.2
			c-33.4,14.6-52.5,48.3-50.1,82.7l0,0c0,0,10.2,151.5-69.1,321"/>
		<path class="st2" d="M2992.9,787.4c101-184.6,90.2-360.2,90.2-360.2c-0.1-7.2-1.7-14.4-4.7-21.4c-12.4-28.5-45.6-41.4-74.1-29
			c-22.6,9.9-35.4,32.8-33.5,56c0,0,10.7,158-74.3,331.9"/>
		<path class="st2" d="M2967.6,784.1c98.5-183.5,87.8-357.6,87.8-357.6c-1-15.8-14.6-27.7-30.4-26.7c-15.8,1-27.7,14.6-26.7,30.4
			c0,0,1.2,14.1,0,38.6c-0.3,6.5-1.1,19.4-1.5,25.9c-0.9,13.3-2.4,28.3-4.9,44.8c-1,6.5-3,19.6-4.1,26.1c-3.9,23.4-9.6,49-17.4,76
			c-0.9,3-2.7,9.1-3.6,12.2c-11.2,37.8-26.7,78-47.5,119"/>
		<path class="st2" d="M2943.1,779.2c94.7-181,83.7-350.9,83.7-350.9"/>
		<path class="st2" d="M3046.2,788.4c103.2-186.1,92.1-364.3,92.1-364.3l0,0c-0.5-13.6-3.5-27.3-9.3-40.5
			c-3.2-7.4-6.7-14.7-11.7-20.6c-5.7-6.7-18.1-19.2-24.7-24.9c-29.1-24.9-72.8-28.5-110.4-12.1c-44.2,19.3-69.6,63.8-66.6,109.3l0,0
			c0,0,3.9,48.1-8.1,120.2c-1.2,7.4-3.9,22.3-5.3,29.7c-6.9,36.7-18.2,77.8-34.7,121.2c-4.7,12.3-9.8,24.8-15.4,37.5"/>
		<path class="st2" d="M3074.6,785.7c8.5-15.4,16.4-30.7,23.3-46c3.4-7.6,10-22.9,13.3-30.6c38.7-92.2,50.5-176.7,53.6-229.5
			c0.5-8.1,1.2-24.3,1.5-32.4c0.5-15.6-0.3-24.4-0.3-24.4l0,0c-0.7-16.8-4.4-33.9-11.6-50.2c-30.8-70.4-112.8-102.5-183.2-71.7
			c-55,24-86.6,79.3-83.2,136c0,0,9.1,136-57.4,294.4"/>
		<path class="st2" d="M3104.5,780.3c100-184,89-358.7,89-358.7c-0.8-20.2-5.3-40.5-13.9-60.1c-33-75.5-116-117.5-192.5-95.2
			c-6.9,2-20.5,6.6-27.2,9.2c-40,15.5-70.5,46.9-85,83.9c-3.1,8-8.6,24.2-10.9,32.4c-4.2,14.9-4.7,30.7-3.8,46.3l0,0
			c0,0,8.4,126.9-50.9,278.3"/>
		<path class="st2" d="M3169.6,759c89.5-177.1,79.2-340.2,79.2-340.2v0c-1.1-26.7-7.1-53.6-18.5-79.5c-16-36.6-40.7-66.7-70.6-89
			c-2.2-1.6-4.4-3.3-6.7-4.8c-35.5-24.5-77.6-38.9-121-39.3c-3.3,0-9.8,0-13.1,0.1c-23.7,0.5-47.5,5.5-70.7,14.3
			c-3.4,1.3-6.9,2.6-10.3,4.2c-6.1,2.9-18.1,9-24,12.2c-73.8,40.5-113.4,122.3-108.8,203.6l0,0c0,0,1.4,21.6-1.1,57.7
			c-3,43.7-11.8,108.5-35.9,181.6"/>
		<path class="st2" d="M3205.4,741.1c80.7-170.5,71-323.6,71-323.6c-1.3-30-8-60.2-20.8-89.3c-26.3-60.2-72.7-106.6-129.4-129
			c-7.7-3-23.2-8.6-31.1-11.1c-53.3-17.1-113.1-12.8-168.4,11.4c-98.2,42.9-154.9,141.4-149.4,242.5v0c0,0,6.1,93.3-29.6,215.4"/>
		<path class="st2" d="M3243.9,715.6c68.9-160.6,60-299.5,60-299.5c-1.4-33.2-8.9-66.7-23-99c-2.6-5.9-5.1-11.7-8.2-17.2
			c-4.6-8.1-14.2-24-19.3-31.7c-10.8-16.5-24.2-30.9-38.5-43.9c-1.9-1.7-5.7-5.1-7.7-6.8c-77.6-67.6-190.8-87.4-291.5-43.4
			c-109,47.7-172,157-165.9,269.2l0,0c0,0,4.2,53.5-10.3,132.1c-1.2,6.7-3.8,20.1-5.2,26.8c-1.9,9.2-4.1,18.7-6.6,28.5"/>
	</g>
	<g class="st0">
		<path class="st1" d="M2023.3,303.4c-14.3,65.1-10.7,134.9,14.1,202.1c35.4,95.7,106.9,168,193.8,205.1c2.4,1,7.2,3,9.6,4
			c17,7,34.5,12.8,52.6,16.6c8.3,1.7,25,4.8,33.3,6.2c65.8,10.6,135.4-0.2,200.3-30.3c92.5-43,158.2-120.3,188.9-209.7"/>
		<path class="st2" d="M2396.5,767.8c47.9-2.6,96.1-14.2,142.3-35.7c55.9-26,102.8-63.6,138.9-108.7"/>
		<path class="st2" d="M2110.5,136.4c-49.9,146-39.6,264.5-39.6,264.5c2.4,36.4,11.5,73,27.8,108.1c71,152.7,252.4,219,405.1,148
			c118.6-55.1,185-176.8,175.6-299.9v0c0,0-5.5-62.8,10.7-153.2"/>
		<path class="st1" d="M2065.3,197.6c-29.6,117.4-22,205.1-22,205.1l0,0c2.7,39.7,12.5,79.6,30.3,117.9
			c77.4,166.6,275.3,238.9,441.8,161.4c48.5-22.5,90-54.5,120.1-94.5c5.3-7,15.4-21.3,20.3-28.5c31.9-47.4,50.4-103.8,51.6-161.2
			c0.2-10.7,0-32-0.5-42.7c-1.3-26.8-3.7-42.3,3.9-107.4"/>
		<path class="st2" d="M2258.2,39.6c-43.1,86.4-63.2,169.6-71.4,233.8c-0.7,5.8-2.1,17.5-2.8,23.3c-2.7,24.7-3.5,45.7-3.7,61.7
			c-0.3,22.1,0.8,34.7,0.8,34.7v0c1.5,23.4,7.3,46.9,17.8,69.4c45.3,97.4,160.9,139.6,258.3,94.4c75.8-35.2,118.2-113.1,111.9-191.9
			l0,0c0,0-10.4-116.6,38.2-261.1"/>
		<path class="st2" d="M2374.9,19.7c-98.4,188.1-83.4,365.5-83.4,365.5l0,0c0.6,10.3,3.1,20.6,7.7,30.6
			c19.5,42,69.4,60.2,111.4,40.7c33-15.4,51.4-49.5,48.2-83.8l0,0c0,0-13.7-151.2,61.8-322.5"/>
		<path class="st2" d="M2401,20.6c-96.8,186.9-81.9,362.2-81.9,362.2c0.3,7.2,2,14.4,5.2,21.3c13.1,28.2,46.5,40.4,74.7,27.3
			c22.3-10.4,34.6-33.6,32.2-56.8c0,0-14.3-157.8,66.7-333.5"/>
		<path class="st2" d="M2426.4,23.3c-94.2,185.7-79.6,359.5-79.6,359.5c1.4,15.7,15.2,27.4,31,26c15.7-1.4,27.4-15.2,26-31
			c0,0-1.5-14.1-0.9-38.6c0.2-6.5,0.6-19.4,0.9-25.9c0.6-13.3,1.8-28.4,3.8-44.9c0.8-6.6,2.6-19.7,3.5-26.2
			c3.4-23.5,8.5-49.2,15.6-76.4c0.8-3.1,2.4-9.2,3.3-12.3c10.3-38,25-78.6,44.8-120.1"/>
		<path class="st2" d="M2450.9,27.7c-90.5,183.2-75.6,352.7-75.6,352.7"/>
		<path class="st2" d="M2347.7,20.8c-98.9,188.4-83.7,366.3-83.7,366.3l0,0c0.8,13.6,4.1,27.2,10.2,40.3c3.4,7.3,7,14.5,12.2,20.3
			c5.8,6.6,18.5,18.7,25.3,24.3c29.7,24.3,73.4,26.8,110.6,9.5c43.7-20.3,68.1-65.4,64.1-110.8l0,0c0,0-5-48,5.4-120.3
			c1.1-7.5,3.4-22.4,4.6-29.8c6-36.8,16.4-78.2,31.9-122c4.4-12.4,9.2-25.1,14.6-37.8"/>
		<path class="st2" d="M2319.3,24.2c-8.2,15.6-15.7,31.1-22.2,46.5c-3.2,7.7-9.5,23.1-12.6,30.9c-36.6,93-46.5,177.8-48.3,230.7
			c-0.3,8.1-0.6,24.3-0.7,32.4c-0.1,15.6,0.8,24.3,0.8,24.3l0,0c1,16.8,5.2,33.7,12.7,50c32.4,69.7,115.2,99.9,184.8,67.5
			c54.4-25.3,84.8-81.3,80-137.8c0,0-12.2-135.7,50.7-295.6"/>
		<path class="st2" d="M2289.6,30.2c-95.7,186.3-80.8,360.7-80.8,360.7c1.3,20.1,6.2,40.4,15.3,59.8
			c34.7,74.7,118.7,114.8,194.6,90.8c6.8-2.2,20.3-7.1,27-9.8c39.6-16.4,69.4-48.5,83.1-85.8c2.9-8,8-24.4,10.1-32.7
			c3.8-15,4-30.8,2.7-46.4l0,0c0,0-11.3-126.6,44.6-279.4"/>
		<path class="st2" d="M2225,53c-85.4,179.1-71.3,342-71.3,342v0c1.7,26.6,8.3,53.4,20.3,79.1c16.8,36.2,42.2,65.8,72.6,87.4
			c2.2,1.6,4.5,3.1,6.8,4.7c36,23.6,78.5,37.1,121.9,36.5c3.3,0,9.8-0.2,13.1-0.4c23.6-1,47.4-6.6,70.4-15.9
			c3.4-1.4,6.8-2.8,10.2-4.4c6-3,17.9-9.4,23.7-12.8c72.8-42.2,110.5-124.8,104.1-206.1v0c0,0-1.9-21.6-0.2-57.7
			c2-43.7,9.4-108.7,31.8-182.4"/>
		<path class="st2" d="M2189.6,71.7c-76.8,172.3-63.5,325.1-63.5,325.1c2,29.9,9.4,60,22.8,88.8c27.7,59.6,75.2,104.9,132.3,126
			c7.7,2.9,23.4,8.1,31.3,10.4c53.7,15.9,113.4,10.2,168.1-15.2c97.2-45.2,151.6-145,143.8-245.9v0c0,0-8.3-93.2,24.7-216.1"/>
		<path class="st2" d="M2151.7,98.1c-65.2,162.1-53.2,300.8-53.2,300.8c2.2,33.2,10.5,66.5,25.3,98.5c2.7,5.8,5.4,11.6,8.6,17
			c4.7,8,14.8,23.6,20,31.3c11.2,16.3,24.9,30.4,39.5,43c1.9,1.7,5.9,5,7.8,6.6c79.2,65.8,192.8,83,292.4,36.7
			c107.9-50.2,168.3-160.9,159.7-272.9v0c0,0-5.4-53.3,7.2-132.3c1.1-6.7,3.4-20.2,4.5-26.9c1.7-9.3,3.7-18.8,5.9-28.6"/>
	</g>
	<g class="st0">
		<path class="st1" d="M1459,443.2c-9.3,57.6-2.6,118.2,22.7,175.1c36,81.1,102.5,139.6,180.9,166.6c2.2,0.7,6.5,2.2,8.7,2.9
			c15.3,5,31,9,47.1,11.2c7.4,1,22.2,2.6,29.6,3.3c58.4,5.1,119-8.5,174.6-38.9c79.2-43.2,133-114.6,155.4-194.4"/>
		<path class="st2" d="M1810.7,824.4c42-5.2,83.8-18.3,123.3-39.9c47.9-26.1,87.1-61.8,116.6-103.3"/>
		<path class="st2" d="M1527.2,292.3c-36.5,130.3-21.4,232.8-21.4,232.8c4,31.6,13.8,62.8,29.9,92.4
			c70.2,128.6,233,175.1,363.7,103.7c101.5-55.4,153.7-165.4,139.2-272.1l0,0c0,0-8-54.3,1.7-134.1"/>
		<path class="st1" d="M1490.5,348.4c-20.1,104.1-8.9,180-8.9,180l0,0c4.4,34.4,15.1,68.6,32.6,100.8
			c76.5,140.3,254.1,190.9,396.7,113.1c41.5-22.6,76.4-53,100.9-89.8c4.3-6.4,12.5-19.5,16.4-26.1c25.6-43.3,39-93.5,37.2-143.6
			c-0.3-9.3-1.6-27.9-2.6-37.1c-2.5-23.3-5.4-36.6-2-93.8"/>
		<path class="st2" d="M1652.1,198.8c-33.5,77.9-47,151.7-50.9,208c-0.4,5.1-1,15.3-1.3,20.5c-1.2,21.7-0.7,40-0.1,53.9
			c0.9,19.3,2.5,30.2,2.5,30.2l0,0c2.5,20.3,8.8,40.4,19.1,59.3c44.7,82,148.6,111.6,231.9,66.1c64.9-35.4,98.2-105.9,88.7-174l0,0
			c0,0-15.1-100.9,20.3-229.7"/>
		<path class="st2" d="M1753.7,174.3c-77,169.9-54.8,323.5-54.8,323.5l0,0c1,8.9,3.8,17.8,8.3,26.1c19.3,35.4,64.1,48.1,100,28.5
			c28.3-15.4,42.7-46.3,38.1-76v0c0,0-19.7-130.9,37.9-284.7"/>
		<path class="st2" d="M1776.8,173.4c-75.6,168.8-53.7,320.5-53.7,320.5c0.6,6.2,2.5,12.4,5.7,18.2c12.9,23.7,43,32.3,67.1,19.1
			c19.1-10.4,28.8-31.4,25.5-51.5c0,0-20.6-136.5,41.7-294.6"/>
		<path class="st2" d="M1799.2,174.2c-73.4,167.6-51.7,318.1-51.7,318.1c2,13.6,14.8,22.9,28.5,20.7c13.8-2.2,23.3-15,21.3-28.6
			c0,0-2.1-12.2-2.8-33.5c-0.2-5.6-0.5-17-0.5-22.6c-0.2-11.6,0.1-24.8,1.1-39.3c0.4-5.8,1.3-17.3,1.8-23.1
			c1.8-20.7,5-43.4,9.9-67.5c0.6-2.7,1.7-8.2,2.3-10.9c7.2-33.8,18-70,33.3-107.4"/>
		<path class="st2" d="M1821,176.5c-70.3,165.1-48.6,311.9-48.6,311.9"/>
		<path class="st2" d="M1729.9,176.9c-77.4,170.2-55.1,324.2-55.1,324.2l0,0c1.4,11.8,5,23.4,11,34.4c3.4,6.2,6.9,12.2,11.7,16.9
			c5.5,5.3,17.2,15.2,23.5,19.6c27.3,19.3,65.9,18.8,97.8,1.4c37.4-20.4,56.5-61.2,50.8-100.5l0,0c0,0-6.9-41.5-1.4-105.1
			c0.6-6.6,1.8-19.7,2.5-26.2c3.4-32.4,10.5-69.2,21.9-108.2c3.2-11.1,6.9-22.4,10.9-33.8"/>
		<path class="st2" d="M1705.1,181.6c-6.4,14.1-12.2,28.1-17.2,41.9c-2.4,6.9-7.2,20.7-9.5,27.7c-27.4,83.3-31.8,157.8-30.8,203.9
			c0.2,7.1,0.7,21.2,1,28.3c0.7,13.6,2,21.2,2,21.2l0,0c1.8,14.6,6.3,29.1,13.7,42.7c32,58.7,106.3,79.9,166,47.3
			c46.6-25.4,70.4-76.1,63.4-125c0,0-17.6-117.4,29.5-260.6"/>
		<path class="st2" d="M1679.2,188.8c-74.7,168.2-52.7,319.1-52.7,319.1c2.1,17.5,7.5,34.8,16.4,51.1c34.3,62.9,110.2,92.7,175.7,67
			c5.9-2.3,17.5-7.4,23.2-10.2c34-16.7,58.6-46.5,68.7-79.9c2.2-7.2,5.8-21.7,7.3-29.1c2.6-13.3,2-27,0.1-40.6l0,0
			c0,0-16.4-109.6,25-246.1"/>
		<path class="st2" d="M1623.6,212.6c-66,161.3-45.4,302.2-45.4,302.2l0,0c2.9,23.1,10.1,46,21.8,67.6
			c16.6,30.5,40.4,54.7,68.3,71.6c2.1,1.3,4.1,2.5,6.2,3.6c32.9,18.3,70.9,27.4,109,24.2c2.9-0.2,8.6-0.8,11.5-1.1
			c20.7-2.4,41.3-8.7,61.1-18.3c2.9-1.4,5.9-2.8,8.7-4.5c5.1-3,15.2-9.3,20.2-12.6c61.9-41.3,90.9-115.6,81.1-185.9l0,0
			c0,0-2.8-18.7-3.1-50.3c-0.4-38.2,2.7-95.3,18.7-160.8"/>
		<path class="st2" d="M1593.5,231.1c-58.8,154.8-39.4,287.1-39.4,287.1c3.2,25.9,11.3,51.7,24.5,75.9
			c27.4,50.2,71.4,86.7,122.7,101.5c7,2,21,5.6,28.1,7.1c48,10.5,100.2,1.8,147-23.7c83.2-45.4,126-135.7,113.9-223.1l0,0
			c0,0-12-80.6,10.7-189.7"/>
		<path class="st2" d="M1561.4,256.4c-49.1,145.2-31.5,265.2-31.5,265.2c3.6,28.8,12.6,57.3,27.2,84.2c2.7,4.9,5.3,9.8,8.5,14.3
			c4.6,6.7,14.2,19.7,19.2,26c10.7,13.5,23.4,24.9,36.9,35c1.8,1.3,5.4,4,7.2,5.3c72.9,52.4,173.7,60.3,259,13.8
			c92.3-50.4,139.9-150.5,126.6-247.6l0,0c0,0-7.5-46.1-0.4-115.7c0.6-5.9,1.9-17.8,2.6-23.7c1-8.2,2.3-16.6,3.8-25.3"/>
	</g>
	<g class="st0">
		<path class="st1" d="M808.8,414.1c-8.7,66.1,0.8,135.4,31.3,200.2c43.4,92.3,120.8,158.3,210.6,187.9c2.5,0.8,7.5,2.4,10,3.2
			c17.5,5.5,35.5,9.8,53.8,12.1c8.4,1,25.3,2.7,33.7,3.3c66.5,4.9,134.9-11.7,197-47.3c88.5-50.7,147.4-133.3,170.3-225"/>
		<path class="st2" d="M1220.1,845c47.5-6.7,94.6-22.3,138.7-47.7c53.5-30.7,97-72.2,129.2-120.1"/>
		<path class="st2" d="M881.4,240.2c-37.3,149.7-16.9,266.9-16.9,266.9c5.5,36.1,17.7,71.7,36.9,105.3
			c83.7,146.1,270.1,196.7,416.3,113c113.5-65,169.3-191.9,149.5-313.8l0,0c0,0-10.8-62.1-2.4-153.6"/>
		<path class="st1" d="M841.6,305.1c-19.5,119.5-4.4,206.3-4.4,206.3l0,0c6,39.3,19.3,78.3,40.2,114.9
			c91.3,159.4,294.6,214.6,454,123.2c46.4-26.6,85.1-62,111.7-104.4c4.6-7.4,13.5-22.5,17.8-30.1c27.8-50,41.4-107.7,37.7-165
			c-0.7-10.6-2.7-31.9-4.1-42.5c-3.6-26.6-7.3-41.8-5.2-107.3"/>
		<path class="st2" d="M1020.3,131.2c-35.6,89.7-48.5,174.4-51.2,239c-0.2,5.9-0.6,17.6-0.8,23.4c-0.6,24.8,0.4,45.8,1.6,61.7
			c1.6,22,3.8,34.5,3.8,34.5l0,0c3.5,23.2,11.3,46.1,23.6,67.6c53.4,93.2,172.2,125.4,265.4,72c72.5-41.6,108.1-122.8,95.2-200.7
			l0,0c0,0-20.3-115.3,15.8-263.4"/>
		<path class="st2" d="M1134.9,101.5c-82.1,195.8-51.9,371.2-51.9,371.2l0,0c1.5,10.2,4.8,20.3,10.3,29.8
			c23,40.2,74.3,54.1,114.5,31.1c31.6-18.1,47-53.7,40.9-87.6v0c0,0-26.5-149.5,34.1-326.6"/>
		<path class="st2" d="M1161,100.2c-80.5,194.4-50.8,367.9-50.8,367.9c0.9,7.1,3.2,14.1,7,20.7c15.4,26.9,49.8,36.3,76.8,20.8
			c21.4-12.2,31.7-36.4,27.3-59.3c0,0-27.7-156,38-338"/>
		<path class="st2" d="M1186.5,100.7c-78.1,193.1-48.7,365-48.7,365c2.7,15.6,17.5,26,33.1,23.3c15.6-2.7,26-17.5,23.3-33.1
			c0,0-2.7-13.9-4.2-38.4c-0.4-6.5-1-19.4-1.3-25.9c-0.5-13.3-0.6-28.4,0-45c0.3-6.6,0.9-19.8,1.3-26.4c1.4-23.7,4.3-49.8,9.1-77.5
			c0.5-3.1,1.7-9.4,2.2-12.5c7.1-38.8,18.2-80.5,34.4-123.4"/>
		<path class="st2" d="M1211.4,103c-74.6,190.2-45.3,357.9-45.3,357.9"/>
		<path class="st2" d="M1107.9,104.9C1025.4,301,1055.7,477,1055.7,477l0,0c2,13.4,6.4,26.7,13.6,39.2c4,7,8.2,13.8,13.9,19.2
			c6.4,6,20,17.1,27.3,22c31.6,21.6,75.4,20.5,111.1,0.1c41.8-24,62.3-71,54.5-115.9l0,0c0,0-9.1-47.4-4.9-120.3
			c0.4-7.5,1.4-22.6,2-30.1c2.9-37.2,9.7-79.3,21.4-124.3c3.3-12.8,7.1-25.8,11.3-38.9"/>
		<path class="st2" d="M1079.9,110.7c-6.8,16.3-13,32.3-18.2,48.3c-2.6,7.9-7.5,23.9-9.9,31.9c-28.5,95.8-31.2,181.1-28.5,234
			c0.4,8.1,1.4,24.3,2,32.4c1.2,15.6,2.9,24.2,2.9,24.2l0,0c2.5,16.7,8,33.2,16.9,48.7c38.2,66.7,123.2,89.8,189.9,51.6
			c52.1-29.8,77.6-88.2,68-144.1c0,0-23.7-134.2,25.3-298.9"/>
		<path class="st2" d="M1050.8,119.3C971.3,313,1001,485.5,1001,485.5c3,20,9.7,39.7,20.3,58.3c40.9,71.5,128,104.3,201.6,73.9
			c6.6-2.7,19.7-8.8,26-12.1c38.1-19.7,65-54.2,75.5-92.5c2.3-8.2,5.9-25,7.3-33.4c2.5-15.2,1.4-31-1.2-46.5l0,0
			c0,0-22.1-125.2,20.6-282.2"/>
		<path class="st2" d="M988.4,147.4c-69.9,185.7-42,346.8-42,346.8l0,0c4,26.4,12.9,52.5,26.9,77.1c19.9,34.7,47.6,61.9,79.8,80.9
			c2.4,1.4,4.8,2.8,7.2,4.1c37.9,20.5,81.4,30.3,124.6,26c3.3-0.3,9.8-1.1,13-1.5c23.5-3,46.7-10.6,68.8-21.9
			c3.3-1.7,6.6-3.3,9.8-5.3c5.7-3.5,17-10.9,22.5-14.8c69-48.2,99.5-133.8,86.2-214.2l0,0c0,0-3.8-21.4-5.1-57.5
			c-1.7-43.7,0.1-109.1,16.1-184.5"/>
		<path class="st2" d="M954.7,169.1c-61.8,178.2-35.6,329.3-35.6,329.3c4.5,29.6,14.5,59,30.3,86.6c32.7,57,83.8,98.2,142.5,114.3
			c8,2.2,24,6,32.1,7.7c54.8,11.3,113.8,0.5,166.2-29.5c93-53.3,138.7-157.3,122.3-257.2l0,0c0,0-16.2-92.1,6.2-217.4"/>
		<path class="st2" d="M919.1,198.6c-51.2,167.1-27.4,304.2-27.4,304.2c5,32.9,16.1,65.4,33.6,96c3.2,5.6,6.4,11.1,10.1,16.3
			c5.4,7.5,16.7,22.3,22.6,29.4c12.6,15.3,27.4,28.2,43,39.5c2.1,1.5,6.3,4.5,8.4,5.9c84.5,58.8,199.2,66.3,294.5,11.6
			c103.2-59.2,154-174.6,135.9-285.5v0c0,0-9.9-52.7-4.1-132.4c0.5-6.8,1.6-20.4,2.2-27.2c0.9-9.4,2.1-19.1,3.5-29"/>
	</g>
	<g class="st0">
		<path class="st1" d="M684.4,837.2C751.5,792.4,807,728.5,841.6,649c49.4-113.2,47.7-236.3,3-341.6c-1.2-2.9-3.7-8.7-5-11.6
			c-9-20.4-19.4-40.2-31.9-58.6c-5.8-8.5-17.7-25.2-23.9-33.4C735.2,139.3,665.5,90.3,583.5,62.2C466.7,22.1,344.5,34.4,242.7,86.7"
			/>
		<path class="st2" d="M748.4,118.8c-44-37.9-95.8-68.3-154.1-88.3C523.7,6.3,451.3-0.1,381.9,8.8"/>
		<path class="st2" d="M468.2,909.8c166.1-85.5,256.5-197.6,256.5-197.6c28.4-33.8,51.2-73.3,66.4-117.6
			c66.2-192.8-36.4-402.9-229.3-469.1C412,74.1,252,124.5,156.9,239.8l0,0c0,0-47.9,59.4-137.9,124.7"/>
		<path class="st1" d="M558.9,894.3c124.4-77.6,191.3-160.6,191.3-160.6l0,0c31-36.9,55.9-80,72.5-128.3
			C894.9,395.1,782.9,166,572.6,93.8c-61.2-21-124.3-28-184.1-18.4c-10.5,1.7-31.3,5.6-41.6,7.9c-67.6,14.6-131.1,48.3-180.3,97.4
			c-9.1,9.1-26.9,27.9-35.4,37.6c-21.4,24.5-32.2,40-93.6,90.4"/>
		<path class="st2" d="M258.1,870.3c110.1-39.2,197.5-95,258.4-144.1c5.5-4.5,16.5-13.5,22-18c23.1-19.2,41.3-36.9,54.9-50.7
			c18.8-19,28.4-31,28.4-31l0,0c18.3-21.7,32.9-47,42.7-75.4c42.2-122.9-23.2-256.8-146.2-299c-95.7-32.9-198.1-0.5-258.6,73.5l0,0
			c0,0-88.8,110.5-252.3,195.8"/>
		<path class="st2" d="M139.6,789.7C383.3,708.2,519,540.8,519,540.8l0,0c8.1-9.5,14.6-20.6,18.9-33.1c18.2-53-10-110.8-63.1-129
			c-41.7-14.3-86.3,0.1-112.4,32.7l0,0c0,0-115,143.4-324.5,229.6"/>
		<path class="st2" d="M117.5,767c241.3-81.9,375.4-247.3,375.4-247.3c5.7-6.5,10.3-14.2,13.3-22.9c12.2-35.6-6.7-74.3-42.3-86.5
			c-28.2-9.7-58.4,0.2-75.8,22.5c0,0-119.9,149.6-338,235.1"/>
		<path class="st2" d="M97.7,743.4c238.1-83,371.1-246.9,371.1-246.9c12-14.9,9.7-36.7-5.2-48.7c-14.9-12-36.7-9.7-48.7,5.2
			c0,0-10.5,13.6-31.6,34.4c-5.6,5.5-16.8,16.4-22.5,21.8c-11.7,11.1-25.4,23.3-41,35.9c-6.2,5-18.8,15-25.1,19.9
			c-22.7,17.7-48.7,35.8-77.8,53.6c-3.3,2-9.9,6-13.1,7.9c-40.9,24.5-87.7,47.7-139.8,67.2"/>
		<path class="st2" d="M79.9,719c232.6-83.9,361.9-244.3,361.9-244.3"/>
		<path class="st2" d="M164.2,811.6c244.4-81.4,380.4-249.4,380.4-249.4l0,0c10.7-12.5,19.2-27.2,24.9-43.7c3.2-9.2,6-18.5,6.4-27.9
			c0.4-10.6-0.4-31.9-1.7-42.4c-5.5-46-41.5-85-88.5-101.1c-55.2-19-114.3-0.1-148.9,42.9l0,0c0,0-35.9,46.1-105.6,100.5
			c-7.2,5.6-21.7,16.7-29,22.1c-36.2,27.1-80,54.5-130.2,79.7c-14.3,7.2-29.1,14.1-44.4,20.8"/>
		<path class="st2" d="M191.8,832.4c20.2-6.8,39.8-13.9,58.4-22c9.3-4,27.7-12.2,36.9-16.4c110-50.5,189.8-116.2,235.7-160.7
			c7-6.8,21-20.7,27.8-27.7c13.2-13.5,19.7-21.9,19.7-21.9l0,0c13.2-15.6,23.8-33.8,30.8-54.3c30.2-88-16.6-183.8-104.6-214
			c-68.7-23.6-142.2-0.2-185.5,53.1c0,0-103.2,128.6-292.2,215.4"/>
		<path class="st2" d="M222.9,852.1C462.7,769.9,596,605.2,596,605.2c15.8-18.6,28.4-40.5,36.8-65c32.4-94.3-7.2-199.8-93.6-242.5
			c-7.8-3.8-23.7-10.9-31.8-14c-48.3-18.9-101.2-15.9-144.5,5.1c-9.3,4.5-27.4,14.5-36.2,20c-15.9,9.8-29.3,23.5-41.3,38.2l0,0
			c0,0-96.4,120-273.3,206.4"/>
		<path class="st2" d="M298.3,886.5C523.1,801.9,647.5,648,647.5,648l0,0c20.8-24.7,37.5-53.6,48.7-86c15.7-45.7,18.4-92.8,10-137.1
			c-0.6-3.3-1.3-6.5-2-9.8c-11.6-50.9-37.4-98.2-75.7-134.1c-2.9-2.7-8.8-8-11.7-10.7c-21.5-18.9-46.9-34-74.8-45.2
			c-4.1-1.6-8.3-3.3-12.6-4.7c-7.8-2.4-23.5-6.8-31.4-8.7c-99-24.3-201.2,16.2-263.8,92.4l0,0c0,0-16.5,20.5-48.2,50.6
			c-38.5,36.4-99.4,87-180.8,132.5"/>
		<path class="st2" d="M344.9,899.8c211.6-85.9,328.2-230.4,328.2-230.4c23.4-27.8,42.1-60.2,54.6-96.6
			c25.8-75.2,22.5-154.6-9.7-221c-4.4-9-13.7-26.7-18.6-35.4c-33.5-58.9-90.4-104-159.4-127.7c-122.7-42.1-253.9-0.7-331.7,93.9l0,0
			c0,0-71,88.2-202.8,167.8"/>
		<path class="st2" d="M400.1,908.7c192.9-86.7,298.7-217.8,298.7-217.8c25.9-30.8,46.7-66.8,60.5-107.2c2.5-7.4,5-14.7,6.8-22.1
			c2.6-10.9,6.9-33,8.8-44.1c3.9-23.6,3.8-47.4,1.6-70.6c-0.3-3.1-0.9-9.3-1.3-12.4c-13.9-123.8-98.6-234.2-224.4-277.3
			c-136.2-46.8-281.8-0.9-368.3,104.1l0,0c0,0-40,51.1-117.3,109.4c-6.6,5-19.8,14.8-26.5,19.6c-9.2,6.7-19,13.3-29.2,20"/>
	</g>
</g>
</svg>

</div>
            
          
!
            
              path {
	fill: none;
	stroke: #0216AE;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-miterlimit: 10;
	will-change: strokeDasharray, strokeDashoffset;
	transform: translateZ(0);
	
}
	.st0{clip-path:url(#SVGID_2_);}
	.st1{fill:none;stroke:#0000AC;stroke-width:9.951;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st2{fill:none;stroke:#0000AC;stroke-width:9.9508;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st3{clip-path:url(#SVGID_4_);}
body {
	height: 100vh;
}
.wrap {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #F06A44;
}

svg {
	width: 90vw;
	height: 90vh;
	display: block;
	// animation: rotate 120s forwards infinite linear;
}
@keyframes rotate {
	to {
		transform: rotate(3600deg);
	}
}
            
          
!
            
              var win = window,
	doc = document,
	body = doc.body;

body.style.overflow = 'hidden';

var ww = win.innerWidth;
var wh = win.innerHeight;

var a = TweenMax;

function rand(min, max) {
    return Math.floor(Math.random()*(max-min+1)+min);
}

var paths = doc.getElementsByTagName('path');

paths = [].slice.call(paths);

// paths.forEach(function(path, i){
	
// 	var prev = i == 0 ? false : paths[i-1];

// 	var len = path.getTotalLength(),
// 		ranum = len / rand(0, 3),
// 		offset = rand(0, 400);
	

// 	path._offset = offset;
// 	path.style.strokeDasharray = ranum;
// 	path.style.strokeDashoffset = path._offset;
// });

// function anim(){
	 
// 	paths.forEach(function(path){
		
// 		path._offset += 20;
		
// 		path.style.strokeDashoffset = path._offset;
		
// 	});
	
// 	requestAnimationFrame(anim);
// }

// anim();

// -------------

// paths.forEach(function(path, i){

// 	var len = Math.ceil(path.getTotalLength());

// 	path._len = len;
// 	path.style.strokeDasharray = len;
// 	path.style.strokeDashoffset = len;
// });

// var tl = new TimelineMax({paused: true, repeat: -1});

// tl.staggerTo(paths, 1, 
// 	{
// 		strokeDashoffset: 0,
// 		ease: Power4.easeOut
// 	}, 0.1);

// tl.staggerTo(paths, 1, 
// 	{
// 		cycle: {
// 			strokeDashoffset: function(idx){
// 				return -paths[idx]._len;
// 			}
// 		},
// 		ease: Power4.easeIn
// 	}, 0.1, 2);

// tl.play();


// --------------


paths.forEach(function(path, i){

	var len = Math.ceil(path.getTotalLength());

	path._len = len;
	path.style.strokeDasharray = len;
	path.style.strokeDashoffset = len;
});

var alt = true;

paths = paths.reverse();

function pathsReset(){
	
	paths.forEach(function(path, i){
		setTimeout(() => {
			
			a.to(path, 1, {strokeDashoffset: 0})
			
			if (i == paths.length-1) {
				if (alt) {
					setTimeout(pathsOut, 1500);
				} else {
					setTimeout(pathsIn, 1500);
				}
				alt = !alt;
			};
			
		}, 20 * i);
	});
}

function pathsOut(){
	
	paths.forEach(function(path, i){
		setTimeout(() => {
			
			a.to(path, 1, {strokeDashoffset: -path._len})
			
			if (i == paths.length-1) pathsReset();
			
		}, 20 * i);
	});
}

function pathsIn(){
	
	paths.forEach(function(path, i){
		setTimeout(() => {
			
			a.to(path, 1, {strokeDashoffset: path._len})
			
			if (i == paths.length-1) pathsReset();
			
		}, 50 * i);
	});
}

pathsReset();
            
          
!
999px
Loading ..................

Console