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.

            
              <!--  
Created the SVG by scanning a hand-drawn pen sketch, converting it into vector art, then exporting it to SVG with Adobe Illustrator.
-->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 267.4 159.7" enable-background="new 0 0 267.4 159.7" xml:space="preserve">
<g>
	<g>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M23.4,62.6c0.1-1.4,1.3-2.1,2.3-2.9c1.5-1.2,3.4-2,5.1-3c3.3-2,6.7-3.6,9.9-5.7c1.8-1.2,3.7-2.3,5.6-3.3c1-0.5,2.3-0.5,3.4-1
			c2.4-1.1,4.3-2.9,6.6-4.2c5.7-3.1,11.3-6.3,16.9-9.6c3.6-2.1,7.2-4.3,10.8-6.4c4.8-2.7,9.5-5.5,14.3-8c3-1.6,6-3.3,9.2-4.5
			c1.6-0.6,3.3-1.1,4.9-1.8c2-0.8,3.7-2.2,5.5-3.2c4.4-2.5,8.8-5,13.4-7c0.5-0.2,0.9-0.6,1.3-0.8c1.4-0.8,2.8-0.7,4.3-0.2
			c1.9,0.6,3.7,1.5,5.6,1.7c2.4,0.3,4.6,0.9,6.9,1.3c2.7,0.5,5.4,0.9,8.1,1.6c1.9,0.4,3.9,0.6,5.9,1.1c3.4,0.9,6.7,2.1,10.1,3.2
			c2.7,0.9,5.5,1.6,8.3,2.4c3.3,1.1,6.5,2.3,9.8,3.3c4.3,1.4,8.4,3.1,12.6,4.6c0.7,0.3,1.3,0.7,1.4,1.6c0.3,2.1,0.3,4-1.2,6.2
			c-2.2,3.1-4.7,6-7.4,8.7c-2.2,2.2-4.2,4.6-6.3,6.9c-3.1,3.5-6.4,6.9-9.4,10.6c-2.1,2.6-4.1,5.2-6.2,7.8
			c-5.3,6.4-10.4,12.9-16.1,19c-1.6,1.7-2.9,3.6-4.4,5.3c-5.4,5.9-10.9,11.8-16.2,17.8c-3.4,3.9-7,7.5-10.5,11.3
			c-1.3,1.4-2.5,2.8-3.7,4.2c-1.4,1.7-3.2,2.4-5.4,2.4c-0.7,0-1.1-0.6-1.8-0.4"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M205.3,23.9c-0.9,0.1-1.5,0.8-1.9,1.5c-1.3,2-3.1,3.6-4.8,5.2c-3,3-5.8,6.1-8.6,9.3c-3.1,3.6-6.1,7.2-9.1,10.8
			c-6.1,7.1-12,14.3-18.3,21.2c-6.4,7.2-12.5,14.7-19.4,21.4c-3.8,3.8-7.3,7.9-11.1,11.7c-3.2,3.3-6.2,6.8-9.6,9.9
			c-0.5,0.4-0.9,0.9-1.6,0.8"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M101.4,57.6c2.8,1.1,5.6,2.3,8,4.3c1.4,1.1,3.2,1.8,4.9,2.6c4.8,2.2,9.4,4.6,14.1,7.1c1.5,0.8,2.9,1.6,4.3,2.4
			c1.6,1,1.6,1.9,0.2,3.1c-0.9,0.8-1.8,1.5-2.4,2.5c-0.7,1.1-1.9,1.5-3,2.2c-2.1,1.3-4.1,3-6.1,4.4c-1.1,0.8-2.1,0.9-3.5,0.3
			c-1.3-0.5-2.3-1.4-3.2-2.4c-1.7-1.8-3.9-2.9-5.9-4.2c-2.2-1.4-4.6-2.3-6.9-3.4c-1.7-0.8-3.1-2-4.8-3c-2.5-1.4-5.2-2.3-7.4-4.3
			c1.4-1.2,2.9-2.3,4.2-3.5c2-1.8,4-3.7,5.9-5.6c0.7-0.7,1.8-1.1,2.2-2.1"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M8,113c-0.4,0-0.3-0.2-0.4-0.5c-0.3-3.4,0.1-6.9,0.3-10.3c0-0.8,0.1-1.7,0.1-2.5c0-2.1,0.4-4.2,0.6-6.2c0.2-2.4,0.7-4.7,0.6-7.1
			c0-0.9,0.5-1.7,0.6-2.8c1.3,0.8,2.1,1.8,3.2,2.5c2.9,1.9,6,2.5,9.4,2.4c4.4-0.2,8.1-1.9,10.9-5.4c0.9-1.1,1.5-2.3,1.8-3.7
			c0.4-2.2,0.8-4.3,0.6-6.5c-0.2-2.6-1.6-4.4-3.7-5.6c-3.2-1.9-6.7-3-10.4-3c-0.9,0-1.8-0.4-2.8-0.5c-2.3-0.1-4.2,0.8-5.7,2.3
			c-1.9,1.8-3.4,4-4.5,6.4C7.8,74,7.9,75.9,8,77.8c0.2,2.1,1.1,4,1.9,5.9"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M195.5,70c0.3,0.2,0.7,0.3,1,0.6c1.8,1.9,3.9,3,6.5,3.7c1.9,0.5,3.7,0.6,5.5,0.4c3.3-0.5,6.4-1.4,9.1-3.4c1.1-0.8,2.1-1.8,2.9-3
			c1.2-1.8,2.4-3.5,2.9-5.7c0.5-1.9,0.6-3.8,0.5-5.8c-0.2-4.6-1.9-8.6-5.1-11.9c-2.1-2.1-4.8-3.4-7.8-3.7c-1.1-0.1-2.1,0.4-3.1,0.7
			c-3.7,1.3-7,3.4-9.7,6.2c-2.4,2.5-3.9,5.5-4.9,8.9c-0.4,1.5-0.9,2.9-0.8,4.6c0.2,2.7,1.1,5.1,2.5,7.3c0.3,0.5,0.4,0.8,0.1,1.5
			c-0.6,1.2-0.2,2.5-0.4,3.8c-0.3,3-0.6,5.9-0.7,8.9c-0.1,2.4-0.1,4.9,0,7.3c0.1,1,0.1,2.1,0.2,3.1c0.2,1.7,0.6,3.4,0.4,5.2
			c0,0.2-0.1,0.6,0.4,0.6"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M59.9,62.4c0.2,0.5,0.7,0.7,1.1,0.8c4.4,1.7,8.6,3.7,12.5,6.2c1.6,1,3.5,1.5,5.2,2.3c1.1,0.5,2.2,0.9,3.2,1.6
			c2.3,1.5,5,2.1,7.3,3.5c4.6,2.8,9.5,5.1,14.1,8c3,1.9,6.1,3.7,9.5,5.1c0.9,0.4,0.9,1.5,1.8,1.8"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M80.9,110.5c-0.8-1.2-2.2-1.4-3.4-2c-3.8-1.9-7.7-3.8-11.5-5.7c-3.3-1.6-6.7-3.1-10-4.7c-3-1.5-6-3.1-9-4.5
			c-3.3-1.6-6.6-3.1-10-4.6c-0.9-0.4-1.8-0.9-2.6-1.4c-0.4-0.3-0.9-0.3-1.3-0.4"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M86.5,100.4c-1,0.2-1.7-0.5-2.4-0.9c-3.4-2.2-7.2-3.6-10.7-5.5c-3.3-1.8-6.6-3.6-10-5.3c-3.9-2-7.9-3.8-12-5.6
			c-2.7-1.2-5.5-2.2-8.1-3.5c-0.6-0.3-1.2-1-2-0.9"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M143.3,27.8c0.4,0.6,1.1,0.9,1.7,1.1c2.4,0.7,4.5,1.9,6.7,3c1.6,0.8,3.4,1.3,5.1,1.8c0.8,0.2,1.7,0.4,2.4,0.9c1,0.7,2.3,1,3.4,1.6
			c1.7,0.9,3.1,2.3,4.7,3.3c1.1,0.8,2.5,1,3.8,1.1c1.4,0.1,2.3-1,3.2-1.8c1.2-1.1,2.3-2.4,3.5-3.6c1.1-1.1,2.4-2,3.4-3.2
			c0.5-0.6,0.8-1.2,1.1-1.9c0.3-0.9,0.9-1.8,1.4-2.6c1-1.6,0.7-2.8-1-3.6c-1.8-0.9-3.7-1.5-5.5-2.2c-2.6-1.1-5.3-2.1-7.9-3.1
			c-1.5-0.5-3-0.9-4.4-1.5c-0.8-0.3-1.6-0.5-2.2-1.2c-0.9-1.2-2.5-1.1-3.6-1.9c-0.2-0.2-0.6,0-0.7,0c-2,2.9-4.7,4.9-7.1,7.2"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M49.6,69.4c3,1.9,6.2,3.4,9.4,5.2c3.3,1.8,6.6,3.7,9.8,5.7c1.6,1,3.3,1.8,4.9,2.7c2.4,1.3,4.8,2.6,7.1,4.1
			c2.6,1.7,5.6,2.6,8.4,3.9c1.4,0.6,2.8,1.3,4.2,2.1"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M257.9,99.4c1.1-1.9,2-4,2.9-6c1.4-3.2,2.6-6.4,4.7-9.3c0.6-0.8,0.9-1.8,1.3-2.7c0.3-0.7,0.1-1.2-0.6-1.6
			c-1.4-0.7-2.8-1.1-4.3-1.4c-2.3-0.4-4.4-1.4-6.6-2c-3.1-0.8-6.2-1.7-9.3-2.6c-1-0.3-2-0.6-3.2-0.9c-0.9,3.3-2.4,6.5-3.7,9.8
			c-1,2.5-1.4,5.2-2.8,7.5c-0.4,0.7-0.5,1.6,0,2.4"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M128.4,30.6c1-0.9,2.4-1.3,3.5-2.3c-1-0.6-1.9-1.1-2.8-1.5c-1.5-0.6-2.7-1.6-4.1-2.3c-1.9-0.9-3.8-1.5-5.9-1.9
			c-1.1-0.2-2.1-0.7-3.1-1.6c-1.6,0.8-3.2,1.7-4.8,2.8c-2.1,1.4-4.5,2.2-6.8,3.3c-1.2,0.5-2.4,1.2-3.7,1.6c-1.7,0.4-3,1.6-4.4,2.5
			c-1.4,0.9-2.8,1.8-4.2,2.7c0.2,1.1,1.3,1.2,2.1,1.6c2.1,1,4,2.2,5.6,3.8c0.7,0.7,1.5,1,2.4,1.3c2.7,1,5.4,2.2,8,3.5
			c0.3,0.1,0.5,0.4,1,0.7c3.6-3.7,8.2-6.2,12.1-9.7"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M75.3,105c-1.2-1.3-2.8-1.8-4.3-2.7c-3.2-1.9-6.6-3.5-10-5c-2.5-1.1-5-2.3-7.5-3.2c-2-0.7-3.9-1.8-5.9-2.7
			c-3.4-1.6-6.9-3.1-10.3-4.7c-0.5-0.2-1.1-0.5-1.7-0.4"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M98,47.3c3,1.1,5.6,2.8,8.4,4.2c3.5,1.7,6.9,3.7,10.6,5.3c3.2,1.4,6.4,2.8,9.4,4.6c1.8,1.1,3.7,2.2,5.6,3.3c1.9,1,3.9,2,5.9,3
			c-0.9,2.2-3,3.3-4.8,4.9c-0.5-1-1.2-1.5-2-1.9c-2.5-1.2-4.8-2.8-7.1-4.3c-3.2-2.1-6.6-3.8-10-5.5c-1.8-0.9-3.5-2-5.3-3"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M25.2,5.2c2.1,0.5,4.2,1,6.4,1.6c3.7,0.9,6.6,5,6.7,8.8c0.1,3-0.3,5.9-1.9,8.5c-2,3.2-5.1,4.9-8.8,5.7c-2.4,0.5-4.7,0.5-7.1-0.2
			c-3-0.9-5.8-2.4-7.7-4.9c-2-2.4-2.7-5.3-1.6-8.5c1.2-3.6,3.3-6.5,6.1-8.9c1.6-1.4,3.9-1.8,6.1-2.1c0.6-0.1,1.1,0,1.7,0"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M135.6,30.1c-2.9,3.2-6.5,5.5-10,8c-2.4,1.8-4.5,3.9-6.8,5.8c-1.1,1-2.2,2-3.8,2.8c11.7,5.5,23,11.2,33.4,18.8
			c2.9-2,5.4-4.4,7.6-7.1"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M87.7,120.5c1.6,1.3,2.9,3,4.8,4.1c2.3,1.3,4.6,2.3,7.3,2.5c2.7,0.2,5.3,0.2,7.8-0.8c2-0.9,3.9-2.1,5.7-3.4c1.9-1.5,3.3-3.3,4-5.6
			c0.5-1.6,0.5-3.4,0.4-5.1c-0.2-2.9-0.7-5.7-1.9-8.4c-0.8-1.7-2.1-3.1-3.5-4.4c-1.1-1.1-2.3-2-3.5-3c-0.8-0.7-1.8-0.8-2.8-0.9
			c-1.6-0.2-3.2-0.3-4.8-0.2c-1.6,0.1-3.3,0.5-4.8,1.1c-4.9,2-8.8,5.2-11.5,9.7c-1.5,2.6-1.7,5.4-0.8,8.3c0.6,1.8,1.4,3.5,2.7,4.9
			c0.4,0.5,0.7,1,0.5,1.8c-0.2,0.8,0,1.7,0.2,2.6c0.2,1.3-0.2,2.6-0.3,3.8"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M117.5,159.6c-0.3-1.9-0.6-3.8-0.8-5.6c-0.1-0.5-0.3-1-0.2-1.4c0.1-1.2-0.4-1.5-1.5-2c-3.3-1.4-6.7-2-10.1-2.4
			c-3.3-0.3-6.6-0.6-9.8-0.2c-1.8,0.2-3.5,0.1-5.3,0.4"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M219.1,71.8c-0.6,1.1-0.4,2.2-0.4,3.4c-0.1,3.2-0.1,6.4,0.3,9.6c0,0.4,0,0.7,0,1.1c-0.1,3.5,0.1,7,0.5,10.4c0,0.4,0,0.8-0.1,1.2
			c-0.1,0.4,0,0.8,0.6,0.7"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M196.3,94.1c1.9,0.2,3.8,0.4,5.8,0.6c2.7,0.2,5.3,0.7,7.9,0.9c3.2,0.3,6.2,1.3,9.2,2.2"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M226,99c0.3-1,1.3-1.2,2-1.7c2.4-1.6,5-2.9,7.5-4.3c0.6-0.3,1.1-0.3,1.8-0.2c1.8,0.4,3.5,1.1,5.3,1.5c3.9,0.8,7.6,2.1,11.4,3.4
			c1.2,0.4,2.4,1,3.6,1.5c0.8,0.3,1,1.7,0.5,2.4c-2.2,2.9-3.7,6.2-5.4,9.4c-0.3,0.6-0.5,0.7-1.1,0.4c-2.3-1.3-4.6-2.6-7-4
			c-1.6-0.9-3.4-1.3-4.9-2.6c-0.6-0.5-1.8-0.4-2.7-0.8c-3-1.3-6.2-2.3-9.1-3.7c-0.6-0.3-1.2-0.5-1.6-1c-0.4-0.5-0.8-0.4-1.2-0.4"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M29.4,113c-2.2-0.1-4.4-0.6-6.6-1.2c-4.5-1.2-8.9-2.9-13.2-4.7c-0.3-0.1-0.7-0.2-1.1-0.2"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M30.2,93.1c-0.3,0.4-0.4,0.9-0.4,1.4c0.1,3.7-0.1,7.4-0.2,11c-0.1,2.4-0.3,4.8,0,7.1c0.2,2.4,0.2,4.9,0.7,7.3
			c0.4,1.8,0.3,3.7,0.4,5.5c0,0.3-0.2,0.7,0.4,0.7"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M123.1,18.5c0.9,0.3,1.6,0.8,2.3,1.4c1.3,1.2,3,1.5,4.6,2.2c0.8,0.4,1.5,0.9,2.4,1.2c1.3,0.4,2.6,0.4,4,0c1.8-0.5,3.3-1.4,4.3-2.9
			c0.3-0.5,0.8-0.7,1.1-1.1c-3.6-2.1-7.6-3.1-11.4-4.7"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M81.8,47.9c-0.9,0.6-1.9,1.2-2.8,1.9c-0.9,0.7-0.8,1.1,0.1,1.7c3.4,2.2,6.8,4.4,10.2,6.6c0.6,0.4,1.3,0.6,1.9,1
			c0.3,0.2,0.6,0.1,0.8-0.1c0.9-0.8,1.9-1.5,2.9-2.2c1-0.7,1-1,0-1.8c-3.2-2.3-6.2-4.9-10-6.2c-0.6-0.2-1.1-0.9-1.9-0.7"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M126.6,144.5c-0.5,0.1-0.6-0.5-0.7-0.7c-0.9-4.1-3.1-7.5-5.9-10.6c-1.7-1.8-3-4-4.8-5.8"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M22.1,39.8c-1.3,0-2.5-0.6-3.8-0.8c-2.2-0.3-4.4-0.5-6.6-0.9c-2.2-0.4-4.3-0.2-6.5-0.5"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M30,86.5c0.6,0.3,0.4,0.8,0.3,1.2c-0.2,1.6-0.4,3.3,0.1,4.8c0.4,1.4,0.9,2.7,1.4,4.1c1.2,3.4,3.4,6.2,5.6,9
			c0.4,0.5,0.8,0.1,1.1,0.5"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M84.7,44.6c1.1,0.7,2.1,1.4,3.2,2.2c1.1,0.9,2.4,1.3,3.7,2c2.9,1.6,5.8,3.3,8.8,4.6c2.5,1.2,4.9,2.7,7.5,3.6"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M139.1,6.8c-1.6,1-3.1,2.1-4.5,3.6c1.9,1.2,3.8,2.3,5.8,3.2c1.5,0.7,3,1.4,4.6,1.9c0.5,0.1,1,0.3,1.3-0.1c1-1.2,2.2-2.1,3.4-3.1
			c0.2-0.1,0.3-0.4,0.2-0.9c-1.5-1.4-3.6-2.2-5.5-3.4c-1.4-0.8-3-1.1-4.5-1.3"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M41.5,50.2c-0.4-0.2-0.8-0.3-1.2-0.1c-4.4,2.5-8.8,4.7-13.1,7.3c-0.1,0.1-0.2,0.2-0.4,0.4"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M158,39.8c4.2,1.5,8.4,2.9,12.3,5.1c-0.1,0.7-0.4,1.1-0.8,1.4c-2.7,1.8-4.7,4.4-7.2,6.5c-1.6,1.4-3.4,2.6-4.9,4.2
			c-0.3,0.3-0.6,0.7-0.9,1"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M181.3,66.1c2.3,1.8,4.8,2.9,7.7,3.5c1.9,0.4,3.7,0.6,5.5,0.4c0.1,0,0.3,0.1,0.5,0.2"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M87.1,127.7c-0.9,1.6-1.1,3.4-1.5,5c-0.6,2.1-1,4.3-1.4,6.5c-0.1,0.5-0.4,1.4,0.7,1.4"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M74.5,53.8c-1.3,1.1-2.8,2-4,3.2c-0.8,0.9-0.8,1,0.4,1.6c0.4,0.2,0.9,0.4,1.2,0.7c1.9,2.1,4.4,3.2,6.7,4.7
			c0.9,0.5,1.6,1.2,2.6,1.6c1.7,0.5,4-0.1,5.1-1.5c0.5-0.6,1-1.2,1.4-1.8c0.2-0.2,0.3,0,0.5-0.1"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M9,86.4c-1.8,1.3-2.7,3.2-3.6,5.2c-1,2.2-1.3,4.7-1.7,7.1"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M229.1,83.3c-0.2,0-0.4,0.1-0.5-0.1c-1.2-3-3.7-5.1-5.5-7.7c-0.7-1-1.5-1.8-2.3-2.8c-0.7-0.8-1.7-1-2.4-1.8"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M75.7,55.1c4.1,2.2,8.3,4.2,12.1,6.8"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M245.3,105.2c0.6-1.3,0.6-1.3-0.6-1.8c-2.2-0.9-4.1-2.4-6.4-3c-1.8-0.5-2.1-0.5-3,0.9"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M23.8,32c3.2,0.6,6.4,1.5,9.4,3c0.6,0.3,1.1,0.6,1.8,0.5"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M10.6,20.2c-1.1,0.5-1.5,1.5-1.9,2.4c-1.4,2.9-2.6,5.9-3,9.1c-0.3,2-0.8,3.8-0.7,5.9c0,0.9-0.2,1.9-0.1,2.9c0,0.5,0.4,0.3,0.6,0.4
			"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M114.1,122.6c0.2,0.8,0.3,1.7,0.5,2.5c0,0.2,0,0.3,0,0.5c0.6,4.3,0.8,8.6,1,12.8c0.1,3.2,0.3,6.4,0.3,9.6c0,0.9,0.1,1.8,0,2.6"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M116.6,9.5c-0.4-0.1-0.8-0.2-1.2,0c-2.2,1.1-4.5,2.1-6.7,3.2c-0.4,0.2-1,0.5-1,1.2"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M87.1,127.5c0.9,0,0.7,0.8,0.8,1.3c0.1,0.8,0.2,1.5,0.3,2.3c0,2,0.3,4.1,0.3,6.1c0,2.1,0.3,4.2,0.6,6.2c0.1,0.8,0.2,1.5,0.2,2.3
			c0,2.2,0.1,4.3,0.1,6.5"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M144.6,33.6c-1.6-0.8-3.2-1.5-4.7-2.4c-1-0.6-2.1-0.8-3.3-0.9"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M219.6,98.3c0.3,2,0.4,4,0.9,6c0.2,0.7,0.7,1.3,0.6,2"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M60.7,89.5c-1.5-1-3.1-0.7-4.7-0.3c-1.3,0.3-1.5,0.8-1.6,2.3c0,0.3,0,0.6,0,1"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M243.5,85.6c-0.7,1.2-1.5,2.3-1.4,4c1.3-0.4,2.1,0.4,3.1,0.9"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M129.7,13.9c-1.8,1.1-3.7,2.3-5.5,3.3c-0.6,0.3-1,0.8-1.4,1.2"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M7,26.2c-1.8-1.1-3.8-1.8-5.8-2.7c-0.3-0.1-0.6,0-0.8-0.1"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M53.8,43.8c-0.6,0-1.1-0.1-1.7,0.2c-1.6,0.9-3.1,1.8-4.7,2.6"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M199.2,51.8c-0.1,1.1-0.7,2.1-1.1,3.1c-0.3,0.9-0.7,1.8-0.6,2.8"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M55.1,62.9c-1.6,1.2-3.2,2.3-4.8,3.5c-0.3,0.2-0.6,0.5-0.7,0.9"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M96,102.2c0.2,0.6-0.3,1.1-0.5,1.5c-0.7,1.3-0.9,2.9-1.5,4.2"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M254,100.9c-1.2,0.5-1.5,1.7-2.4,2.5c-0.9,0.9-1.3,1-2.2,0.1c-1.3-1.4-3.2-1.8-4.8-2.5c-0.6-0.2-1.2-0.4-1.8-0.7
			c-2.1-1.2-4.4-1.3-6.6-2.1c-0.9-0.3-1.9-0.8-2.9-0.8"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M244.6,87.1c1.8,0.6,3.6,1.1,5.4,1.7"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M203.9,53.5c-0.2,0-0.6-0.1-0.6,0.4c-0.1,1.6-0.8,3.1-1.1,4.7"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M55.7,93.5c1.2,0.2,2.1,0.9,3.2,1.4c1,0.4,2,0.5,3,0.3c1.6-0.3,2.1-2.3,1-4"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M54.8,86.3c-2.3-0.1-3.9,1.5-4.3,3.2"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M249.5,90.1c-1.4-0.4-2.8-0.8-4.2-1.2c-0.3-0.1-0.6,0-0.8-0.1"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M243.7,79.7c-0.9,0.7-1,2-0.2,2.7c0.5,0.4,1,0.9,1.7,1"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M235.1,95.6c1.4-1.1,2.7-0.1,3.9,0.2c2.2,0.5,4.3,1.4,6.5,2.1c2.6,0.8,5.2,1.4,7.6,2.8"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M32.8,19.4c-0.5-0.1-0.6,0.3-0.7,0.7c-0.3,0.8-0.7,1.6-1,2.4c-0.2,0.5-0.4,0.3-0.7,0.3"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M255.1,82.8c-0.8,1.3-1.7,2.7-2.8,3.8"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M251.5,88c-0.2,1.4-0.8,2.7-1.3,4"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M147,24.7c-1.3,1-2.8,1.8-4,3c-0.2,0.2-0.4,0.1-0.6,0.1"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M88.4,42.5c-1.1,0.8-2.4,1.2-3.6,1.8"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M68.2,92.4c0.4,1.9-0.2,3.6-1.6,4.9"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M93.7,101.5c-1.1,0.9-2,2.1-2.8,3.4"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M260,86.4c-1,2.4-2.3,4.6-3.5,6.8"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M237.1,98.3c0.3-0.9,0.6-1.1,1.6-0.7c1.2,0.5,2.5,0.7,3.8,0.9c0.9,0.1,1.7,0.5,2.3,0.9c1.3,0.9,2,0.3,2.8-0.6"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M29.2,71.8c0.6,1.1,0.8,2.2,1.2,3.4"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M149.4,36c1.1,0.4,2.2,0.8,3.4,1.2"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M28.6,18.4c-0.2,1.1-1,1.8-1.5,2.8c-0.1,0.2-0.4,0.4-0.3,0.7"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M237.5,102.2c0.4,0.3,0.8,0.7,1.2,0.8c0.8,0.3,1,0.9,1.1,1.6c0.5-0.1,1-0.3,1.6-0.4"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M246.6,100c1.1,0.8,2.3,1.5,3.7,1.7c0.3,0,0.5,0.3,0.7,0.5"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M234.8,96.1c0.8,0.4,1.6,0.8,2.4,1.2"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M252,85c-0.7-0.3-1.5-0.6-2.3-0.5"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M32.2,71.4c0.3,0.8,0.6,1.5,0.8,2.3"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M258.5,84.7c-0.4,0.7-1,1.3-1,2.2"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M258.4,87.1c-0.7-0.1-1.1-0.3-1.5,0.7c-0.5,1.3-1.1,2.6-2.2,3.6c-0.5,0.5-0.2,1,0.3,1.2c0.3,0.2,0.6,0.3,0.8,0.5"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M21.6,32c0.6,0.1,1.2,0.2,1.8,0.2"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M251.8,100.3c-0.4,0.5-1.1,0.6-1.3,1.3"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M24.2,30.4c-0.2,0.6-0.5,1.2-0.7,1.8"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M131.4,14.2c-0.6,0-1.1,0.6-1.7,0.1"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M234.8,95.8c-0.5,0.5-1.3,0.5-1.8,1.1"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M7.3,26.4c0.8,0.2,1.6,0.9,2.5,0.6"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M251.2,81.8c0.5,0.2,1.2-0.3,1.6,0.4"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M239.5,96.2c-0.4,0.4-1,0.5-1.2,1.1"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M255.1,91.3c0.3,0.6,0.9,0.2,1.3,0.5"/>
		<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M76.4,54.6c-0.9-0.1-0.9-0.1-1,0.4"/>
	</g>
