Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

+ add another resource

JavaScript

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

Add External Scripts/Pens

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

+ add another resource

Behavior

Save Automatically?

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

Auto-Updating Preview

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

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <svg id="calligraphy-content" viewBox="0 0 352.2 94.2">
	<defs>
		<clipPath id="he-1">
			<path d="M31.8,16.4c-0.8-2-1.3-4.3-3-5.7c-0.9-0.9-2.3-1.5-3.5-0.9c-1.1,0.7-2.1,1.6-2.9,2.6
		c-1.2,2.2-2.1,4.7-3,7c-1.5,2.2-2.9,4.6-4,7c-0.6,1.7-3,2-3,4c-0.1,2-1.1,3.7-2.6,4.9c-0.9,1.8-2,3.5-3.1,5.2
		c-0.6,0.7-1.4,1.2-2,1.8c0.2,0.4,0.6,0.9,0.2,1.4c-1.3,2.1-3,3.9-4.6,5.7c0.2-0.8,0.5-1.6,0.8-2.3c-0.3,0.1-0.7,0.2-1,0.3
		c0,1.1-0.2,2.3,0.1,3.4c0.4,1.4,1.3,2.6,1.9,3.9c0.3,1.7,0.4,3.5,1.3,5.1c0.7,0.7,1.4,1.5,2.1,2.3c0.9,0.3,1.6-0.7,2.3-1.1
		c0.1,0.6,0.1,1.3,0.2,1.9c0.9-0.8,2.1-0.8,3.3-0.9c0.2,0.4,0.4,0.7,0.6,1.1c0.4-0.9,1.2-1.9,0.7-2.9c-0.8-0.5-1.7-1-1.8-2.1
		c0.7,0.2,1.4,0.4,2.1,0.7c1.4-1.4,0.9-3.7,2.4-4.9c0,0,0,0,0,0l3-7.9c0,0,0,0,0,0c1.1-2.3,2.9-4.1,4.3-6.1c2.4-4,6.8-6.4,9-10.6
		c0.3-1.3-0.1-2.7,0.2-3.9c0.3-1.4,1-2.6,1.3-4C33.1,19.6,32.3,18,31.8,16.4z" />
		</clipPath>
		<clipPath id="he-2">
			<path d="M14.8,66c0.8,1.3,2.3,2.1,2.8,3.6c0.5,1.1,0.7,2.5,1.5,3.4c1.5,1.6,2.9,3.9,5.4,3.9
		c1.8,0.8,3.4-0.5,4.6-1.6c1.1-1.4,2.4-3.2,1.8-5.1c-0.8-3.3-1.2-6.8-0.7-10.2c0.1-2.7-0.5-5.4-1.6-7.9c-0.8-1.4-2-2.5-2.9-3.8
		c-0.7-0.6-1.1-1.7-2.1-1.8c-1.8-0.4-3.6-0.3-5.5-0.5l-3,7.9C15.7,58,14.2,62,14.8,66z" />
		</clipPath>
		<clipPath id="he-3">
			<path d="M66.8,8.2C71.7,7,76.7,5,81.9,6c1.4,0.2,2.3,1.4,3.2,2.3c0.7,0.9,1.9,1.8,1.6,3.2
		c-0.2,1.8-0.6,3.7-2.2,4.7c-1.2,0.7-0.9,2.4-2.1,3c-1.9,1.3-4.3,0.5-6.4,1.4c-0.8,0.3-1.6,0.7-2.5,0.4c-2.1-0.3-4.2-0.5-6.1-1.2
		c-3.1-1.3-6.2-2.6-8.5-5.2c1.1-1.7,2-3.6,3.6-4.9C63.6,8.6,65.3,8.5,66.8,8.2z" />
		</clipPath>
		<clipPath id="he-4-1">
			<path d="M76.4,33.4c-1-1.1-1.8-2.6-3.1-3.4c-1.1-0.5-2.2-1.1-3.2-1.9c-0.9,0.5-1.8,0.9-2.7,1.3
		c0.4,1.5,1,2.9,0.9,4.5c0,0.1,0,0.1-0.1,0.2l2.1,7.2c0,0,0.1,0,0.1,0c-0.4,3.8-1.4,7.8-4.3,10.6c-0.9,0.7-2.2,0.7-3.3,1
		c-0.2-0.8-0.4-1.6-0.6-2.4c-0.2,0.1-0.4,0.2-0.6,0.3c-0.2,0.8-0.2,1.6-0.4,2.4c-0.1,0-0.4-0.1-0.6-0.2c0,0,0-0.1,0-0.1l-9.4,12.5
		c1.6,0.2,3.4-0.4,4.8,0.7c2.3,1.7,5.4,2.4,8.2,1.7c2.7-0.5,5-2.1,7.2-3.7c2.5-1.8,4.3-4.3,5.4-7.2c0.7-1.5,0.4-3.2,1.2-4.6
		c0.8-1.2,1.7-2.4,1.8-3.9c0.1-3.1-0.7-6.1-1-9.2c0,0,0,0,0,0L76.4,33.4C76.4,33.4,76.4,33.4,76.4,33.4z" />
		</clipPath>
		<clipPath id="he-4-2">
			<path d="M95.7,50.7c-0.6-2.2-0.7-4.6-1.8-6.7c-1.3-1.6-1.8-3.7-3.3-5.2c-0.9-1-1.4-2.2-2.4-3.2
		c-1.5-0.8-3.2-1.3-4.8-2c-1.8-0.4-3.7-0.4-5.2-1.5c-0.6,0.5-1.2,1-1.8,1.4c0-0.1-0.1-0.1-0.1-0.2l-9.1,1.9
		c-0.4,0.2-0.8,0.4-1.2,0.5c-1.9,0.6-3.6,1.4-5.4,2.3c-2.1,0.9-3.2,3-4.6,4.6c-1.1,0.9-1,2.2-1.3,3.5c-0.6,0.3-1.3,0.5-1.9,0.9
		c-1.9,2.6-2.6,5.7-2.9,8.8c-0.3-0.6-0.7-1.2-1-1.8c-0.8,4,0.6,7.9,2.4,11.4c0,0,0,0,0.1,0L60.8,53c0-2.6-0.6-5.3,0.7-7.7
		c1.5-1.4,4-1.4,4.8-3.5c1.4-0.1,2.8-0.3,4.2-0.4c0,0,0,0.1,0,0.1l8.6-2c0,0,0,0,0,0c0,0,0,0,0.1,0l0,0l0,0c1.3,0.1,2.6,0,3.8,0.3
		c1.1,0.3,1.7,1.4,2.5,2.2c2.9,3.6,4,8.3,4.4,12.8c0.3,3.2-1.3,6.1-1.9,9.2c-0.5,2.3-1.4,4.5-2.9,6.3c-1.7,2.1-3.3,4.3-5.5,5.9
		c-1.5,1.2-2.7,2.8-4.4,3.8c-1.6,1-3.5,1.7-4.8,3.2c-1.3,1.5-3,2.5-4.7,3.4c0.5,0.8,0.7,1.9,1.6,2.3c1,0.1,2.2,0.7,3.2,0.1
		c2.9-1.7,5.8-3.5,8.6-5.4c0.5,0.3,1,1,1.7,0.7c2-0.7,3.7-2.1,5.3-3.4c1.1-0.9,2.8-0.2,3.8-1.3c1.9-2,2.6-4.9,3.4-7.5
		c1.2-4.4,2.5-8.8,2.4-13.4C95.7,55.9,96.5,53.3,95.7,50.7z" />
		</clipPath>
		<clipPath id="yi-1">
			<path d="M204.7,34.8c2.8-1.7,6.6-1.6,9.4,0.2c3.9,0.6,5.9,4.7,9.4,6c0.3,2.3,0.8,4.6,0.6,6.9
		c-0.2,0.7-0.6,1.4-1.2,1.9c-0.8,0.5-1.7,0.6-2.5,0.9c-0.5-0.7-1-1.4-1.6-2c-0.8,0-1.5,0.5-2.3,0.9c-1.3-1.3-3-2.4-4.9-2.5
		c-3-0.8-6.1,0.1-9,0.9c-1.2,0.2-2.5,0.4-3.7,0.5c-1.1,0.2-2.1,1.1-3.2,0.8c-0.9-0.1-1.9-0.6-2.8-0.1c-1.5,0.5-2.8,2-4.5,1.3
		c0.2-0.9,0.2-2.3,1.2-2.8c0.7-0.6,1.9-1,2.2-2c-0.1-0.8-0.9-1.5-1.7-1.6c-1.4-0.1-2.8,0.4-4.1,0.8c-2.1,0.7-4.5,0.4-6.6,1.1
		c-2.2,0.6-4.6,0.3-6.8,0.6c-2.1,0.4-4.2,1.1-6.4,1.2c-1.4-0.3-2.3,1-3.5,1.4c-3,0.9-6.2,1.1-9.1,2.3c-1.3,0.5-2.8,0.7-4.2,1.2
		c-0.9,0.4-1.4,1.3-2.3,1.8c-1.9,1-3.9,2.1-5.7,3.4c-1.6,1.3-3.6,2-5.6,2.4c-2.6-0.6-5.2-1.4-7.1-3.3c-0.6-1.7-1.3-3.3-1.7-5.1
		c-0.3-0.7,0-1.4,0.2-2.1c0.4-1,0.4-2.2,1.1-3.1c0.4-0.6,1.1-0.9,1.7-1.2c0.4,1.3,0.9,2.5,1.6,3.6c1.5-0.4,3.1-0.9,4.7-1
		c3.4-0.2,6.6-1.3,9.8-2.4c2.1-0.8,4.4-0.7,6.4-1.7c2-0.7,4.2-1.1,6.2-1.8c2.8-1.1,5.9-1.9,8.9-2c4.1-0.3,7.9-1.6,12-2.1
		c2.5,0.1,5.1,0.2,7.4-0.9c2.2-1.1,4.6-1.5,7-1.9c1.9-0.2,3.8,0.8,5.7,0.6C201.5,35.8,203.2,35.6,204.7,34.8z" />
		</clipPath>
		<clipPath id="fei-1">
			<path d="M287.3,59.6c-0.4-0.9-1-2-0.2-2.9c1.1-1.1,2.3-2.3,3.8-2.6c-0.4-1.7,0.8-3.4,0.8-5.1
		c-0.3-1.2-0.8-2.3-1-3.5c0.3-1,0.8-1.9,1.1-2.8c-0.4-0.1-0.8-0.2-1.2-0.3c0.9-4.9,0.1-10,0.4-15c0.2-1.2,1-2.3,1.1-3.6
		c-0.1-0.7-0.6-1.3-0.9-1.9c-1.1-1.8-1.5-3.8-2.7-5.5c-1.3-1.7-2.5-3.5-3.7-5.2c-0.8-1.2-2.3-1.6-3.6-2.1c-0.2,1.1-0.6,2.2-0.7,3.3
		c0.1,1.5,0.4,3.1,0.1,4.7c-0.4,2.5-0.5,5.1-0.3,7.7c-0.4,0.4-0.8,0.9-1.2,1.3l0.2,10.9c0,0,0.1,0,0.1,0c-0.6,3.3-0.5,6.7-0.5,10
		c0,0-0.1,0-0.1,0l-0.7,7.2c0,0,0,0,0,0c0.4,1,1.4,1.8,1.1,2.9c-1,1.5-2.4,2.9-2.6,4.8c-0.3,1.4,0.8,2.4,1,3.7c0,0,0,0,0,0l6.7,10.9
		c0,0,0,0,0,0c1,0.3,2,0.6,3,0.7c0.7,0.4,1.4-0.1,1.8-0.6c0.9-1.4,2-2.6,3.1-3.9c0-1.2,0.1-2.5,0.3-3.7L287.3,59.6
		C287.3,59.6,287.3,59.6,287.3,59.6z" />
		</clipPath>
		<clipPath id="fei-2">
			<path d="M265.3,42.2c1-0.8,1.5-2.1,2.6-3c1.1-0.5,2.4-0.4,3.5-0.9c0.8-0.5,1.2-1.5,2.2-1.6
		c1.9-0.4,3.9,0,5.8,0.4l-0.2-10.9c0,0,0,0,0,0c-1.3-0.5-2.5-1.1-3.9-1.2c-3.3-0.4-6.6-1.1-10-1c-0.7,1.3-1.5,2.5-2.6,3.5
		c-1.5,1-3.2,1.6-4.9,2.2c0,1.6,1.3,2.9,2.8,3.1c1.3,0.4,3.1,0.6,3.6,2.1c-0.7,2.6-3.2,4.6-3.4,7.5c-0.4,1.1,0.1,2.1,0.7,3
		c0,0,0,0,0,0l0.9,0.5C262.2,43.9,264.1,43.2,265.3,42.2z" />
		</clipPath>
		<clipPath id="fei-3">
			<path d="M304.6,49c-3.6,2.2-6.7,5-10.2,7.2c-2.2,1.4-4.4,2.9-7,3.4c0,0,0,0,0,0l-9.7,6c0,0,0,0,0,0.1
		c-1.4,1.5-3,2.8-4.6,4.1c-1.2,0.7-2.4,1.3-3.6,2c-1.4,0.9-3.1,0.9-4.6,1.7c-0.8,0.9-1.8,1.6-3,1.7c-0.4-1.3-0.9-2.8-0.2-4.2
		c0.7-1.3,1.4-2.6,2.4-3.7c0.8-1,2.1-1.5,2.8-2.5c1.5-1.7,2.6-3.7,4-5.5c2-2.2,4.7-3.8,7.3-5.2c0,0,0,0.1,0,0.1l0.7-7.2
		c-1.6,0-3-1.1-4.6-1.3c-1.8-0.2-3.4-1.2-5.1-1.7c-1.4,0.2-2.7,1-4,1.6c-0.9,0.4-2,0.2-2.9,0.2c0-0.1,0-0.1,0-0.2l-0.8-0.5
		c-0.9,0.1-2,0.2-2.3,1.2c-0.6,1.4,0.3,2.7,1,3.8c0.7,1.8,2.5,2.9,3.9,4.1c-0.2,1.1-0.1,2.1-0.2,3.2c-0.1,1.3-0.8,2.5-1.5,3.6
		c-1,1.4-1.1,3.1-1.9,4.6c-1.3,2.9-3.5,5.2-5.3,7.7c-0.8,2.3-0.8,4.9,0,7.2c0.5,0.8,1.2,1.5,2,2c1.9,1,3,2.9,4.3,4.5
		c0.3-0.1,0.6-0.2,0.9-0.3c0.9,1,2.2,1.1,3.4,1.5c0.9,0.5,1.7,1.6,2.9,1.2c1.9-0.1,3.9-0.2,5.5-1.4c2.2-1.2,3.9-3.2,5.7-5
		c2-1.9,1.9-5.2,4.5-6.6c1,0.3,2,0.6,3,0.7c0.7,0.4,1.4-0.1,1.8-0.6c0.9-1.4,2-2.6,3.1-3.9c-0.1-1.8,0.1-3.7,0.7-5.5
		c0.8-1.2,2-2,2.9-3.2c0.8-1.1,1.5-2.3,2.5-3.3c0.9-0.3,2-0.1,2.9-0.4c-0.2-0.5-0.4-1-0.5-1.5c0.5-0.3,1-0.6,1.4-1.1
		c1.5-2,2.6-4.2,3.5-6.5c0.4-0.9,1.2-1.7,1.6-2.7C306.3,48.6,305.4,48.6,304.6,49z" />
		</clipPath>
		<clipPath id="fei-4">
			<path d="M323.7,63c-1.1-1.2-0.3-2.9-0.3-4.4c0.3-1.6-1.3-2.8-1-4.3c0.3-1.9,0.8-3.7,1.1-5.6c0,0,0,0,0,0
		l0.3-5.3c-0.5-1.7-0.7-3.4-0.1-5.1c0.4-1.2,0.2-2.5,0-3.8c0,0,0,0,0,0l0.3-1.8c0-0.9,0.1-1.7,0.3-2.6c0,0,0,0,0.1,0l-0.6-8
		c0,0,0,0,0,0c0-3.6-0.1-7.3,0.5-10.9c0.5-2.1,2.4-4.2,1.1-6.4c-0.5-1.1-1-2.1-1.8-3c-1-0.8-2.3-0.9-3.4-1.2c-2.2-0.6-4.5-1-6.7-0.3
		c-1.4,1.1-2.6,2.4-3.8,3.7c-1.3,1.3-1.8,3-2.3,4.7c1.5,0.6,3,0.8,4.6,0.5c1-0.2,1.4,1,1.7,1.7c0,2.8,0,5.6,0,8.4
		c-0.2,2.5-0.1,5,0.4,7.4c0,1.9-0.4,3.9,0.1,5.8c0.2,0.8,0.2,1.7,0,2.6c-0.4,2.9-0.4,5.9-0.9,8.8c-0.4,4.5,0.4,8.9,0.6,13.4
		c-0.2,1.9,0.5,3.7,0.5,5.5c0.7,2.1-0.9,4-0.5,6c0.4,1.9,1.2,3.8,1.2,5.8c-0.9,0.7-2.1,1.2-2.8,2.1c-0.4,1.8-0.7,3.8-2.1,5.2
		c0.9,0.9,1.7,2,2.3,3.2c1.3,3,2.7,6,5,8.3c0.7,0.8,1.9,0.4,2.8,0.4c1.7,0.3,2.8-1.1,3.5-2.4c0.9-2.6,0.5-5.3,0.1-7.9
		c-0.3-1.5,0.1-3.1-0.3-4.6c-0.4-2.9-0.5-6,0.6-8.8c0,0,0,0,0,0L323.7,63C323.7,63,323.7,63,323.7,63z" />
		</clipPath>
		<clipPath id="fei-5">
			<path d="M325.2,30.5c-0.2,0.9-0.5,1.8-1.2,2.4c0,0,0-0.1,0-0.1l-0.3,1.8c1.5-0.3,2.9-0.3,4.4-0.5
		c1.5-1.8,3.4-3.4,5.7-3.9c1.9-0.1,3.8-0.2,5.7-0.6c1.2-0.8,2.6-1.7,3.2-3.1c-0.2-1.7-1.6-2.9-2.5-4.2c-1.9-1.3-4.3-1.4-6.5-1.6
		c-1.3-0.1-2.6-0.5-4-0.4c-2.1,0.2-4,1.3-6,1.9l0.6,8C324.6,30.3,324.9,30.4,325.2,30.5z" />
		</clipPath>
		<clipPath id="fei-6">
			<path d="M327.7,51.4c-0.2,2.4-1.1,4.7-1.1,7.2c0.5,0.1,1,0.2,1.5,0.2c3.3-0.9,5.4-3.8,8.3-5.4
		c0.9-0.8,2.2,0.7,3.1-0.3c1.1-1.1,2.6-2,3.3-3.4c0.1-2.9-2.7-5.4-5.5-5.6c-1.7-0.3-3.1-1.2-4.7-1.9c-1-0.4-2-0.1-3,0.1
		c-1.9,0.5-3.9,0.9-5.9,1.2c0,0,0,0,0,0l-0.3,5.3C325.2,48.7,327.6,49.4,327.7,51.4z" />
		</clipPath>
		<clipPath id="fei-7">
			<path d="M350.2,68.9c-0.4-1.4-2-1.9-3.1-2.6c-1.3-0.9-2.4-2-3.7-2.8c-2.3-1.7-5.3-1.3-7.9-0.6
		c-2.7,1.1-5.7,1.2-8.6,0.9c-1.1-0.2-2.5,0.1-3.3-0.8l0.4,7.4c0.8,0.6,1.5,1.2,2.3,1.8c-0.5,0.3-1,0.7-1.5,1
		c0.7,2.3,2.4,4.1,4.4,5.3c1.1,0.3,2.3,0,3.4,0c2.6-0.1,5.1-1.1,7.8-1c0.9-0.1,1.6,0.4,2.4,0.7c1.2-0.2,2.2-1,3.4-1.1
		c2.1,0.1,3.8-1.4,5.8-1.8C351.3,73.3,350.8,71.1,350.2,68.9z" />
		</clipPath>
	</defs>


	<path class="pen p-he-1" d="M30.4,12.7c-1.3,3-2.7,6-4.3,8.9c-1.7,3.2-3.6,6.3-5.5,9.3C19.3,33,18,35.1,16.6,37
		c-1.4,1.9-2.9,3.7-4.2,5.6C9.1,47.4,6.7,53.1,2,56.4" />
	<path class="pen p-he-2" d="M4.7,49.1c3.8,0,7.6,0,11.4,0c0.8,0,1.5,0,2.3,0.2c1.9,0.6,2.9,2.7,3.3,4.6
		c0.8,3.2,0.8,6.5,1.1,9.7c0.4,4.5,1.5,8.9,2.5,13.3" />
	<path class="pen p-he-3" d="M59,14.7c9.3-1,18.6-2,27.8-3.9" />
	<path class="pen p-he-4-1" d="M68.8,28.5c3,4.2,6,8.8,6.2,14c0,1.5-0.2,3.1-0.6,4.6c-0.8,3.3-2.5,6.5-4.9,9
		c-0.5,0.5-1,0.9-1.6,1.2c-0.5,0.3-1,0.4-1.6,0.5c-3.1,0.8-6.6,1.6-9.5,0.3" />
	<path class="pen p-he-4-2" d="M60.8,59.9c-1.7,0-3.4-0.9-4.4-2.4c-1-1.4-1.4-3.2-1.2-5c0.4-3.5,2.8-6.4,5.4-8.9
		c2.2-2.1,4.5-4.1,7.4-5.3c2.9-1.2,6.1-1.4,9.2-1.4c1.8,0,3.7,0.1,5.5,0.6c4.6,1.4,7.9,5.6,9.2,10.2s0.9,9.5,0.1,14.2
		c-0.5,2.8-1.1,5.6-2.5,8.1c-1.3,2.5-3.3,4.6-5.5,6.5c-5.1,4.6-11.2,8.1-17.7,10.2" />

	<path class="pen p-yi-1" d="M135.2,43.2c-1,1.1-2,2.4-2.8,3.6c-1.3,1.9-2.2,4.6-0.6,6.3c1.4,1.4,3.7,0.9,5.5,0.4
		c11.5-3.3,22.9-6.7,34.4-10c2.9-0.8,5.7-1.7,8.7-2.3c2.6-0.5,5.3-0.9,8-1.1c12.3-1.1,25.2,0.5,36.1,6.4" />

	<path class="pen p-fei-1" d="M290,5.9c-1.1,1.1-1.4,2.6-1.7,4.1c-3.2,15.3-4.9,31-5,46.7c0,2.8,0,5.7,0.7,8.5
		c1,3.8,3.2,7.3,6.4,9.8" />
	<path class="pen p-fei-2" d="M257.3,38.8c1.9-2.2,4.9-3.1,7-5c0.5-0.4,0.9-0.9,1.4-1.2c0.8-0.5,1.8-0.7,2.7-0.9
		c3.6-0.6,7.3-1.3,10.9-0.8" />
	<path class="pen p-fei-3" d="M252.9,50.8c8.3-2.2,17.1-4.5,25.4-2c-4.1,2.6-7.4,6.2-10.6,9.8c-1.4,1.6-2.9,3.2-4.1,4.9
		c-2,2.9-3.3,6.2-4.3,9.5c-0.3,1.1-0.7,2.3-0.5,3.5c0.2,1.6,1.3,2.9,2.4,4c0.8,0.9,1.5,1.7,2.6,2.2c1.5,0.7,3.3,0.4,4.7-0.4
		c1.5-0.8,2.6-1.9,3.8-3.1c4.7-4.5,9.6-8.8,14.4-13.1c6.8-5.9,13.5-11.9,20.3-17.8" />
	<path class="pen p-fei-4" d="M300.7,7c4.1-2,8.5-3.3,12.9-4c1.3-0.2,2.8-0.2,3.7,0.8c0.6,0.7,0.7,1.7,0.8,2.6
		c1,11.6,0.8,23.2,0.7,34.8c-0.1,8.6-0.2,17.1-0.3,25.7c-0.1,6.4-0.1,12.8-0.8,19.1c-0.2,1.7-0.6,3.6-2,4.6" />
	<path class="pen p-fei-5" d="M315.7,29.5c6.1-1.2,12-3.7,18.2-4c-1.6,2.1-3.4,4.1-5.3,5.9" />
	<path class="pen p-fei-6" d="M315.3,47.8c5.1-0.6,10.2-1.3,15.3-1.9c0.9-0.1,1.8-0.2,2.7,0c0.9,0.2,1.7,0.7,2,1.6
		c0.5,1.5-0.9,3-2.1,4.1c-2.4,2.1-4.4,4.6-6.2,7.2" />
	<path class="pen p-fei-7" d="M316.7,67c4.3,0.5,8.8-0.8,12.9,0.6c1.2,0.4,2.3,1.1,3.5,1.7c3.4,1.7,7.2,2.6,10.9,3.4
		c2.8,0.6,5.7,1.2,8.5,1.9" />

