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

#javascript #html #jquery #css #svg

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


    

Ответы

Ответ 1

Например:



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%);
}