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
  • CSS
<!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 18.1.1, 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 127.8 64.8" enable-background="new 0 0 127.8 64.8" xml:space="preserve">
<style>
	svg {
		background: black;	
	}
	#d {
    opacity: 0;
	animation: show 1.5s .2s ease forwards;
}

#e {
    opacity: 0;
	animation: show 1.5s 1s ease forwards;
}

#s {
    opacity: 0;
	animation: show 1.5s .7s ease forwards;
}

#i {
    opacity: 0;
	animation: show 1.5s .3s ease forwards;
}

#g {
    opacity: 0;
	animation: show 1.5s .6s ease-in-out forwards;
}

#n {
    opacity: 0;
	animation: show 1.5s .5s ease-in-out forwards;
}

#b-branding {
    opacity: 0;
	animation: show 1.5s 2.5s ease forwards;
}

#r-branding {
    opacity: 0;
	animation: show 1.5s 3s ease forwards;
}

#n-branding {
    opacity: 0;
	animation: show 1.5s 3.1s ease forwards;
}

#d-branding {
    opacity: 0;
	animation: show 1.5s 2.6s ease forwards;
}

#i-branding {
    opacity: 0;
	animation: show 1.5s 2.9s ease-in-out forwards;
}

#n2-branding {
    opacity: 0;
	animation: show 1.5s 2.8s ease-in-out forwards;
}

#g-branding {
    opacity: 0;
	animation: show 1.5s 2.7s ease-in-out forwards;
}

#a-branding {
    opacity: 0;
	animation: show 1.5s 3.2s ease-in-out forwards;
}
	
#d-digital {
    opacity: 0;
	animation: show 1.5s 4.9s ease forwards;
}

#i-digital {
    opacity: 0;
	animation: show 1.5s 5.9s ease forwards;
}

#g-digital {
    opacity: 0;
	animation: show 1.5s 5.5s ease forwards;
}

#i2-digital {
    opacity: 0;
	animation: show 1.5s 5s ease forwards;
}

#t-digital {
    opacity: 0;
	animation: show 1.5s 5.4s ease-in-out forwards;
}

#a-digital {
    opacity: 0;
	animation: show 1.5s 5.3s ease-in-out forwards;
}

#l-digital {
    opacity: 0;
	animation: show 1.5s 5.1s ease-in-out forwards;
}
	
#f-film {
    opacity: 0;
	animation: show 1.5s 7.6s ease forwards;
}

#i-film {
    opacity: 0;
	animation: show 1.5s 8.3s ease forwards;
}

#l-film {
    opacity: 0;
	animation: show 1.5s 8.1s ease forwards;
}

#m-film {
    opacity: 0;
	animation: show 1.5s 7.9s ease forwards;
}
	
#c-creative {
    opacity: 0;
	animation: show2 1.5s 10s ease forwards;
}

#r-creative {
    opacity: 0;
	animation: show2 1.5s 10.9s ease forwards;
}

#e-creative {
    opacity: 0;
	animation: show2 1.5s 10.6s ease forwards;
}

#a-creative {
    opacity: 0;
	animation: show2 1.5s 10.1s ease forwards;
}

#t-creative {
    opacity: 0;
	animation: show2 1.5s 10.4s ease-in-out forwards;
}

#i-creative {
    opacity: 0;
	animation: show2 1.5s 10.3s ease-in-out forwards;
}
#v-creative {
    opacity: 0;
	animation: show2 1.5s 10.2s ease-in-out forwards;
}
#e2-creative {
    opacity: 0;
	animation: show2 1.5s 10.7s ease-in-out forwards;
}





@keyframes show {
	0% {
		opacity: 0;
	}
	20% {
		opacity:1;
	}
	80% {
		opacity:1;
	}
	100% {
		opacity: 0;
	}
}
	
@keyframes show2 {
	0% {
		opacity: 0;
	}
	20% {
		opacity:1;
	}
	100% {
		opacity: 1;
	}
}	
	
</style>
<g id="Layer_2">
	<rect x="-3.5" y="-4.7" display="inline" fill="#231F20" width="141.5" height="77.8"/>
</g>
<g id="LIVE_TEXT" display="none">
	<g display="inline">
		
			<text transform="matrix(1 0 0 1 -0.7978 39.6363)" fill="#FFF100" font-family="'Tungsten-Medium'" font-size="21" letter-spacing="10">DESIGN</text>
	</g>
