Ghost In The Shell Movie Logo SVG Animation

In this example below you will see how to do a Ghost In The Shell Movie Logo SVG Animation with some HTML / CSS and Javascript

Animates the newly revealed Ghost In The Shell movie logo in SVG & CSS

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

<head>
  <meta charset="UTF-8">
  <title>Ghost In The Shell Movie Logo SVG Animation</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 100 1500 550">
	<text x="168" y="407" dx="0 30 30 30 30" id="ghost">GHOST</text>
	<g class="triangle">
		<path fill="none" stroke="#fff" stroke-width="12" d="M758 260l110.7 180H646.9z"/>
		<text x="730" y="365" dx="0 7">IN</text>
		<text x="710" y="415" dx="0 7 7">THE</text>
	</g>
	<text x="900" y="407" dx="0 38 38 38 38" id="shell">SHELL</text>
</svg>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/dudleystorey/ghost-in-the-shell-movie-logo-svg-animation-RGKdPJ */
@-webkit-keyframes fadein {
  to {
    opacity: 1;
  }
}
@keyframes fadein {
  to {
    opacity: 1;
  }
}
body, svg {
  margin: 0;
  background: #000;
  display: block;
  width: 100%;
}

@font-face {
  font-family: Brandon Grotesque Medium;
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/322729_0_0.woff2");
}
text {
  font-family: Brandon Grotesque Medium;
  fill: #fff;
  font-size: 95px;
  opacity: 0;
  -webkit-animation: fadein 1.8s forwards;
          animation: fadein 1.8s forwards;
}

#ghost {
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
}

.triangle text {
  font-size: 42px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

#shell {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}

Comments