Handwriting: SVG animation

HTML

              
                <br><br><br><br><br>



<div id="svgWrapper">
<svg version="1.1" id="summerbird" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 595.3 300" xml:space="preserve">
<defs>
<clipPath id="clip">
<path d="M166.1,109.6c5.1-6.2,9.2-12.9,11.6-20.6c1.3-4.3,2.1-8.8,1.3-13.3c-1.3-7.4-7.6-12.2-14.8-11.6c-4.4,0.4-8.3,2-11.6,4.9
	c-4.4,3.8-7.4,8.5-9.8,13.7c-5.1,10.8-7.6,22.4-9.3,34.1c-0.5,3.5-0.8,6.7-1.2,10.3c0,0.4-0.2,0.9-0.5,1c-2.1,0.7-4.3,1.3-6.4,2
	c-0.1-0.2-0.2-0.3-0.2-0.3c0-0.2,0-0.4,0-0.7c0.2-8.7-0.9-17.1-3.8-25.3c-7-19.9-23.8-32.6-44.9-33.9c-1.5-0.1-3-0.2-4.7-0.3
	c0.3-0.4,0.5-0.8,0.7-1.1c5.1-7.8,12-13.4,20.9-16.4c9.2-3.1,18.3-3.3,27.4,0.5c5.5,2.3,10.3,5.8,14.8,9.8c1.7,1.5,3.3,3,5,4.6
	c0.9-0.8,1.7-1.5,2.7-2.4c-1.9-1.9-3.6-3.9-5.6-5.7c-6.7-6.1-14.4-10.2-23.4-11.9c-1.4-0.3-2.9-0.5-4.3-0.7c-2.3,0-4.6,0-6.8,0
	c-1.6,0.2-3.1,0.4-4.7,0.7C85.8,49.5,76,56.2,68.6,66.6c-0.5,0.8-1.1,1.5-1.5,2.4c-0.4,0.8-0.9,1-1.7,1.1
	c-11.9,1.3-22.6,5.8-32,13.1C19.5,94,10.2,107.9,6,125.1c-0.8,3.4-1.1,6.9-1.7,10.4c0,0.3-0.1,0.5-0.2,0.8c0,2.9,0,5.8,0,8.8
	c0.1,0.2,0.1,0.5,0.2,0.7c0.5,3.6,0.8,7.3,1.6,10.8C10.3,176.4,21,191.9,38,203c10.9,7.1,23.1,9.9,35.9,10.4
	c6.2,0.2,12.4-0.3,18.5-1.6c20.1-4.4,34.8-15.7,43.6-34.3c5.6-11.7,7.7-24.2,8.7-37c0.3-4.3,0.4-8.6,0.6-12.9c0-0.4,0.3-0.9,0.6-1
	C153.9,122.3,160.4,116.4,166.1,109.6z M69.6,73.7c0.1-0.3,0.6-0.7,0.9-0.7c9.7,0.2,19.1,1.6,27.6,6.7c10,5.9,16.2,14.8,19.5,25.7
	c1.6,5.4,2.4,10.8,2.5,16.7c-0.2,2.8-0.5,5.5-0.7,8.3c0,0.4-0.1,0.7-0.7,0.8c-7.5,0.9-14.9,0.8-22.2-1.5
	c-12.3-3.9-21.7-11.4-27.2-23.2C64.3,95.6,64.9,84.6,69.6,73.7z M131,136.9c-1.5,10.4-4,20.6-7.8,30.4c-3.4,8.7-7.8,16.8-13.9,23.9
	c-7.6,8.9-17,14.8-28.6,16.9c-11.9,2.1-23.4,0.3-34.3-5c-14.8-7.2-24.8-19-31.2-33.9c-3.8-8.9-5.7-18.2-5.1-28
	c0.5-9.9,3-19.4,7.2-28.4c5.2-11.2,12.4-20.9,22.2-28.5c6.7-5.2,14.1-8.9,22.5-10.5c1-0.2,2-0.3,3.1-0.5c-0.4,1.2-0.8,2.2-1.1,3.2
	c-5.1,17.2-2,32.6,10.8,45.4c7.6,7.7,17,12,27.6,13.6c5.2,0.8,10.3,0.6,15.4,0c0.2,0,0.3,0,0.8,0c-0.7,2.3-1.2,4.4-1.9,6.5
	c-2.6,7.7-6.5,14.6-12.3,20.3c-6.5,6.5-14.4,10.4-23.6,11.3c-7,0.7-13.8,0-20.2-3.1c-8-3.8-13.3-10.2-16.2-18.5
	c-2.9-8-3.2-16.2-1.6-24.5c0.1-0.3,0.1-0.6,0.1-1c-0.7-0.1-1.4-0.2-2.3-0.4c-0.4,2.4-1,4.6-1.3,6.9c-0.9,7.1-0.5,14.2,1.9,21
	c4,11.5,11.5,19.7,23.3,23.3c9.5,2.9,18.9,2.1,28-1.5c11.8-4.7,20.3-13.2,26.2-24.3c2.7-5.1,4.6-10.6,5.6-16.3
	c0.1-0.3,0.4-0.8,0.6-0.9c2.1-0.6,4.2-1.1,6.5-1.6C131.3,134.2,131.2,135.6,131,136.9z M149.6,119.5c-1.2,1-2.6,1.9-4,2.9
	c0-3.9-0.1-7.5,0-11.2c0.4-10.4,2-20.7,5.7-30.5c1.7-4.5,4.1-8.4,8-11.3c1.6-1.2,3.3-2.1,5.3-2.3c2.5-0.2,4.6,0.6,6.1,2.7
	c1.4,2.1,1.9,4.4,2,6.8c0.3,5.1-1,10-2.9,14.7C165.3,102.4,158.8,112,149.6,119.5z"/>
