Background-repeat для текста

Question

Как сделать повтор текста через background-repeat?
так можно сделать на css? или это нужно делать на js?

Answer 1

Можно текст завернуть в SVG:

.patterns {
  background:
  url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 30"><foreignObject width="50px" height="30px"><div xmlns="http://www.w3.org/1999/xhtml" style="color:red;font-size:8px">SVG TEXT <span style="color:transparent;font-size:8px">○</span></div></foreignObject></svg>') no-repeat,
  url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 30"><foreignObject width="50px" height="30px"><div xmlns="http://www.w3.org/1999/xhtml" style="color:gray;font-size:8px">SVG TEXT ○</div></foreignObject></svg>') repeat-x;
  background-position-x: calc(50% + 5px);
  width:100%;
  height:30px;
}

<div class=patterns></div>

БЛОГ НА HUSL

Background-repeat для текста

Ответы (1 шт):