</svg>

              
            
!

CSS

              
                .keyframes(@name, @rules) {
    @-webkit-keyframes @name { @rules(); }
    @-moz-keyframes @name { @rules(); }
    @-ms-keyframes @name { @rules(); }
    @-o-keyframes @name { @rules(); }
    @keyframes @name { @rules(); }
}
.animation (@name, @duration: 300ms, @ease: ease) {
    -webkit-animation: @name @duration @ease;
    -moz-animation:    @name @duration @ease;
    -ms-animation:     @name @duration @ease;
    animation:         @name @duration @ease;
}
.do-calligraphy-animation(@name, @strokeDasharray, @startPct, @endPct, @timingFunction: @animation-timing-function) {
	.p-@{name} {
		clip-path: url("#@{name}");
		stroke-dasharray: @strokeDasharray;
    .animation(~'draw-@{name}', @animation-duration, @timingFunction);
	}
	.keyframes(~'draw-@{name}', {
		0%, @{startPct} {
			stroke-dashoffset: @strokeDasharray;
		}

		@{endPct} {
			stroke-dashoffset: 0;
		}
	});
}


@animation-duration: 5s;
@animation-timing-function: ease;

.pen {
	fill: none;
	stroke: black;
	stroke-width: 20;
	stroke-linecap: round;
	stroke-linejoin: round;

	stroke-dashoffset: 0;
}

