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

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
Copyright dudleystorey ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

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



  <svg xmlns="" xmlns: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>
	<text x="900" y="407" dx="0 38 38 38 38" id="shell">SHELL</text>



/*Downloaded from */
@-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("");
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;