Как реализовать полузакрашенную цифру на css/svg?

Вот такая штука только на svg делается верно ? И как сделать плавное обтекание до половины, в свг слаб :)

Ответ

Например:
svg text { font-family: sans-serif; text-anchor: middle; font-weight: bold; font-size: 70px; fill: url(#fendTestGrad); } #fendTestGrad .start { stop-color: #c2c5cc; } #fendTestGrad .end { stop-color: #8f98a1; } svg { background: linear-gradient(135deg, rgba(73,85,97,1) 0%, rgba(74,88,101,1) 100%); }