'Is there a way to animate the gradients of a font?

Let’s say I would like to use this font:

@font-face {
  src: url("https://cdn.glitch.global/f206356a-29f3-4941-a91f-d78ba238df98/Abelone-FREE.otf?v=1650648293770") format("opentype");
  font-family: "Abelone";
}

* {
  font-family: "Abelone";
  font-size: 80px;
}
Hello, world.

Is there a way to animate the included gradients with CSS or JavaScript? If not, are there alternative ways to do something similar using just SVG or clipping masks, for example?

Important: Chrome doesn’t show the gradients. Please use Firefox to view them.

Edit: Opentype Svg font display/rendering

Opentype Svg (colored) Font Support

  1. Colored Opentype Svg fonts supported (firefox, edge, ios safari)
  2. Opentype Svg font features not supported (e.g chrome)

About used font: ColorFontWeek – Abelone

javascriptcsswebfontssvg-animateopentype-svg-font


Solution 1:[1]

It's possible with an CSS filter.

HTML Code:

<div class=animated>Does it work?</div>

CSS:

div.animated {
filter: hue-rotate(50deg);
}

This should change the colors.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions