Как сделать инверсию цвета текста над блоком с другим цветом?

Question

[Вадим Бричок]

Здравствуйте!
Попался мне макет блока.

Черный кружок с анимацией увеличения.
Там еще куча анимашек, которых на скрине нет. Но суть не в том.
Не могу понять как проще сделать эффект смены цвета текста по контуру кружка (который еще и увеличивается\уменьшается).
Может svg..?

Comments

[Ankhena]

ссылку с анимацией тут оставлю

[Вадим Бричок]

Ankhena, спасибо за ответ.
Так и сделал (почти). Можете глянуть верстку страницы, если интересно.

На будущее хотел бы узнать: можно ли это было сделать без дубляжа контента?

[Ankhena]

Вадим Бричок,
Например, с помощью mix-blend-mode: exclusion;
Поддержку браузерами смотрите на caniuse.
Все хорошо, пока дело не доходит до цветных пикселей. Но у вас на оранжевый текст и не наползает.

Иначе придется оранжевый текст вынимать из общего span.


Либо SVG маски.