</g>
<g id="A_STUDIO">
	<g>
		<g>
			<path fill="#FFFFFF" d="M0.3,10.7c0-1.4,0.5-2,1.7-2.4l2.1-0.7V5.7c0-0.7-0.3-1-1-1H2.9c-0.7,0-1,0.4-1,1v1.4H0.4V5.8
				c0-1.7,0.9-2.5,2.5-2.5h0.2c1.7,0,2.5,0.9,2.5,2.5v8.8H4.1v-0.7c-0.4,0.4-1,0.8-1.9,0.8c-1.3,0-1.9-0.7-1.9-2V10.7z M4.1,12.7V9
				L2.6,9.5C2,9.8,1.9,10.1,1.9,10.7v1.7c0,0.5,0.3,0.8,0.8,0.8C3.1,13.2,3.5,13.1,4.1,12.7z"/>
			<rect x="0.3" y="0" fill="#FFFFFF" width="5.4" height="1.4"/>
		</g>
		<g>
			<g>
				<path fill="#FFFFFF" d="M6.3,60v2.1c0,1.8-0.9,2.7-2.7,2.7H3.1c-1.8,0-2.7-0.9-2.7-2.7v-3.1H2v3.1c0,0.8,0.4,1.1,1.1,1.1h0.3
					c0.8,0,1.1-0.4,1.1-1.1V60c0-0.7-0.3-1-0.7-1.4l-2-1.5c-1.1-0.8-1.4-1.5-1.4-2.7v-1.8c0-1.8,0.9-2.7,2.7-2.7h0.4
					c1.8,0,2.7,0.9,2.7,2.7v2.6H4.6v-2.7c0-0.8-0.4-1.1-1.1-1.1H3.2c-0.8,0-1.1,0.4-1.1,1.1v1.8c0,0.7,0.3,1,0.8,1.4l2,1.5
					C5.9,58,6.3,58.7,6.3,60z"/>
				<path fill="#FFFFFF" d="M19.6,64.7V51.6h-2.2v-1.5h6v1.5h-2.2v13.1H19.6z"/>
				<path fill="#FFFFFF" d="M40.8,62.1c0,1.8-0.9,2.7-2.7,2.7h-0.5c-1.8,0-2.7-0.9-2.7-2.7v-12h1.7v12.1c0,0.8,0.4,1.1,1.1,1.1H38
					c0.8,0,1.1-0.4,1.1-1.1V50.1h1.7V62.1z"/>
				<path fill="#FFFFFF" d="M52.8,50.1h2.8c2.2,0,3.2,1,3.2,3.2v8.1c0,2.2-1,3.2-3.2,3.2h-2.8V50.1z M54.5,63.1h1
					c1.1,0,1.6-0.6,1.6-1.7v-8.2c0-1.1-0.5-1.7-1.6-1.7h-1V63.1z"/>
				<path fill="#FFFFFF" d="M72.4,64.7h-1.7V50.1h1.7V64.7z"/>
				<path fill="#FFFFFF" d="M87.8,64.8h-0.6c-1.8,0-2.7-0.9-2.7-2.7v-9.4c0-1.8,0.9-2.7,2.7-2.7h0.6c1.8,0,2.7,0.9,2.7,2.7v9.4
					C90.5,63.9,89.6,64.8,87.8,64.8z M87.7,51.5h-0.5c-0.8,0-1.1,0.4-1.1,1.1v9.6c0,0.8,0.4,1.1,1.1,1.1h0.5c0.8,0,1.1-0.4,1.1-1.1
					v-9.6C88.8,51.8,88.5,51.5,87.7,51.5z"/>
			</g>
		</g>
	</g>
