<!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;
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
