Payament
Free Photos
WordPress Themes

Codepad Animation

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); } }
JAVASCRIPT
Expand for more options Login