<path d="M568.9,166.9c7-25,14.2-50,21.3-75c0.7-2.5,1.4-5.1,2.2-7.7c-4.4,0-8.7,0-13,0c-5.4,18.3-10.7,36.5-16.1,54.9
	c-0.2-0.2-0.3-0.2-0.3-0.3c-1.3-4.5-6.2-7.5-12.1-5.7c-3.6,1.1-6.5,3.4-9,6.1c-4.3,4.6-7.4,10-9.9,15.8c-3.5,8.2-5.6,16.6-5,25.6
	c0,0.4-0.2,0.8-0.4,1.1c-1.8,2.5-4,4.6-6.5,6.4c-1.3,0.8-2.6,1.6-4,2.1c-2.1,0.8-3.6-0.4-3.6-2.6c0-2.6,0.7-5,1.4-7.4
	c1.8-5.7,3.8-11.3,5.5-17c1.6-5.3,2.8-10.8,2.2-16.5c-0.6-5.5-3.3-9.6-8.4-11.9c-1.1-0.5-2.2-0.9-3.4-1.3c0.3-0.8,0.5-1.5,0.8-2.3
	c0.9-2.7,1.7-5.5,1.5-8.5c-0.2-2.6-2-4-4.5-3.4c-0.8,0.2-1.6,0.5-2.2,1c-2.5,1.8-4,4.4-4.6,7.4c-0.7,3.7,0.7,6,4.1,7.5
	c0.1,0,0.2,0.1,0.4,0.2c-0.1,0.3-0.1,0.6-0.2,0.9c-0.9,2.7-1.7,5.5-2.6,8.2c-4,11.3-8.4,22.5-14.2,33c-2,3.6-4.1,7.2-7.1,10
	c-1,0.9-2.2,1.6-3.4,2.2c-1.3,0.6-2.4-0.1-2.8-1.4c-0.3-0.9-0.4-1.9-0.3-2.8c0.2-1.7,0.6-3.5,1.1-5.2c3.7-13,7.5-26,11.2-39
	c0.5-1.9,1.1-3.7,1.6-5.7c-4.1,0-8.1,0-12.1,0c-0.6,0-0.6,0.4-0.7,0.8c-1,3.5-1.9,7.1-2.9,10.6c-1,3.8-2.2,7.5-4.5,10.7
	c-2,2.7-4.4,4.8-7.5,6.1c-0.6,0.2-1.3,0.3-2.1,0.5c0.6-1.9,1.2-3.5,1.6-5.2c1.5-5.3,2.7-10.6,2.6-16.2c0-1.8-0.3-3.6-1.1-5.3
	c-0.7-1.4-1.8-2.1-3.4-2.1c-1.9,0.1-3.1,1.3-4.3,2.5c-2.6,2.7-4,6-5,9.5c-1.2,4.1-2.2,8.3-1.6,12.7c0.5,3.3,2,5.8,5.4,6.9
	c0.1,0,0.2,0.1,0.3,0.2c-2.2,6.5-4.9,12.6-9.2,17.9c-1.4,1.7-3.1,3.2-4.8,4.7c-1.2,1.1-2.8,1.3-4.4,1.1c-1.5-0.2-2.6-0.9-3.2-2.4
	c-0.8-2.2-0.5-4.3,0-6.5c2.2-9.2,4.3-18.4,6.9-27.5c6-21.5,12.2-43,18.4-64.5c0.6-2,1.2-4.1,1.8-6.2c-3.8,0-7.5,0-11.2,0
	c-0.8,0-1,0.3-1.2,0.9c-6.4,23-12.8,46-19.3,69c-1.6,5.5-3,11.1-4.8,16.6c-1.7,5.1-3.8,10.2-6.9,14.6c-1,1.4-2.2,2.6-3.5,3.8
	c-0.8,0.7-2,1.2-3.1,0.6s-1.3-1.8-1.1-2.9c0.2-1.7,0.4-3.5,0.9-5.1c1.8-6.3,3.7-12.6,5.7-18.9c1.5-4.7,2.7-9.4,2.1-14.4
	c-0.5-4.4-2.1-8.3-5.5-11.3c-1.6-1.4-3.5-2.5-5.3-3.8c0.1-0.3,0.2-0.5,0.3-0.8c1.1-3.2,2-6.4,1.8-9.8c-0.3-3.9-3.2-5.6-6.8-3.9
	c-0.3,0.1-0.5,0.3-0.7,0.4c-2.9,1.9-4.3,4.8-4.7,8.1c-0.3,2.7,0.5,5.1,2.7,6.8c0.6,0.5,1.4,0.9,2.1,1.4c-0.9,2.8-1.7,5.5-2.7,8.3
	c-3.2,9.6-6.5,19.1-11.1,28.1c-2.6,4.9-5.4,9.7-9.5,13.5c-3.6,3.4-7.7,5.5-12.8,5.4c-3.5-0.1-5.4-2-5.8-5.4
	c-0.3-2.6,0.3-5.2,0.7-7.7c0.1-0.8,0.5-1,1.2-1.1c2.9-0.2,5.7-0.6,8.3-1.8c8.7-3.8,14-10.6,16.6-19.5c1.4-4.9,1.5-9.9-0.3-14.8
	c-2.1-5.5-6.5-7.9-12.2-6.7c-4.6,1-8.3,3.6-11.3,7.1c-9.3,10.7-14.1,23.1-13.1,37.4c0,0.4,0,0.9-0.2,1.3c-1.5,2.3-3,4.6-4.7,6.8
	c-1.2,1.5-2.7,2.7-4.6,3.3c-1.9,0.6-3-0.2-3.1-2.2c0-1.1,0-2.3,0.3-3.4c1-3.6,2.2-7.2,3.2-10.8c2.2-7.7,4.4-15.4,6.4-23.1
	c0.9-3.2,0.6-6.4-1-9.3c-1.8-3.2-4.4-5.2-8.1-5.4c-4.5-0.3-8.4,1.4-11.5,4.6c-1.5,1.6-2.8,3.3-4.2,5c0,0,0-0.1-0.1-0.1
	c-0.1-0.2-0.1-0.4-0.2-0.6c-0.5-2-1.3-3.8-2.6-5.4c-2.4-2.8-5.4-4-9-3.2c-4.6,1-8,3.8-10.5,7.7c-0.3,0.4-0.5,0.9-0.9,1.6
	c0.1-2.9,0.3-5.6,0.4-8.4c-2.6,0-5.1,0-7.5,0c-0.8,0-1.1,0.2-1.3,1c-2.4,7.9-4.7,15.9-7.3,23.8c-2.4,7.4-5.4,14.6-9.8,21
	c-1.4,2.1-3.2,3.9-4.9,5.8c-1,1-2.3,1.7-3.8,1.8c-1.5,0.1-2.4-0.5-2.4-2c-0.1-1.3,0-2.7,0.3-3.9c1.4-5.1,3.1-10,4.5-15.1
	c1.8-6.5,3.7-13.1,5.3-19.7c0.9-3.8,0-7.4-2.7-10.4c-3.2-3.6-7.2-4-11.6-2.7c-4.4,1.3-7.4,4.3-9.8,8.1c-0.2,0.3-0.4,0.5-0.5,0.8
	c-0.4-1.2-0.7-2.3-1.2-3.3c-1.9-4.4-6.2-6.8-10.6-6.2c-4,0.6-7.3,2.6-9.7,5.7c-0.9,1.1-1.6,2.3-2.4,3.6c0.2-2.8,0.4-5.5,0.6-8.2
	c-2.9,0-5.6,0-8.3,0c-0.1,0.3-0.2,0.6-0.3,0.8c-1.5,5.1-3.1,10.1-4.6,15.2c-2.4,8-4.9,15.9-8.8,23.3c-2.1,4-4.4,7.9-7.6,11.2
	c-1.1,1.1-2.3,2.1-3.9,2.6c-1.3,0.4-2.4,0.1-2.9-1.2c-0.4-1-0.7-2.1-0.6-3.2c0.2-4.1,1.3-8,2.4-11.9c3.4-11.2,6.9-22.4,10.4-33.5
	c0.3-1.1,0.7-2.2,1-3.4c-3.8,0-7.4,0-11,0c-0.7,0-0.9,0.2-1.1,0.8c-2.2,6.7-4.5,13.3-6.7,20c-2.3,6.9-4.7,13.9-8.2,20.3
	c-1.9,3.5-4.1,6.9-6.9,9.9c-0.9,1-2.1,1.8-3.3,2.5c-1.1,0.6-2,0-2.2-1.2c-0.1-0.8-0.2-1.7-0.1-2.5c0.8-4,1.5-8,2.7-11.8
	c3.4-10.7,7-21.3,10.6-31.9c0.7-2,1.3-3.9,2-6c-4,0-7.8,0-11.7,0c-0.2,0-0.6,0.3-0.7,0.6c-4.2,13.3-8.4,26.5-12.6,39.8
	c-1.2,3.8-2,7.7-1.5,11.7c0.4,3.7,2.4,6.4,5.6,7.1c3.1,0.7,6,0,8.8-1.5c4-2.2,7-5.5,9.6-9.2c0.2-0.3,0.4-0.6,0.8-1
	c0,0.5,0.1,0.8,0.1,1.1c0.2,2.8,0.8,5.4,2.8,7.5c2.9,3,6.5,3.5,10.3,2.7c4-0.8,7.1-3.3,9.8-6.2c1.3-1.4,2.4-2.9,3.8-4.6
	c-1,3.7-2,7.1-2.9,10.6c0.5,0,0.8,0,1.1,0c3.2,0,6.5,0,9.7,0c0.8,0,1.1-0.3,1.3-1c2.2-7.7,4.5-15.4,6.8-23.1
	c2.2-7.3,4.5-14.5,7.7-21.4c1.3-2.7,2.6-5.4,4.9-7.4c0.9-0.7,2.1-1.2,3.2-1.5c1-0.3,1.9,0.2,2.2,1.3c0.3,0.9,0.5,1.8,0.3,2.7
	c-0.4,2.6-0.7,5.2-1.4,7.7c-3.5,12.9-7,25.8-10.6,38.6c-0.4,1.3-0.7,2.7-1.1,4c0.2,0.1,0.3,0.1,0.4,0.1c3.7,0,7.4,0,11,0
	c0.2,0,0.6-0.4,0.7-0.6c1.7-5.9,3.4-11.8,5-17.7c2.2-8.1,4.5-16.2,7.8-23.9c1.4-3.3,3-6.6,5.3-9.4c1-1.3,2.2-2.3,3.9-2.7
	c1-0.3,1.8,0,2.3,0.8c0.3,0.5,0.6,1,0.7,1.5c0.5,1.9,0,3.7-0.5,5.4c-2.6,9.3-5.3,18.5-8,27.8c-1.1,3.7-1.8,7.5-1.3,11.4
	c0.6,4.1,3,6.7,7.1,7.5c2,0.4,4,0.3,6-0.4c4-1.3,7.2-3.7,9.9-6.8c1-1.1,1.9-2.4,2.9-3.7c-1,3.7-2,7.2-3,10.8c0.5,0,0.8,0,1.1,0
	c3.2,0,6.5,0,9.7,0c0.8,0,1.1-0.2,1.3-1c1.9-6.4,3.8-12.9,5.7-19.3c2.4-7.9,4.8-15.8,8-23.4c1.2-2.8,2.5-5.5,4.5-7.9
	c1.1-1.4,2.4-2.5,4.2-2.9c1.4-0.2,2.2,0.2,2.6,1.6c0.2,0.7,0.4,1.5,0.3,2.1c-0.4,2.7-0.7,5.5-1.4,8.1c-3.4,12.7-6.9,25.3-10.4,38
	c-0.4,1.5-0.8,3-1.3,4.5c0.2,0,0.3,0.1,0.4,0.1c3.6,0,7.3,0,10.9,0c0.6,0,0.7-0.3,0.8-0.8c0.9-3.4,1.8-6.8,2.8-10.2
	c2.5-8.3,4.9-16.6,7.5-24.9c1.5-4.8,3.5-9.5,6.3-13.8c1-1.6,2.2-3.1,3.8-4.1c2.4-1.4,4.1-0.7,4.7,2c0.1,0.3,0.1,0.6,0.1,0.8
	c-0.2,1.5-0.3,3-0.7,4.4c-2.6,9.1-5.2,18.1-7.8,27.2c-1.1,3.8-2,7.7-1.4,11.8c0.5,3.1,1.8,5.7,4.9,7c3.4,1.4,6.8,1.1,10.1-0.2
	c4-1.6,6.9-4.6,9.5-8c0.2-0.3,0.4-0.6,0.7-0.9c0.9,2.4,2.1,4.5,3.9,6.2c3.7,3.5,8.3,4,13,3.5c5.3-0.6,9.6-3.2,13.4-6.9
	c3.8-3.7,6.6-8.1,9.2-12.7c5.5-10,9.3-20.7,12.9-31.5c0.7-2.2,1.5-4.5,2.2-6.7c0.1-0.1,0.2-0.1,0.2-0.2c0.1,0.2,0.1,0.4,0.3,0.5
	c1.9,2.3,2.6,4.9,2.6,7.8c0,4.1-1,7.9-2.3,11.7c-1.8,5.2-3.7,10.4-5.5,15.7c-1.4,4.2-2.4,8.4-1.8,12.9c0.4,2.8,1.4,5.4,3.7,7.3
	c3.7,3.1,8.9,2.9,12.8-0.5c2.8-2.4,4.7-5.4,6.4-8.6c0.5-1,1-2,1.6-3.1c0.2,1.5,0.4,2.9,0.6,4.2c1.5,6.9,6.7,10.7,13.7,10
	c3.5-0.3,6.2-2.3,8.5-4.8c3-3.1,5.2-6.7,7-10.6c1.7-3.6,3.2-7.4,4.9-11c0.1-0.3,0.5-0.8,0.8-0.8c3.3-0.2,6.1-1.6,8.7-3.5
	c0.7-0.5,1.4-1.2,2.3-1.9c-0.1,0.5-0.1,0.8-0.2,1.1c-0.9,3.6-2,7.1-2.8,10.7c-0.9,3.7-1.7,7.3-2.3,11.1c-0.5,3.3,0.4,6.3,3.4,8.2
	c2.8,1.8,5.9,1.8,9,1.1c4.1-1,7.2-3.4,10-6.5c4.2-4.6,7.2-10,9.8-15.6c4.5-9.7,8.1-19.7,11.5-29.8c0.6-1.9,1.2-3.8,1.8-5.7
	c0.3,0.3,0.6,0.5,0.8,0.7c2.6,2.8,3.2,6.2,2.8,9.8c-0.4,3.9-1.6,7.7-2.9,11.4c-1.8,5.2-3.7,10.3-5.4,15.5c-1.2,3.6-1.9,7.3-1.3,11.1
	c0.4,2.5,1.3,4.7,3,6.6c2.8,3.1,6.7,3.8,10.9,2c3.4-1.4,6.3-3.7,8.9-6.2c0.7-0.7,1.4-1.4,2.2-2.2c0.5,1.3,0.9,2.4,1.4,3.6
	c3,6.4,9.2,7.1,13.9,4.7c2.8-1.4,5-3.6,6.9-6.1c1.1-1.5,2.1-3.1,3.2-4.8c0.1,1.1,0.2,2.2,0.4,3.2c0.9,5.4,4.7,8.6,10.2,8.6
	c3.9,0,7.1-1.8,10-4.3c3.9-3.3,6.8-7.5,9.5-11.8c2.4-3.9,4.4-8,6.1-12.3c-1.4-0.5-2.7-0.9-4-1.4c-0.2,0.3-0.3,0.6-0.4,0.8
	c-1.3,2.7-2.4,5.5-3.8,8.2c-2.3,4.4-4.9,8.6-8.5,12.1c-1.1,1-2.4,1.9-3.8,2.5c-1.7,0.7-3.2-0.2-3.4-2c-0.2-1.6-0.2-3.4,0.1-5
	C566.4,176.9,567.5,171.8,568.9,166.9z M364,159c1.7-5.5,3.6-10.9,6.3-15.9c0.8-1.5,1.8-3,3-4.3c1.9-2.1,4.2-1.7,5.3,0.9
	c0.6,1.5,1.1,3.2,1.1,4.8c0.5,9.9-2.9,18.4-10.2,25.1c-2.3,2.1-5.1,3.5-8.2,3.8c-0.4,0-0.8,0.1-1.5,0.1
	C361.2,168.5,362.6,163.7,364,159z M405.3,133.5L405.3,133.5L405.3,133.5z M560.5,147.1c-0.2,5.9-1.9,11.4-3.7,16.9
	c-2.3,6.9-5.1,13.6-9.2,19.7c-0.9,1.4-2.1,2.7-3.3,3.9c-2,2-4.8,0.8-5.5-1.3c-0.4-1.4-0.6-1.2-0.9-4.3c-0.3-3.1,1.5-9.9,3-14.7
	c2.4-7.7,5-15.2,8.9-22.2c1.1-1.9,2.4-3.7,3.9-5.3c2-2.1,4.3-1.6,5.6,1C560.5,142.8,560.6,144.9,560.5,147.1z"/>


