A Pen by Nik Ches

Thumbnail
This awesome code was written by nikches, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright nikches ©
  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Nik Ches</title>
  
  
  
  
  
</head>

<body>

  <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<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 127.9 87.2" enable-background="new 0 0 127.9 87.2" xml:space="preserve">
<g id="M">
	<style>
		#m2{
			transform-origin: 1px 45px;
			transform: rotateY(90deg) perspective(250px);
			animation: rotateIn 1s 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
		}
		#m1{
			transform-origin: 38px 35px;
			transform: rotateY(90deg) perspective(250px);
			animation: rotateIn 1s 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
		}
		#u1{
			transform-origin: 100px 33px;
			transform: rotateY(90deg) perspective(250px);
			animation: rotateIn 1s 2.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
		}
		#u2{
			transform-origin: 127px 45px;
			transform: rotateY(90deg) perspective(250px);
			animation: rotateIn 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
		}

		@keyframes rotateIn {
			to {
				transform: rotateY(0deg)
			}
		}
	</style>
	<path id="m1" d="M44.4,41.8l2.2,1.1c0.2,0.1,0.4,0,0.5-0.1l2-15l0,11.3c0.8,0.6,2.4,1.7,2.8,3.3c0.6,2.3,0,2.9,1.9,6.9
		c1.8,3.8,7.7,8.3,11.2,8.8c0.2,0,0.3,0,0.5,0.1c0.2,0,0.4,0.1,0.7,0.2c0.7,0.1,1.5,0.1,2.4-0.1V0H39.6l-3.7,28.7l8.2,13
		C44.2,41.7,44.3,41.7,44.4,41.8z"/>
	<path id="m2" d="M42.3,67l-0.8-1.2c-0.2-0.3-0.5-0.3-0.7-0.1l-2.3,2.3c0,0-0.1,0.1-0.1,0.1l-1.9,0.9c-0.1,0-0.1,0-0.2,0h-1.4
		c-0.1,0-0.2,0-0.2,0.1l-1.2,0.7c-0.1,0-0.2,0.1-0.3,0.1c-0.7-0.1-3.5-0.5-3.4-2.2l0.1-1.7c0-0.1,0-0.2-0.1-0.3l-1.3-2.3
		c-0.1-0.1-0.1-0.2-0.1-0.3V61c0-0.2,0.1-0.3,0.2-0.4l4.3-4.2c0,0,0,0,0,0l4.1-4.7c0.1-0.1,0.1-0.2,0.1-0.4l0.1-3.5
		c0-0.2-0.1-0.4-0.2-0.5c0,0-1-0.3,0.7-1.4l1.5-1.1c0.1,0,0.1-0.1,0.2-0.1c0.3-0.1,0.9-0.3,0.9-1.9c0-0.7-2.2-5.2-4.9-10.7l-1,7.7
		l-2-13.5c-4.4-8.5-8.9-17.1-8.9-17.1L32,22.4l-0.6-4.3c-0.9-7-1.8-13-2.6-18.2H0v85.4h19.4l0-56.3l8.1,56.3h13.8l2.3-17.2
		C43.1,67.7,42.6,67.2,42.3,67C42.4,67,42.3,67,42.3,67z"/>
</g>
<g id="U">
	<path id="u2" d="M105.7,0v62.9c0,4.3-0.2,7-0.6,8.1c-0.4,1.1-1.3,1.7-2.7,1.7c-1.2,0-2-0.5-2.5-1.6c-0.4-1-0.6-3.4-0.6-7.1V32.2
		c-4,6.2-9.4,14.9-9.5,16c-0.1,1.4,0.4,1.7,0.6,1.8c0.1,0,0.1,0,0.2,0.1l1.2,1.1c1.3,1.2,0.4,1.4,0.4,1.4c-0.1,0.1-0.2,0.2-0.2,0.4
		l-0.2,3.2c0,0.1,0,0.2,0.1,0.3l3.2,4.6c0,0,0,0,0,0l3.5,4.2c0.1,0.1,0.1,0.2,0.1,0.4l-0.2,1.6c0,0.1,0,0.2-0.1,0.3l-1.4,1.9
		c-0.1,0.1-0.1,0.2-0.1,0.3l0,1.6c0,1.5-2.6,1.6-3.2,1.6c-0.1,0-0.2,0-0.2-0.1l-1-0.7c-0.1,0-0.1-0.1-0.2-0.1l-1.2-0.2
		c-0.1,0-0.1,0-0.2-0.1l-1.6-1c0,0-0.1-0.1-0.1-0.1l-1.8-2.3c-0.2-0.2-0.5-0.2-0.7,0l-0.8,1c0,0-0.1,0.1-0.1,0.1
		c-0.3,0.2-2.2,1.5-2.8,2.1c-1.6,1.7-2.3,3.7-2.6,5.7c0.2,0.3,0.3,0.5,0.5,0.8c1.9,2.7,4.9,4.9,8.8,6.6c3.9,1.7,8.4,2.5,13.5,2.5
		c4.6,0,8.6-0.7,12-2.1s6.1-3.5,8.2-6.3s3.3-5.4,3.7-8.1c0.4-2.6,0.6-7.2,0.6-13.6V0H105.7z"/>
	<path id="u1" d="M79.7,46.4c0.6-1.5,2.3-2.4,3-2.8c0.2-0.1,0.5,0,0.6,0.2c0.5,0.9,0.5,2.3,0.5,3.1c0,0.3,0.3,0.6,0.6,0.5l2-0.7
		c0.1,0,0.1-0.1,0.2-0.1l12.7-15.7V0H77.1v50.5c0,0.8,0,1.5,0,2.2c0.1-0.1,0.2-0.3,0.3-0.4C79.4,49,79,48.3,79.7,46.4z"/>
</g>
</svg>
  
  

</body>

</html>

Comments