Skip to content

Gallery / text-fx / Variable-weight wave

Variable-weight wave

A wave of font-weight rolling across letters via @property

text-fx advanced textvariable-fontpropertystagger
Live preview

⚠ Browser support Needs @property and font-variation-settings (Chrome 85+, Safari 16.4+, Firefox 128+) plus a variable system font such as SF Pro or Segoe UI Variable; elsewhere the text renders at a static weight.

Techniques: @property · font-variation-settings · --sg-i-index-stagger · @supports

Customizeupdates preview, code & clipboard
#7F77DD
42px
2s
Code snippets/text-fx/text-variable-weight-wave.html 
<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/text-fx/text-variable-weight-wave.html
  Desc   : A wave of font-weight rolling across letters via @property
  ============================================================
-->
<div class="sg-text-variable-weight-wave" aria-label="flexible" style="--sg-color:#7F77DD; --sg-size:42px; --sg-duration:2s;">
  <span class="sg-text-variable-weight-wave-ch" style="--sg-i:0" aria-hidden="true">f</span><span class="sg-text-variable-weight-wave-ch" style="--sg-i:1" aria-hidden="true">l</span><span class="sg-text-variable-weight-wave-ch" style="--sg-i:2" aria-hidden="true">e</span><span class="sg-text-variable-weight-wave-ch" style="--sg-i:3" aria-hidden="true">x</span><span class="sg-text-variable-weight-wave-ch" style="--sg-i:4" aria-hidden="true">i</span><span class="sg-text-variable-weight-wave-ch" style="--sg-i:5" aria-hidden="true">b</span><span class="sg-text-variable-weight-wave-ch" style="--sg-i:6" aria-hidden="true">l</span><span class="sg-text-variable-weight-wave-ch" style="--sg-i:7" aria-hidden="true">e</span>
</div>
<style>
  @property --sg-tvww-wgt {
    syntax: '<number>';
    inherits: false;
    initial-value: 400;
  }
  .sg-text-variable-weight-wave {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: var(--sg-size);
    color: var(--sg-color);
    letter-spacing: 0.02em;
    display: inline-flex;
  }
  .sg-text-variable-weight-wave-ch {
    font-weight: 550;
  }
  @supports (font-variation-settings: "wght" 500) {
    .sg-text-variable-weight-wave-ch {
      animation: sg-text-variable-weight-wave-roll var(--sg-duration) ease-in-out infinite;
      animation-delay: calc(var(--sg-i) * var(--sg-duration) / -8);
      font-variation-settings: "wght" var(--sg-tvww-wgt);
      font-weight: normal;
    }
  }
  @keyframes sg-text-variable-weight-wave-roll {
    0%, 100% { --sg-tvww-wgt: 260; }
    50%      { --sg-tvww-wgt: 840; }
  }
</style>

More text-fx