Question

0

167

Visualizações

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

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

About used font: ColorFontWeek – Abelone

about 4 years ago · Santiago Trujillo

1 Respostas

Responde à pergunta

0

Responde à pergunta

Encontrar trabalhos remotos

Answer 1 · 2022-06-30T14:03:28.947Z

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.

0

167

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

Edit: Opentype Svg font display/rendering

1 Respostas

0

Encontrar trabalhos remotos

Andres GPT