Marcelo Oseas

Tutorials of (Marcelo oseas) by Vitor dino

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Marcelo Oseas</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="container">
	<svg width="493px" height="330px" viewBox="0 0 493 330">
		<g class="lines" stroke="#00ADEE" stroke-width="0.5">
			<g class="left">
					<path d="M492.1662,164.2488 L246.295338,328.162708" class="s9" />
					<path d="M461.4162,143.7498 L215.545338,307.663708" class="s8" />
					<path d="M430.6662,123.2496 L184.795338,287.163508" class="s7" />
					<path d="M399.9162,102.7488 L154.045338,266.662708" class="s6" />
					<path d="M369.1662,82.2498 L123.295338,246.163708" class="s5" />
					<path d="M338.4162,61.7496 L92.545338,225.663508" class="s4" />
					<path d="M307.6662,41.2488 L61.795338,205.162708" class="s3" />
					<path d="M276.9162,20.7498 L31.045338,184.663708" class="s2" />
					<path d="M246.1662,0.2496 L0.295338023,164.163508" class="s1" />
			</g>
			<g class="right">
					<path d="M0.1662,164.2488 L246.037062,328.162708" class="s9" />
					<path d="M30.9162,143.7498 L276.787062,307.663708" class="s8" />
					<path d="M61.6662,123.2496 L307.537062,287.163508" class="s7" />
					<path d="M92.4162,102.7488 L338.287062,266.662708" class="s6" />
					<path d="M123.1662,82.2498 L369.037062,246.163708" class="s5" />
					<path d="M153.9162,61.7496 L399.787062,225.663508" class="s4" />
					<path d="M184.6662,41.2488 L430.537062,205.162708" class="s3" />
					<path d="M215.4162,20.7498 L461.287062,184.663708" class="s2" />
					<path d="M246,-1.42108547e-14 L491.860611,163.929283" class="s1" />
			</g>
		</g>
		<g class="letters" transform="translate(123.000000, 0.000000)" fill="black">
				<path d="M0.1644,82.2072 L123.1644,164.2092 L246.1644,82.2072 L123.160004,0.2052 L0.1644,82.2072 Z M61.6644,82.2072 L123.1644,41.2092 L184.6644,82.2072 L123.1644,123.2052 L61.6644,82.2072 Z" class="O" />
				<polygon points="123.1662 205.2054 0.1662 123.2034 0.1662 164.2074 0.1662 246.2034 37.1202 246.2934 37.1202 188.8434 123.1662 246.2034 209.2122 188.8434 209.2122 246.2934 246.1662 246.2034 246.1662 164.2074 246.1662 123.2034" class="M" />
		</g>
	</svg>
</div>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
.s1 {
  animation: animation 7.7s ease infinite;
  animation-delay: 0.15385s;
  stroke-dasharray: 0 300;
}

@keyframes animation {
  0%, 10% {
    stroke-dasharray: 0 300 0;
  }
  30% {
    stroke-dasharray: 300 0 0;
  }
  50%, 100% {
    stroke-dasharray: 0 300 0;
  }
}
.s2 {
  animation: animation 7.7s ease infinite;
  animation-delay: 0.30769s;
  stroke-dasharray: 0 300;
}

@keyframes animation {
  0%, 10% {
    stroke-dasharray: 0 300 0;
  }
  30% {
    stroke-dasharray: 300 0 0;
  }
  50%, 100% {
    stroke-dasharray: 0 300 0;
  }
}
.s3 {
  animation: animation 7.7s ease infinite;
  animation-delay: 0.46154s;
  stroke-dasharray: 0 300;
}

@keyframes animation {
  0%, 10% {
    stroke-dasharray: 0 300 0;
  }
  30% {
    stroke-dasharray: 300 0 0;
  }
  50%, 100% {
    stroke-dasharray: 0 300 0;
  }
}
.s4 {
  animation: animation 7.7s ease infinite;
  animation-delay: 0.61538s;
  stroke-dasharray: 0 300;
}

@keyframes animation {
  0%, 10% {
    stroke-dasharray: 0 300 0;
  }
  30% {
    stroke-dasharray: 300 0 0;
  }
  50%, 100% {
    stroke-dasharray: 0 300 0;
  }
}
.s5 {
  animation: animation 7.7s ease infinite;
  animation-delay: 0.76923s;
  stroke-dasharray: 0 300;
}

@keyframes animation {
  0%, 10% {
    stroke-dasharray: 0 300 0;
  }
  30% {
    stroke-dasharray: 300 0 0;
  }
  50%, 100% {
    stroke-dasharray: 0 300 0;
  }
}
.s6 {
  animation: animation 7.7s ease infinite;
  animation-delay: 0.92308s;
  stroke-dasharray: 0 300;
}

@keyframes animation {
  0%, 10% {
    stroke-dasharray: 0 300 0;
  }
  30% {
    stroke-dasharray: 300 0 0;
  }
  50%, 100% {
    stroke-dasharray: 0 300 0;
  }
}
.s7 {
  animation: animation 7.7s ease infinite;
  animation-delay: 1.07692s;
  stroke-dasharray: 0 300;
}

@keyframes animation {
  0%, 10% {
    stroke-dasharray: 0 300 0;
  }
  30% {
    stroke-dasharray: 300 0 0;
  }
  50%, 100% {
    stroke-dasharray: 0 300 0;
  }
}
.s8 {
  animation: animation 7.7s ease infinite;
  animation-delay: 1.23077s;
  stroke-dasharray: 0 300;
}

@keyframes animation {
  0%, 10% {
    stroke-dasharray: 0 300 0;
  }
  30% {
    stroke-dasharray: 300 0 0;
  }
  50%, 100% {
    stroke-dasharray: 0 300 0;
  }
}
.s9 {
  animation: animation 7.7s ease infinite;
  animation-delay: 1.38462s;
  stroke-dasharray: 0 300;
}

@keyframes animation {
  0%, 10% {
    stroke-dasharray: 0 300 0;
  }
  30% {
    stroke-dasharray: 300 0 0;
  }
  50%, 100% {
    stroke-dasharray: 0 300 0;
  }
}
.letters {
  animation: appear 7.7s ease infinite;
}

@keyframes appear {
  0%, 25%, 100% {
    opacity: 0;
  }
  50%, 95% {
    opacity: 1;
  }
}
html, body {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

svg {
  height: 90vh;
  width: 75vw;
  max-height: 404px;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Marcelo Oseas ) is write by Vitor Dino, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Vitor Dino