</g>
<g id="CREATIVE" >
	<path display="inline" id="c-creative" fill="#FFFFFF" d="M6.4,34v3c0,1.8-0.9,2.7-2.7,2.7H3.2c-1.8,0-2.7-0.9-2.7-2.7v-9.4c0-1.8,0.9-2.7,2.7-2.7
		h0.5c1.8,0,2.7,0.9,2.7,2.7v2.6H4.7v-2.7c0-0.8-0.4-1.1-1.1-1.1H3.2c-0.8,0-1.1,0.4-1.1,1.1v9.6c0,0.8,0.4,1.1,1.1,1.1h0.5
		c0.8,0,1.1-0.4,1.1-1.1V34H6.4z"/>
	<path display="inline" id="r-creative" fill="#FFFFFF" d="M24.1,34.7v4.9h-1.7v-4.9c0-0.9-0.4-1.3-1.3-1.3H20v6.1h-1.7V25h3.1
		c1.8,0,2.7,0.9,2.7,2.7v2.7c0,1.3-0.5,2-1.3,2.3C23.7,33,24.1,33.6,24.1,34.7z M21.3,26.6H20V32h1.3c0.8,0,1.2-0.4,1.2-1.2v-3.1
		C22.4,26.9,22.1,26.6,21.3,26.6z"/>
	<path display="inline" id="e-creative" fill="#FFFFFF" d="M40.7,25v1.5h-2.9v4.8h2.8v1.5h-2.8v5.2h3v1.5h-4.6V25H40.7z"/>
	<path display="inline" id="a-creative" fill="#FFFFFF" d="M52.3,35.7c0-1.4,0.5-2,1.7-2.4l2.1-0.7v-1.9c0-0.7-0.3-1-1-1H55c-0.7,0-1,0.4-1,1v1.4
		h-1.5v-1.3c0-1.7,0.9-2.5,2.5-2.5h0.2c1.7,0,2.5,0.9,2.5,2.5v8.8h-1.6v-0.7c-0.4,0.4-1,0.8-1.9,0.8c-1.3,0-1.9-0.7-1.9-2V35.7z
		 M56.1,37.7v-3.7l-1.4,0.5c-0.6,0.2-0.8,0.5-0.8,1.2v1.7c0,0.5,0.3,0.8,0.8,0.8C55.2,38.3,55.6,38.1,56.1,37.7z"/>
	<path display="inline" id="t-creative" fill="#FFFFFF" d="M71.3,39.6V26.6h-2.2V25h6v1.5h-2.2v13.1H71.3z"/>
	<path display="inline" id="i-creative" fill="#FFFFFF" d="M88.2,39.6h-1.7V25h1.7V39.6z"/>
	<path display="inline" id="v-creative" fill="#FFFFFF" d="M102.1,39.7L99.8,25h1.7l1.5,11.2l1.6-11.2h1.6L104,39.7H102.1z"/>
	<path display="inline" id="e2-creative" fill="#FFFFFF" d="M122.5,25v1.5h-2.9v4.8h2.8v1.5h-2.8v5.2h3v1.5h-4.6V25H122.5z"/>
	<rect x="52.3" y="25" id="a-creative" display="inline" fill="#FFFFFF" width="5.4" height="1.4"/>
</g>
<g id="DESIGN" >
	<g>
		<path id="d" fill="#FFFFFF" d="M0,24.9h2.8C5,24.9,6,26,6,28.2v8.2c0,2.2-1,3.3-3.3,3.3H0V24.9z M1.7,38.1h1c1.1,0,1.7-0.6,1.7-1.7v-8.2
			c0-1.1-0.5-1.7-1.7-1.7h-1V38.1z"/>
		<path id="e" fill="#FFFFFF" d="M22.7,24.9v1.6h-2.9v4.9h2.8v1.5h-2.8v5.2h3v1.6h-4.7V24.9H22.7z"/>
		<path id="s" fill="#FFFFFF" d="M40.4,34.9V37c0,1.8-0.9,2.7-2.7,2.7h-0.5c-1.8,0-2.7-0.9-2.7-2.7V34h1.6v3.1c0,0.8,0.4,1.1,1.1,1.1h0.3
			c0.8,0,1.1-0.4,1.1-1.1v-2.2c0-0.7-0.3-1-0.7-1.4L36,32c-1.1-0.8-1.4-1.5-1.4-2.7v-1.8c0-1.8,0.9-2.7,2.7-2.7h0.4
			c1.8,0,2.7,0.9,2.7,2.7v2.6h-1.6v-2.7c0-0.8-0.4-1.1-1.1-1.1h-0.3c-0.8,0-1.1,0.4-1.1,1.1v1.8c0,0.7,0.3,1,0.8,1.4l2,1.5
			C40.1,32.9,40.4,33.6,40.4,34.9z"/>
		<path id="i" fill="#FFFFFF" d="M54.1,39.6h-1.7V24.9h1.7V39.6z"/>
		<path id="g" fill="#FFFFFF" d="M69.3,33.4v-1.5h3V37c0,1.8-0.9,2.7-2.7,2.7h-0.6c-1.8,0-2.7-0.9-2.7-2.7v-9.5c0-1.8,0.9-2.7,2.7-2.7h0.6
			c1.8,0,2.7,0.9,2.7,2.7v2h-1.6v-2.1c0-0.8-0.4-1.1-1.1-1.1H69c-0.8,0-1.1,0.4-1.1,1.1v9.7c0,0.8,0.4,1.1,1.1,1.1h0.5
			c0.8,0,1.1-0.4,1.1-1.1v-3.8H69.3z"/>
		<path id="n" fill="#FFFFFF" d="M85.9,28.1v11.5h-1.6V24.9h2.3l2.4,10.6V24.9h1.6v14.7h-2.1L85.9,28.1z"/>
	</g>
