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 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Nik Ches</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 85.5 19.5" style="enable-background:new 0 0 85.5 19.5;" xml:space="preserve">
	<style> 
		svg {
			transform: scale(0.8);
			padding-top: 250px;
			padding-left: 50px;
			padding-right: 50px;
		}
		.letters {
			opacity: 0;
		}
		
		#greater {
			
		}

		#line {
			animation: blink .6s linear both 5;
			
			}

		#d {
			animation: showLetter .1s 1.6s linear forwards;
		}

		 #i {
			animation: showLetter .1s 1.7s linear forwards;
		}

		#r {
			animation: showLetter .1s 1.8s linear forwards;
		}

		#a {
			animation: showLetter .1s 1.87s linear forwards;
		}

		#n {
			animation: showLetter .1s 1.95s linear forwards;
		}

		#g {
			animation: showLetter .1s 2.05s linear forwards;
		}

		#o {
			animation: showLetter .1s 2.14s linear forwards;
		}  


		@keyframes showLetter{
			0% {
				opacity:0;
			}
			.5% {
				opacity: 1;
			}
			100% {
				opacity: 1;
			}
		}

@keyframes leftToRight {
	0% {
		transform: translateX(-70px);
	}
	13% {	
		transform: translateX(-70px);
	}
	14% {
		transform: translateX(-63px);
	}
 	27% {
		transform: translateX(-63px);
	}
	28% {
		transform: translateX(-58px);
	}
	31% {
		transform: translateX(-58px);
	}
	32% {
		transform: translateX(-50px);
	}
	45% {
		transform: translateX(-50px);
	}
	46% {
		transform: translateX(-39px);
	}
	59% {
		transform: translateX(-39px);
	}
	60% {
		transform: translateX(-27px);
	}
	73% {
		transform: translateX(-27px);
	}
	74% {
		transform: translateX(-13px);
	}
	87% {
		transform: translateX(-13px);
	}
	88% {
		transform: translateX(2px);
	} 
	100% {
		transform: translateX(2px);
	}
}

@keyframes rightToLeft {
	0% {
		transform: translateX(2px);
	}
	100% {	
		transform: translateX(0px);
	}	
}
		
