HTML
<div class="hero" style="max-height: 700px; padding: 40px; margin: 0px auto; text-align: center;">
<svg height="60" viewbox="5 0 80 60" width="80">
<path class="wave" d="M 0 37.5 c 7.684299348848887 0 7.172012725592294 -15 15 -15 s 7.172012725592294 15 15 15 s 7.172012725592294 -15 15 -15 s 7.172012725592294 15 15 15 s 7.172012725592294 -15 15 -15 s 7.172012725592294 15 15 15 s 7.172012725592294 -15 15 -15 s 7.172012725592294 15 15 15 s 7.172012725592294 -15 15 -15 s 7.172012725592294 15 15 15 s 7.172012725592294 -15 15 -15 s 7.172012725592294 15 15 15 s 7.172012725592294 -15 15 -15 s 7.172012725592294 15 15 15 s 7.172012725592294 -15 15 -15" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="4"></path></svg>
<h4 class="animation-title">Code<span>Pad</span></span></h4>
<svg height="60" viewbox="5 0 80 60" width="80">
<path class="wave" d="M 0 37.5 c 7.684299348848887 0 7.172012725592294 -15 15 -15 s 7.172012725592294 15 15 15 s 7.172012725592294 -15 15 -15 s 7.172012725592294 15 15 15 s 7.172012725592294 -15 15 -15 s 7.172012725592294 15 15 15 s 7.172012725592294 -15 15 -15 s 7.172012725592294 15 15 15 s 7.172012725592294 -15 15 -15 s 7.172012725592294 15 15 15 s 7.172012725592294 -15 15 -15 s 7.172012725592294 15 15 15 s 7.172012725592294 -15 15 -15 s 7.172012725592294 15 15 15 s 7.172012725592294 -15 15 -15" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="4"></path></svg>
</div>
CSS
body {
margin: 0;
display: flex;
align-items: center;
background-color: #3456DA;
height: 100vh;
}
.animation-title {
color: #fff;
font-size: 6rem;
font-weight: 700;
margin:0 0 0.5rem 0;
line-height: 1;
letter-spacing: 0.1em;
font-family: -apple-system,
'avenir next', avenir,
roboto, noto,
'helvetica neue', helvetica,
ubuntu,
'franklin gothic medium', 'century gothic',
sans-serif;
}
.animation-title span {
color: #2ecc71;
}
.wave {
animation: moveTheWave 2400ms linear infinite;
stroke-dasharray: 0 16 101 16;
}
@keyframes moveTheWave {
0% {
stroke-dashoffset: 0;
transform: translate3d(0, 0, 0);
}
100% {
stroke-dashoffset: -133;
transform: translate3d(-90px, 0, 0);
}
}
