Skip to content

Gallery / text / Wave text

Wave text

Letters bouncing in a wave via staggered delays

text beginner textwavestaggerbounce
Live preview

Techniques: animation-delay · nth-of-type · translateY · svg-text

Customizeupdates preview, code & clipboard
#7F77DD
220px
1.6s
Code snippets/text/wave-text.html 
<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/text/wave-text.html
  Desc   : Letters bouncing in a wave via staggered delays
  ============================================================
-->
<div class="sg-wave-text" style="--sg-color:#7F77DD; --sg-size:220px; --sg-duration:1.6s;">
  <svg viewBox="0 0 220 60" aria-hidden="true" focusable="false">
    <text x="14"  y="40">s</text>
    <text x="39"  y="40">v</text>
    <text x="64"  y="40">g</text>
    <text x="89"  y="40">a</text>
    <text x="114" y="40">r</text>
    <text x="136" y="40">d</text>
    <text x="162" y="40">e</text>
    <text x="187" y="40">n</text>
  </svg>
</div>
<style>
  .sg-wave-text {
    width: var(--sg-size);
  }
  .sg-wave-text svg {
    display: block;
    width: 100%;
  }
  .sg-wave-text text {
    font-family: inherit;
    font-size: 34px;
    font-weight: 700;
    fill: var(--sg-color);
    animation: sg-wave-text-bounce var(--sg-duration) ease-in-out infinite;
  }
  .sg-wave-text text:nth-of-type(2) { animation-delay: calc(var(--sg-duration) * -0.9); }
  .sg-wave-text text:nth-of-type(3) { animation-delay: calc(var(--sg-duration) * -0.8); }
  .sg-wave-text text:nth-of-type(4) { animation-delay: calc(var(--sg-duration) * -0.7); }
  .sg-wave-text text:nth-of-type(5) { animation-delay: calc(var(--sg-duration) * -0.6); }
  .sg-wave-text text:nth-of-type(6) { animation-delay: calc(var(--sg-duration) * -0.5); }
  .sg-wave-text text:nth-of-type(7) { animation-delay: calc(var(--sg-duration) * -0.4); }
  .sg-wave-text text:nth-of-type(8) { animation-delay: calc(var(--sg-duration) * -0.3); }
  @keyframes sg-wave-text-bounce {
    0%, 100% { transform: translateY(0); }
    30%      { transform: translateY(-9px); }
    60%      { transform: translateY(2px); }
  }
</style>

More text