</g>
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	M23.9,30.3c-0.6,4.2-1.1,7.3-1.6,9.4c-0.2,0.7-0.6,2.4,0.3,3.4c0.2,0.2,0.5,0.4,0.6,0.5"/>
</svg>
            
          
!
            
                
/* fit the example svg in the window, relatively size it */
svg{
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* learned about this technique to simulate sketching via css animating from Danny Chahla: https://github.com/dchahla  */
/* learned more about this via an article at CSS Tricks: https://css-tricks.com/svg-line-animation-works/ */
path {
/* stroke-dasharray affects how long the stroke draw lines are, higher number looks more like drawing, lower number looks like a particle effect  */

  /* stroke-dasharray length helps to be longer than the paths which effectively hides the paths    */
  stroke-dasharray: 1000;  

  /* moves the position of the dashes, which makes them animate-able */
  stroke-dashoffset: 1000;
  
  /* remove "infinite" to have it draw only once */
  animation: dash 4s infinite;
  fill:#FFFFFF;
  stroke:#000000;
  stroke-width:1px;
  /* depending on the drawing, may need to use stroke-miterlimit to smooth out line segments that join at a sharp angle:  https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit */
  /*   stroke-miterlimit:10px; */
}

/* the animation */
@keyframes dash {
  to {
    /* closing the offset makes the line appear to be drawn-in */
    stroke-dashoffset: 0;
  }
}
            
          
!
999px
Loading ..................

Console