</g>
<g id="FILM" >
	<g display="inline">
		<path id="f-film" fill="#FFFFFF" d="M4.5,24.9v1.6H1.7v4.9h2.7v1.5H1.7v6.7H0V24.9H4.5z"/>
		<path id="i-film" fill="#FFFFFF" d="M18.1,39.6h-1.7V24.9h1.7V39.6z"/>
		<path id="l-film" fill="#FFFFFF" d="M31.9,24.9v13.1h2.8v1.6h-4.5V24.9H31.9z"/>
		<path id="m-film" fill="#FFFFFF" d="M55.4,24.9v14.7h-1.6V27.5l-2,12.2H50l-2-12.2v12.2h-1.6V24.9H49l1.9,11.6l1.9-11.6H55.4z"/>
	</g>
</g>
<g id="DIGITAL">
	<g display="inline">
		<path id="d-digital" fill="#FFFFFF" d="M0,24.9h2.8C5,24.9,6,26,6,28.2v8.2c0,2.2-1,3.3-3.3,3.3H0V24.9z M1.7,38.1h1c1.1,0,1.7-0.6,1.7-1.7v-8.2
			c0-1.1-0.5-1.7-1.7-1.7h-1V38.1z"/>
		<path id="i-digital" fill="#FFFFFF" d="M19.8,39.6h-1.7V24.9h1.7V39.6z"/>
		<path id="g-digital" fill="#FFFFFF" d="M34.9,33.4v-1.5h3V37c0,1.8-0.9,2.7-2.7,2.7h-0.6c-1.8,0-2.7-0.9-2.7-2.7v-9.5c0-1.8,0.9-2.7,2.7-2.7h0.6
			c1.8,0,2.7,0.9,2.7,2.7v2h-1.6v-2.1c0-0.8-0.4-1.1-1.1-1.1h-0.5c-0.8,0-1.1,0.4-1.1,1.1v9.7c0,0.8,0.4,1.1,1.1,1.1h0.5
			c0.8,0,1.1-0.4,1.1-1.1v-3.8H34.9z"/>
		<path id="i2-digital" fill="#FFFFFF" d="M51.7,39.6H50V24.9h1.7V39.6z"/>
		<path id="t-digital" fill="#FFFFFF" d="M65.4,39.6V26.5h-2.2v-1.6h6.1v1.6h-2.2v13.1H65.4z"/>
		<path id="a-digital" fill="#FFFFFF" d="M84.5,39.6l-0.4-2.5h-2.7l-0.3,2.5h-1.6l2.3-14.7h2.1l2.3,14.7H84.5z M81.7,35.7H84l-1.2-8.1L81.7,35.7z"
			/>
		<path id="l-digital" fill="#FFFFFF" d="M99.5,24.9v13.1h2.8v1.6h-4.5V24.9H99.5z"/>
	</g>