<path class="summerbird dot" d="M484,122.8c4.6,1,10.5-2,10.5-8.5c0-3.4-2.2-5.9-5.3-6.3c-5.4-0.6-9.8,3.3-9.9,8.7C479.3,119.8,481.1,122.2,484,122.8z"/>
</clipPath>


<clipPath id="clip-organic">
<path class="organic o" d="M241.8,226.1c-0.3,0-0.6,0-0.9,0c-7,0.2-11.6,4.3-12.1,10.9c-0.3,4.6,1.4,8.3,5.6,10.5c4.4,2.4,9.1,2.4,13.7,0.5
	c8.4-3.6,8-13.8,3.7-18.2C249,227,245.6,226.1,241.8,226.1z M251.9,238.4c-0.4,4.5-3.3,7.6-7.8,8.3c-0.8,0.1-1.6,0.2-2.2,0.2
	c-3.4-0.1-6.3-0.8-8.4-3.4c-4.5-5.6-1.4-13.7,5.6-14.9c2.3-0.4,4.6-0.3,6.8,0.5C250.1,230.5,252.4,234.1,251.9,238.4z"/>
<path class="organic r" d="M280.4,237.4c3.6-2.3,3.3-7.9-0.6-9.8c-1.1-0.5-2.4-0.9-3.6-0.9c-4.8-0.1-9.6-0.1-14.4-0.1c-0.1,0-0.2,0.1-0.4,0.1
	c0,7.3,0,14.6,0,22c0.9,0,1.8,0,2.7,0c0-3.3,0-6.5,0-9.7c2.7,0,5.2,0,7.8,0c0.6,0,1,0.2,1.3,0.7c2,2.8,4.1,5.7,6.1,8.5
	c0.2,0.3,0.5,0.6,0.8,0.6c1,0.1,1.9,0,3.1,0c-2.5-3.3-4.8-6.5-7.1-9.6C277.7,238.6,279.2,238.2,280.4,237.4z M264.8,236.5
	c-0.2,0-0.4,0-0.6-0.1c0-2.5,0-5,0-7.5c0.4,0,0.7,0,1.1,0c3.6,0,7.2,0.1,10.7,0.2c0.6,0,1.3,0.2,1.9,0.4c1.7,0.5,2.5,1.6,2.5,3.3
	c0,1.6-0.8,2.8-2.5,3.3c-1.1,0.3-2.2,0.5-3.4,0.5C271.2,236.6,268,236.5,264.8,236.5z"/>
<path class="organic g" d="M301.9,240.4c3,0,5.9,0,8.9,0c-0.2,2.3-1.3,4-3.1,5c-3.4,2-7,1.9-10.5,0.5c-2.8-1.1-4.5-3.3-4.8-6.2
	c-0.2-1.6-0.1-3.2,0.2-4.8c0.6-3.1,2.6-5.2,5.7-6.1c2.4-0.7,4.9-0.7,7.3,0.1c2.4,0.7,4.1,2.2,5.2,4.5c0.8-0.4,1.5-0.8,2.2-1.2
	c-0.8-1.8-2.1-3.3-3.9-4.3c-2.6-1.6-5.5-1.9-8.5-1.7c-5.7,0.4-10.6,3.6-11.1,10.6c-0.4,5.2,2.2,9.8,6.8,11.6
	c2.9,1.1,5.8,1.2,8.8,0.7c2.2-0.4,4.1-1.4,5.8-3.2c0,1.2,0,2.1,0,3c0.9,0,1.6,0,2.3,0c0-3.6,0-7.2,0-10.8c-3.8,0-7.5,0-11.3,0
	C301.9,238.8,301.9,239.5,301.9,240.4z"/>
<path class="organic a" d="M333.7,228.7c-0.8-1.6-1.6-2.4-3.5-2.1c-0.7,0.1-1.1,0.2-1.4,0.9c-3.2,6.4-6.5,12.7-9.8,19.1c-0.4,0.7-0.7,1.4-1.1,2.3
	c0.9,0,1.6,0,2.2,0c0.6,0,0.8-0.2,1.1-0.7c0.7-1.5,1.5-2.9,2.2-4.4c0.2-0.5,0.5-0.7,1.1-0.7c4.2,0,8.5,0,12.7,0
	c0.5,0,0.9,0.2,1.1,0.7c0.7,1.5,1.5,3,2.2,4.5c0.1,0.2,0.4,0.5,0.6,0.5c0.8,0.1,1.7,0,2.6,0c-0.1-0.3-0.2-0.5-0.3-0.7
	C340.3,241.6,336.9,235.2,333.7,228.7z M325.1,240.5c1.9-3.9,3.8-7.7,5.8-11.7l5.9,11.7C332.8,240.5,329,240.5,325.1,240.5z"/>
<path class="organic n" d="M369.9,244.5c-0.3-0.1-0.4-0.2-0.5-0.4c-5.1-5.6-10.2-11.2-15.2-16.8c-0.2-0.3-0.6-0.6-0.9-0.6c-1.1-0.1-2.3,0-3.4,0
	c0,7.4,0,14.8,0,22.1c0.8,0,1.6,0,2.5,0c0-6.5,0-12.9,0-19.6c0.4,0.4,0.7,0.7,0.9,0.9c5.2,5.8,10.5,11.6,15.6,17.5
	c1.1,1.3,2.3,1.3,3.7,1.1c0-7.4,0-14.7,0-22c-0.9,0-1.7,0-2.6,0C369.9,232.6,369.9,238.5,369.9,244.5z"/>
<path class="organic i" d="M380.9,248.7c0.9,0,1.7,0,2.6,0c0-7.4,0-14.7,0-22c-0.9,0-1.7,0-2.6,0C380.9,234,380.9,241.3,380.9,248.7z"/>
<path class="organic c" d="M410.8,243.8c-2.5,2.7-5.7,3.3-9.1,3c-2.7-0.2-5.2-1.1-6.9-3.3c-4.3-5.4-1.1-13.9,5.7-15c5.1-0.8,9.6,0.6,11.5,4.8
	c0,0,0.1,0.1,0.2,0.1c0.7-0.3,1.4-0.6,2.2-1c-1-2.2-2.5-3.7-4.4-4.7c-3.1-1.6-6.3-1.9-9.7-1.4c-2.2,0.3-4.3,1-6.1,2.4
	c-3,2.4-4,5.8-3.9,9.5c0.1,5,2.7,8.8,7.3,10.3c3.7,1.2,7.4,1.2,11-0.1c2.8-0.9,4.8-2.8,6.2-5.5c-0.8-0.4-1.6-0.8-2.3-1.1
	C411.8,242.4,411.3,243.1,410.8,243.8z"/>