@keyframes leftToRight2 {
	0% {
		transform: translateX(-70px);
	}
	13% {	
		transform: translateX(-70px);
	}
	14% {
		transform: translateX(-63px);
	}
 	27% {
		transform: translateX(-63px);
	}
	28% {
		transform: translateX(-58px);
	}
	31% {
		transform: translateX(-58px);
	}
	32% {
		transform: translateX(-50px);
	}
	45% {
		transform: translateX(-50px);
	}
	46% {
		transform: translateX(-39px);
	}
	59% {
		transform: translateX(-39px);
	}
	60% {
		transform: translateX(-27px);
	}
	73% {
		transform: translateX(-27px);
	}
	74% {
		transform: translateX(-13px);
	}
	87% {
		transform: translateX(-13px);
	}
	88% {
		transform: translateX(1px);
	} 
	100% {
		transform: translateX(1px);
	}
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
	</style>
<g id="Layer_2">
</g>
<g id="Layer_3">
	<g>
		<path class="letters" id="d" d="M4.9,15.4c-1.3,0-2.4-0.5-3.4-1.6c-1-1.1-1.5-2.4-1.5-4s0.5-2.9,1.5-3.9c1-1,2.1-1.5,3.4-1.5s2.4,0.5,3.2,1.4V0.3h3v14.9
			h-3v-1.4C7.3,14.8,6.2,15.4,4.9,15.4z M3,9.8c0,0.9,0.3,1.6,0.8,2.1c0.5,0.6,1.1,0.8,1.8,0.8c0.7,0,1.3-0.3,1.8-0.8
			c0.5-0.6,0.7-1.3,0.7-2.1c0-0.9-0.2-1.6-0.7-2.2C6.9,7,6.3,6.8,5.6,6.8C4.9,6.8,4.3,7,3.8,7.6C3.3,8.2,3,9,3,9.8z"/>
		<path class="letters" id="i" d="M13.7,3c-0.3-0.3-0.5-0.8-0.5-1.3c0-0.5,0.2-0.9,0.5-1.3S14.5,0,15,0c0.5,0,0.9,0.2,1.3,0.5c0.3,0.3,0.5,0.8,0.5,1.3
			c0,0.5-0.2,0.9-0.5,1.3c-0.3,0.3-0.8,0.5-1.3,0.5C14.5,3.5,14.1,3.4,13.7,3z M16.5,15.2h-3V4.4h3V15.2z"/>
		<path class="letters" id="r" d="M24.5,7.1c-0.9,0-1.6,0.3-2,1c-0.4,0.6-0.7,1.5-0.7,2.5v4.7h-3V4.4h3v1.4c0.4-0.4,0.9-0.8,1.5-1.1
			c0.6-0.3,1.2-0.5,1.8-0.5l0,2.8H24.5z"/>
		<path class="letters" id="a" d="M35.7,15.2h-2.8v-1.3c-0.8,1-1.7,1.5-2.9,1.5c-1.1,0-2.1-0.3-2.9-1c-0.8-0.7-1.2-1.5-1.2-2.7s0.4-1.9,1.2-2.5
			s1.9-0.8,3.3-0.8h2.2V8.4c0-1.2-0.6-1.7-1.8-1.7c-0.5,0-1.1,0.1-1.7,0.3c-0.6,0.2-1.1,0.5-1.5,0.8l-1.3-1.9c1.4-1,3-1.5,4.9-1.5
			c1.3,0,2.4,0.3,3.2,1c0.8,0.7,1.2,1.7,1.2,3.1V15.2z M32.6,11.1v-0.5h-1.9c-1.2,0-1.8,0.4-1.8,1.1c0,0.4,0.1,0.7,0.4,0.9
			c0.3,0.2,0.7,0.3,1.2,0.3c0.5,0,1-0.2,1.4-0.5C32.4,12.1,32.6,11.6,32.6,11.1z"/>
		<path class="letters" id="n" d="M40.9,9.2v6h-3V4.4h3v1.2c0.9-0.9,1.9-1.4,3.1-1.4c1.1,0,2.1,0.4,2.9,1.2C47.6,6.2,48,7.3,48,8.6v6.6h-3V9.1
			c0-1.7-0.6-2.5-1.8-2.5c-0.6,0-1.1,0.2-1.6,0.7C41.2,7.7,40.9,8.3,40.9,9.2z"/>
		<path class="letters" id="g" d="M58.3,13.4c-1,1.1-2.1,1.6-3.5,1.6c-1.4,0-2.6-0.5-3.6-1.4c-1-1-1.5-2.2-1.5-3.8c0-1.6,0.5-2.9,1.5-3.9
			c1-1,2.1-1.5,3.4-1.5c1.3,0,2.4,0.5,3.2,1.6V4.4h3v9.4c0,1-0.2,1.8-0.5,2.6c-0.3,0.8-0.8,1.3-1.3,1.8c-1.1,0.9-2.4,1.3-3.9,1.3
			c-0.8,0-1.6-0.1-2.5-0.4c-0.8-0.3-1.6-0.6-2.2-1.1l1.2-2.3c1,0.8,2,1.1,3.1,1.1c1.1,0,2-0.3,2.6-0.8
			C57.9,15.4,58.3,14.6,58.3,13.4z M57.8,9.6c0-0.9-0.2-1.5-0.7-2C56.6,7,56,6.8,55.3,6.8c-0.7,0-1.3,0.2-1.8,0.7
			c-0.5,0.5-0.8,1.2-0.8,2s0.3,1.6,0.8,2.1c0.5,0.5,1.1,0.8,1.8,0.8s1.3-0.3,1.8-0.8C57.6,11.1,57.8,10.4,57.8,9.6z"/>
		<path class="letters" id="o" d="M74,9.8c0,1.6-0.5,2.9-1.6,4c-1.1,1.1-2.4,1.6-4.1,1.6c-1.6,0-3-0.5-4.1-1.6c-1.1-1.1-1.6-2.4-1.6-4c0-1.6,0.5-2.9,1.6-4
			s2.4-1.6,4.1-1.6c1.6,0,3,0.5,4.1,1.6S74,8.2,74,9.8z M65.6,9.8c0,0.9,0.3,1.6,0.8,2.2c0.5,0.6,1.1,0.8,1.9,0.8
			c0.8,0,1.4-0.3,1.9-0.8c0.5-0.6,0.8-1.3,0.8-2.2c0-0.9-0.3-1.6-0.8-2.2c-0.5-0.6-1.1-0.8-1.9-0.8c-0.8,0-1.4,0.3-1.9,0.8
			C65.8,8.2,65.6,8.9,65.6,9.8z"/>
		
		<path id="greater" d="M85.5,8.2v2.8l-9.8,4.6v-3l6.4-3.1l-6.4-3v-3L85.5,8.2z" transform="translate(-71)"/>	
	</g>	
	<line id="line" x1="75" y1="2" x2="75" y2="17"  style="stroke:#000;" transform="translate(-71)"/>
</g>
</svg>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/nikches/a-pen-by-nik-ches-mOZZoN */
/* #greater {
	transform: translateX(-70px);
	animation: leftToRight .7s 1.5s forwards, rightToLeft .5s 2.9s linear forwards;
}
		
line {
	transform: translateX(-71px);
	animation: blink .6s linear both 5, leftToRight2 .7s 1.5s forwards;
	}
 */



/* .letters {
	opacity: 0;
}

#greater {
	transform: translateX(-70px);
	animation: blink .8s linear both infinite, leftToRight .7s 1.5s forwards;
}

#d {
	animation: showLetter .1s 1.6s linear forwards;
}

 #i {
	animation: showLetter .1s 1.7s linear forwards;
}

#r {
	animation: showLetter .1s 1.8s linear forwards;
}

#a {
	animation: showLetter .1s 1.87s linear forwards;
}

#n {
	animation: showLetter .1s 1.95s linear forwards;
}

#g {
	animation: showLetter .1s 2.05s linear forwards;
}

#o {
	animation: showLetter .1s 2.14s linear forwards;
} 


@keyframes showLetter{
	0% {
		opacity:0;
	}
	.5% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@keyframes leftToRight {
	0% {
		transform: translateX(-70px);
	}
	13% {	
		transform: translateX(-70px);
	}
	14% {
		transform: translateX(-63px);
	}
 	27% {
		transform: translateX(-63px);
	}
	28% {
		transform: translateX(-58px);
	}
	31% {
		transform: translateX(-58px);
	}
	32% {
		transform: translateX(-50px);
	}
	45% {
		transform: translateX(-50px);
	}
	46% {
		transform: translateX(-39px);
	}
	59% {
		transform: translateX(-39px);
	}
	60% {
		transform: translateX(-27px);
	}
	73% {
		transform: translateX(-27px);
	}
	74% {
		transform: translateX(-13px);
	}
	87% {
		transform: translateX(-13px);
	}
	88% {
		transform: translateX(0px);
	} 
	100% {
		transform: translateX(0px);
	}
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}  */

/*Downloaded from https://www.codeseek.co/nikches/a-pen-by-nik-ches-mOZZoN */
var tl1 = new TimelineMax();
var tl2 = new TimelineMax();
var line = '#line';
var greater = '#greater';

tl1.to(line, .1, {x: -63, delay: 1.47})
  .to(line, .1, {x: -57})
  .to(line, .1, {x: -49})
  .to(line, .1, {x: -37})
  .to(line, .1, {x: -25})
  .to(line, .1, {x: -12})
  .to(line, .1, {x: 0});

tl2.to(greater, .1, {x: -63, delay: 1.47})
  .to(greater, .1, {x: -57})
  .to(greater, .1, {x: -49})
  .to(greater, .1, {x: -37})
  .to(greater, .1, {x: -25})
  .to(greater, .1, {x: -12})
  .to(greater, .1, {x: 0});

Comments