// HE: 0 - 20 - 40 - 60 - 70 - 100
.do-calligraphy-animation(he-1, 60, 0%, 20% * 0.35, ease-in);
.do-calligraphy-animation(he-2, 47, 20% * 0.35, 40% * 0.35);
.do-calligraphy-animation(he-3, 83, 40% * 0.35, 60% * 0.35);
.do-calligraphy-animation(he-4-1, 45, 60% * 0.35, 70% * 0.35, linear);
.do-calligraphy-animation(he-4-2, 113, 70% * 0.35, 100% * 0.35, linear);

// YI: 0 - 100
.do-calligraphy-animation(yi-1, 109, 40% + 0%, 40% + 100% * 0.2);

// FEI: 20 - (17) 25 - 40 - (50) 75 - 82.5 - 90 - 100
.do-calligraphy-animation(fei-1, 73, 60% + 0%, 60% + 20% * 0.4);
.do-calligraphy-animation(fei-2, 25, 60% + 17% * 0.4, 60% + 25% * 0.4);
.do-calligraphy-animation(fei-3, 127, 60% + 25% * 0.4, 60% + 40% * 0.4, ease-in);
.do-calligraphy-animation(fei-4, 106, 60% + 50% * 0.4, 60% + 75% * 0.4);
.do-calligraphy-animation(fei-5, 28, 60% + 75% * 0.4, 60% + 82.5% * 0.4);
.do-calligraphy-animation(fei-6, 37, 60% + 82.5% * 0.4, 60% + 90% * 0.4);
.do-calligraphy-animation(fei-7, 38, 60% + 90% * 0.4, 60% + 100% * 0.4);

              
            
!

JS

              
                
              
            
!
999px

Console