</clipPath>
</defs>

<g id="stroke" clip-path="url(#clip)" stroke-width="30">
	<path class="s" fill="none" stroke="#000" stroke-miterlimit="10" d="M142.5,67.1c0,0-13.8-18.9-36-18.9s-42.8,17-42.8,43.3
		s25.8,42,45.3,42s36.9-6.4,47.5-17c10.6-10.6,14.3-19,17.8-26.8c3.5-7.8,2.5-24.3-8.8-24.3c-11.3,0-24.3,12.2-27.3,66.2
		c-3,54-31,78.8-61.3,79.5C46.6,211.8,7,188.1,7,141s41.3-69.8,63.7-69.8s51.8,13.2,51.8,51.1S95,177,76.8,177s-36.5-14.9-36.5-36.8
		s8.5-29.9,8.5-29.9"/>
	<path class="ummerbird" fill="none" stroke="#000" stroke-miterlimit="10" d="M169.5,136.7c0,0-15.8,44.1-16,49.3c-0.2,5.2,1.1,6.6,5.6,7.5
		s15.9-10,21.1-25.3c5.2-15.3,6.3-30.9,12.8-30.9c6.5,0-12.6,34.2-13.8,43.7c-1.2,9.5,0.8,11.5,5,11.5c4.2,0,15,0,24.3-25.3
		c9.3-25.3,10.3-30.9,10.3-30.9L203,196.6c0,0,14.5-55.6,31.8-59.2c17.3-3.6-6.9,59.2-6.9,59.2s13.4-57.8,31.2-57.8
		s-16.3,54.1,0,54.8c16.3,0.7,32.3-46.3,32.3-46.3l1.8-10.8l-15.8,60.1c0,0,17.8-58.5,30.5-58.1c12.8,0.5,5.4,26.6,5.4,26.6
		s-3.9,28.8-9.9,28.4c-6-0.4,18.2-55.2,28.8-55.1c10.6,0.2,6.5,12,6.5,12l-8.8,31c0,0-3.4,12.4,4.3,12.1
		c7.7-0.3,14.1-13.3,21.3-15.8c5.1-1.8,14.8-2.8,23.3-14.2c8.5-11.3,1.3-26.9,1.3-26.9s-8.5-6.7-18.6,11.1s-9.4,33.3-6.4,39.3
		c3,6,3.7,6,10,6.6s17-5,26.5-29.1c9.5-24.1,18.1-40.9,11.2-42.2c-6.9-1.3-7.9,7.9-1.9,11.2c6,3.2,14,8.2,10.8,23.4
		c-3.3,15.1-14.1,25.1-8.8,31.8c5.3,6.7,9.3,6.3,20.1-10.7s29-93.8,29-93.8s-28.8,97.3-26.3,101.8c2.5,4.5,6.5,7.2,10.8,7.6
		c4.3,0.4,14-8.9,19.3-27.9s5.5-26.7,3.5-27.2s-12.4,14.9-9,22c3.4,7.1,12.8,9.8,25.8-7.5c13-17.3,6.8-17.3,6.8-17.3
		s-21.3,56.3-9.8,56.8c11.5,0.5,17-13.8,22-23.8c5-10,13.3-32.5,14.5-39.3c1.2-6.8-0.8-8.8-2.3-6.3c-1.5,2.5-6.5,8-1.5,10.2
		c5,2.2,16,7.3,11.3,19c-4.7,11.7-14.9,35.6-7.5,38.8c7.4,3.2,11.3-1,14.5-3.8c3.2-2.8,15.9-26.2,15.9-26.2s5.5-25,16.5-24.2
		c11,0.8,6.5,14.8,6.5,14.8s1.2-15.8-6.6-16.5c-11.8-1.1-22.3,18.8-23.3,33c-0.6,8.5-3.4,22.6,6.1,23.9c8.3,1.1,12.2-6.3,24.5-37
		c12.3-30.7,22.2-71.9,22.2-71.9s-32.7,106.2-24,108c8.7,1.8,13.5,0,25.8-25.8"/>
	<line class="dot" fill="none" stroke="#000" stroke-miterlimit="10" x1="478.9" y1="112.5" x2="494.5" y2="98"/>