</g>
<g id="BRANDING" >
	<g display="inline">
		<path id="b-branding" fill="#FFFFFF" d="M5.8,34.4v2.5c0,1.8-0.9,2.7-2.7,2.7H0V24.9h3.1c1.8,0,2.7,0.9,2.7,2.7v2.2c0,1.3-0.4,2-1.3,2.3
			C5.4,32.5,5.8,33.1,5.8,34.4z M3,26.5H1.7v4.9h1.2c0.8,0,1.2-0.4,1.2-1.2v-2.6C4.1,26.8,3.8,26.5,3,26.5z M1.7,38.1h1.4
			c0.8,0,1.1-0.4,1.1-1.1v-2.9c0-0.8-0.4-1.2-1.2-1.2H1.7V38.1z"/>
		<path  id="r-branding" fill="#FFFFFF" d="M23.8,34.7v5h-1.7v-4.9c0-0.9-0.4-1.3-1.3-1.3h-1.2v6.2h-1.7V24.9H21c1.8,0,2.7,0.9,2.7,2.7v2.7
			c0,1.3-0.5,2-1.3,2.3C23.4,33,23.8,33.5,23.8,34.7z M20.9,26.5h-1.4V32h1.3c0.8,0,1.2-0.4,1.2-1.2v-3.1
			C22,26.8,21.7,26.5,20.9,26.5z"/>
		<path  id="n-branding" fill="#FFFFFF" d="M54.6,28.1v11.5H53V24.9h2.3l2.4,10.6V24.9h1.6v14.7h-2.1L54.6,28.1z"/>
		<path  id="d-branding" fill="#FFFFFF" d="M71.4,24.9h2.8c2.2,0,3.3,1,3.3,3.3v8.2c0,2.2-1,3.3-3.3,3.3h-2.8V24.9z M73.1,38.1h1
			c1.1,0,1.7-0.6,1.7-1.7v-8.2c0-1.1-0.5-1.7-1.7-1.7h-1V38.1z"/>
		<path id="i-branding" fill="#FFFFFF" d="M91.2,39.6h-1.7V24.9h1.7V39.6z"/>
		<path id="n2-branding" fill="#FFFFFF" d="M104.9,28.1v11.5h-1.6V24.9h2.3l2.4,10.6V24.9h1.6v14.7h-2.1L104.9,28.1z"/>
		<path  id="g-branding" fill="#FFFFFF" d="M124.8,33.4v-1.5h3V37c0,1.8-0.9,2.7-2.7,2.7h-0.6c-1.8,0-2.7-0.9-2.7-2.7v-9.5c0-1.8,0.9-2.7,2.7-2.7h0.6
			c1.8,0,2.7,0.9,2.7,2.7v2h-1.6v-2.1c0-0.8-0.4-1.1-1.1-1.1h-0.5c-0.8,0-1.1,0.4-1.1,1.1v9.7c0,0.8,0.4,1.1,1.1,1.1h0.5
			c0.8,0,1.1-0.4,1.1-1.1v-3.8H124.8z"/>
		<path  id="a-branding" fill="#FFFFFF" d="M35.6,35.7c0-1.4,0.5-2,1.7-2.4l2.1-0.7v-1.9c0-0.7-0.3-1-1-1h-0.1c-0.7,0-1,0.4-1,1v1.4h-1.5v-1.3
			c0-1.7,0.9-2.5,2.5-2.5h0.2c1.7,0,2.5,0.9,2.5,2.5v8.8h-1.6v-0.7c-0.4,0.4-1,0.8-1.9,0.8c-1.3,0-1.9-0.7-1.9-2V35.7z M39.4,37.7
			V34L38,34.6c-0.6,0.2-0.8,0.5-0.8,1.2v1.7c0,0.5,0.3,0.8,0.8,0.8C38.5,38.2,38.9,38.1,39.4,37.7z"/>
		<rect  id="a-branding" x="35.6" y="25" fill="#FFFFFF" width="5.4" height="1.4"/>
	</g>
</g>
<g id="Layer_3">
</g>
</svg>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/nikches/a-pen-by-nik-ches-xdwLmw */
/* #d {
    opacity: 0;
	animation: show 1.5s .2s ease forwards;
}

#e {
    opacity: 0;
	animation: show 1.5s 1s ease forwards;
}

#s {
    opacity: 0;
	animation: show 1.5s .7s ease forwards;
}

#i {
    opacity: 0;
	animation: show 1.5s .3s ease forwards;
}

#g {
    opacity: 0;
	animation: show 1.5s .6s ease-in-out forwards;
}

#n {
    opacity: 0;
	animation: show 1.5s .5s ease-in-out forwards;
}

#b-branding {
    opacity: 0;
	animation: show 1.5s 2.5s ease forwards;
}

#r-branding {
    opacity: 0;
	animation: show 1.5s 3s ease forwards;
}

#n-branding {
    opacity: 0;
	animation: show 1.5s 3.1s ease forwards;
}

#d-branding {
    opacity: 0;
	animation: show 1.5s 2.6s ease forwards;
}

#i-branding {
    opacity: 0;
	animation: show 1.5s 2.9s ease-in-out forwards;
}

#n2-branding {
    opacity: 0;
	animation: show 1.5s 2.8s ease-in-out forwards;
}

#g-branding {
    opacity: 0;
	animation: show 1.5s 2.7s ease-in-out forwards;
}

#a-branding {
    opacity: 0;
	animation: show 1.5s 3.2s ease-in-out forwards;
}


@keyframes show {
	0% {
		opacity: 0;
	}
	20% {
		opacity:1;
	}
	80% {
		opacity:1;
	}
	100% {
		opacity: 0;
	}
} */

Comments