Как сделать такую ленту с цикличным текстом?

Question

Есть дизайн для верстки, и на нем есть такой элемент:

Т.е. это вот такой <div> на 100% ширины экрана и внутри этого div-а текст с картинками (два маленьких флага Японии), и они должны вот так повторяться, вместе с картинками . Пробовал гуглить, но не знаю по каким ключевым словам это можно найти :3

Answer 1

body {
   display: flex;
   min-height: 100vh;
   overflow: hidden;
   margin: 0;
}
div {
   margin: auto;
   background-image: url("data:image/svg+xml,%3Csvg width='320px' height='30px' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='10' y='20' style='font-family: sans-serif; fill: %233A1514; text-transform: uppercase; font-size: .8rem; font-weight: 600'%3E ?? lorem ipsumlorem ipsumlorem ipsum ??%3C/text%3E%3C/svg%3E");
   background-position: center;
   width: 110vw;
   height: 30px;
   transform: rotate(1deg);
   border: 1px solid #3a1514;
   border-left: none;
   border-right: none;
}

<div>
</div>

БЛОГ НА HUSL

Как сделать такую ленту с цикличным текстом?

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