</g>
<g id="stroke-organic" clip-path="url(#clip-organic)" stroke-width="30">
	<line class="organic" fill="none" stroke="#000" stroke-miterlimit="10" x1="224" y1="237.7" x2="419" y2="237.7"/>
</g>

<g id="Layer_3">
	<path display="inline" fill="#fed" d="M149.6,119.5c-1.2,1-2.6,1.9-4,2.9c0-3.9-0.1-7.5,0-11.2c0.4-10.4,2-20.7,5.7-30.5
		c1.7-4.5,4.1-8.4,8-11.3c1.6-1.2,3.3-2.1,5.3-2.3c2.5-0.2,4.6,0.6,6.1,2.7c1.4,2.1,1.9,4.4,2,6.8c0.3,5.1-1,10-2.9,14.7
		C165.3,102.4,158.8,112,149.6,119.5z"/>
	<path display="inline" fill="#fed" d="M69.6,73.7c0.1-0.3,0.6-0.7,0.9-0.7c9.7,0.2,19.1,1.6,27.6,6.7
		c10,5.9,16.2,14.8,19.5,25.7c1.6,5.4,2.4,10.8,2.5,16.7c-0.2,2.8-0.5,5.5-0.7,8.3c0,0.4-0.1,0.7-0.7,0.8
		c-7.5,0.9-14.9,0.8-22.2-1.5c-12.3-3.9-21.7-11.4-27.2-23.2C64.3,95.6,64.9,84.6,69.6,73.7z"/>
	<path display="inline" fill="#fed" d="M131,136.6c-1.5,10.4-4,20.6-7.8,30.4c-3.4,8.7-7.8,16.8-13.9,23.9
		c-7.6,8.9-17,14.8-28.6,16.9c-11.9,2.1-23.4,0.3-34.3-5c-14.8-7.2-24.8-19-31.2-33.9c-3.8-8.9-5.7-18.2-5.1-28
		c0.5-9.9,3-19.4,7.2-28.4c5.2-11.2,12.4-20.9,22.2-28.5c6.7-5.2,14.1-8.9,22.5-10.5c1-0.2,2-0.3,3.1-0.5c-0.4,1.2-0.8,2.2-1.1,3.2
		c-5.1,17.2-2,32.6,10.8,45.4c7.6,7.7,17,12,27.6,13.6c5.2,0.8,10.3,0.6,15.4,0c0.2,0,0.3,0,0.8,0c-0.7,2.3-1.2,4.4-1.9,6.5
		c-2.6,7.7-6.5,14.6-12.3,20.3c-6.5,6.5-14.4,10.4-23.6,11.3c-7,0.7-13.8,0-20.2-3.1c-8-3.8-13.3-10.2-16.2-18.5
		c-2.9-8-3.2-16.2-1.6-24.5c0.1-0.3,0.1-0.6,0.1-1c-0.7-0.1-1.4-0.2-2.3-0.4c-0.4,2.4-1,4.6-1.3,6.9c-0.9,7.1-0.5,14.2,1.9,21
		c4,11.5,11.5,19.7,23.3,23.3c9.5,2.9,18.9,2.1,28-1.5c11.8-4.7,20.3-13.2,26.2-24.3c2.7-5.1,4.6-10.6,5.6-16.3
		c0.1-0.3,0.4-0.8,0.6-0.9c2.1-0.6,4.2-1.1,6.5-1.6C131.3,134,131.2,135.3,131,136.6z"/>
	<path display="inline" fill="#fed" d="M364,159c1.7-5.5,3.6-10.9,6.3-15.9c0.8-1.5,1.8-3,3-4.3c1.9-2.1,4.2-1.7,5.3,0.9
		c0.6,1.5,1.1,3.2,1.1,4.8c0.5,9.9-2.9,18.4-10.2,25.1c-2.3,2.1-5.1,3.5-8.2,3.8c-0.4,0-0.8,0.1-1.5,0.1
		C361.2,168.5,362.6,163.7,364,159z"/>
	<path display="inline" fill="#fed" d="M560.5,147.1c-0.2,5.9-1.9,11.4-3.7,16.9c-2.3,6.9-5.1,13.6-9.2,19.7
		c-0.9,1.4-2.1,2.7-3.3,3.9c-2,2-4.8,0.8-5.5-1.3c-0.4-1.4-0.6-2.9-0.9-4.3c0.4-5.1,1.5-9.9,3-14.7c2.4-7.7,5-15.2,8.9-22.2
		c1.1-1.9,2.4-3.7,3.9-5.3c2-2.1,4.3-1.6,5.6,1C560.5,142.8,560.6,144.9,560.5,147.1z"/>
	<path display="inline" fill="#fed" d="M246,229c-2.2-0.8-4.5-0.9-6.8-0.5c-7,1.3-10.1,9.4-5.6,14.9c2.1,2.6,5,3.3,8.4,3.4
		c0.6-0.1,1.4-0.1,2.2-0.2c4.4-0.7,7.3-3.8,7.8-8.3C252.4,234.1,250.1,230.5,246,229z"/>
	<path display="inline" fill="#fed" d="M264.8,236.5c-0.2,0-0.4,0-0.6-0.1c0-2.5,0-5,0-7.5c0.4,0,0.7,0,1.1,0
		c3.6,0,7.2,0.1,10.7,0.2c0.6,0,1.3,0.2,1.9,0.4c1.7,0.5,2.5,1.6,2.5,3.3c0,1.6-0.8,2.8-2.5,3.3c-1.1,0.3-2.2,0.5-3.4,0.5
		C271.2,236.6,268,236.5,264.8,236.5z"/>
	<path display="inline" fill="#fed" d="M325.1,240.5c4,0,7.8,0,11.7,0l-5.9-11.7C328.9,232.8,327,236.6,325.1,240.5z"/>
