cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-personicon-teamoctocatpop-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
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console