A litle bit CSS & Variable Fonts Magic

This demo scene is made with just one div element and CSS

The first thing you need is variable fonts. In short, these are fonts that can be additionally changed using preset parameters. More details can be found at the link. And some font examples here.

Such fonts, for example, support animation!!!

The technology itself is old (2017) and is supported by all browsers. (even in iphone, yes safari you are now a new IE, deal with it)

Take Wavefont and connect

@font-face {
  font-family: "Wavefont";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(https://fonts.gstatic.com/l/font?kit=L0xjDF00m0cP6hefyOCpRdycFsGxSrqDyx4fE4tvQYb4bdT9BMpjKNNBaEg89a5MNuLeF1NOtSWF0DO3TeLnas9-UFAV50jD2MVCwuLxW9QGD-RdzQg4xEMmac-c01PLIiWA_utv7FG1lphvBzyKrk89iF8hOHu7BOJlKCbYDWByr1XoHkD2hr8Li65ZySOVwJ-cbMABOnalrQ7Bl8VCYtB0ldGbZzqVPP3KwTr6XOyeraWl0nxmzPJ9bj1Mqj5r6amJuhWSl_UCHsPRfaQPQxsFkuD_FShKP7gQwHNe_6vjYiTWhniwb4AmPdJoPUgKf57EEfSDBa_DbJhfs6hA-Uop13_HQizh08PnIVufXstx3mdRwN2YNTxv0mlgulcxePwhPGp1ENYSOdHCj_FuvB0xmye7ebYXUHoyE_p3akl41OuwMyxvCWnHSlC9MRkVLHdUaz5B9XonbFQE7OZJ&skey=8f673a4f0b34837&v=v10)
    format("woff2");
}

Defining the CSS properties of a div element

.wavefont-div {
  /**/
  font-family: "Wavefont", Tofu;
  font-variation-settings: "ROND" -100, "YELA" -40;
  background: linear-gradient(180deg, transparent 20%, #000 60%, var(--hga)),
    repeating-linear-gradient(transparent 0 6px, var(--g1) 4px 20px),
    repeating-linear-gradient(90deg, var(--g2) 0 4px, var(--g3) 4px 20px);
  filter: drop-shadow(0px -139px 71px var(--hgb));
  background-clip: text;
  color: transparent;
  /**/
}

Please note that the gradient uses a variable, they must be declared via @, this is important for animation

@property --bg1 {
  syntax: "<color>"; /* thanks to specifying the type of the variable, the CSS engine will understand how to animate this variable */
  inherits: false;
  initial-value: transparent;
}

and the animation itself

@keyframes time {
  0% {
    --hga: #dadae0;
    --hgb: #fef869;
    --g1: transparent;
    --g2: transparent;
    --g3: transparent;
  }

  25% {
    --hga: navy;
    --hgb: #fc0;
    --g1: black;
    --g2: white;
    --g3: black;
  }
/**/
}

Done, the full example below, despite support in different browsers, behaves differently due to different implementations, and everywhere except chrome the animation is lame, even in stoned fox :)

Thanks for reading!

Comments

[ikorniyasov]

This article proved to be incredibly useful. The implementation, while straightforward, is impressively effective and has provided significant insights.