</g>
</svg>
</div>

<br><br><br><br><br>

Click logo to see animation again

CSS

              
                body {
	margin:0;
	background:#fed;
	text-align:center;
	font-family:Arial, sans-serif;
	font-size:11px;
	color:#aa7d4f;
}

#svgWrapper {
  display:inline-block;
  width:200px;
  height:100px;
  cursor:pointer;
  
  svg {
    stroke-width:17;
    width:200px;
    height:100px;
    transition:transform .5s ease-out;
    
    #stroke {
      .s {
        stroke-dasharray: 1200;
        stroke-dashoffset: 1200;
        stroke-width:5;
        animation:summerbird-s .75s linear forwards .5s;
      }
      
      .ummerbird {
        stroke-dasharray: 2400;
        stroke-dashoffset: 2400;
        stroke-width:5;
        animation: summerbird-ummerbird 1.5s linear forwards 1.1s;
      }
      
      .dot {
        opacity:0;
        stroke-width:30;
        stroke-linecap:round;
        animation: summerbird-dot .175s linear forwards 2.75s;
      }
    }
    
    #stroke-organic {
      .organic {
        stroke-dasharray: 200;
        stroke-dashoffset: 200;
        stroke-width:30;
        animation: summerbird-organic .15s linear forwards 3s;
      }
    }
  }
  
  &:not(.clicked):hover {
    svg {
      transform:scale(.9);
      transition:transform .3s cubic-bezier(.3,.86,.61,1.63);
    }
  }
}


@keyframes summerbird-s {
	0% {
		stroke-dashoffset: 1200
	}
	33% {
		stroke-width:5;
	}
	90% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: 0;
		stroke-width:17;
	}
}
@keyframes summerbird-ummerbird {
	0% {
		stroke-dashoffset: 2400;
	}
	100% {
		stroke-dashoffset: 0;
		stroke-width:15;
	}
}
@keyframes summerbird-dot {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
@keyframes summerbird-organic {
	0% {
		opacity:0;
		stroke-dashoffset: 200;
	}
	100% {
		opacity:1;
		stroke-dashoffset: 0;
	}
}

JS

              
                /*

This animation won't work in any version of IE.

*/

$(document).ready(function(){
  $('#svgWrapper').mouseleave(function(){
    $(this).removeClass('clicked');
  }).click(function(){
    $(this).addClass('clicked').html($(this).html());
  });
});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

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

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions