Marcelo Oseas

In this example below you will see how to do a Marcelo Oseas with some HTML / CSS and Javascript

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

<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/vitordino/marcelo-oseas-aBaKJb */
.s1 {
  animation: animation 7.7s ease infinite;
  animation-delay: 0.1538461538s;
  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.3076923077s;
  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.4615384615s;
  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.6153846154s;
  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.7692307692s;
  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.9230769231s;
  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.0769230769s;
  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.2307692308s;
  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.3846153846s;
  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;
}

Comments