HTML-блоки. Бегущая строка
В качестве кастомного HTML-блока для некоторых экранов (например, главного) может быть добавлена бегущая строка. Ниже представлены варианты таких блоков.
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: #292929;
width: 100%;
height: 24px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
}
.marquee-text {
color: #FFF;
font-size: 13px;
line-height: 16px;
text-transform: uppercase;
white-space: nowrap;
display: inline-block;
padding-right: 16px;
}
.marquee-content {
animation: marquee 10s linear infinite;
display: inline-block;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-content">
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
</div>
<div class="marquee-content">
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: #8401EA;
width: 100%;
height: 24px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
}
.marquee-text {
color: #FFF;
font-size: 13px;
line-height: 16px;
white-space: nowrap;
display: inline-block;
padding-right: 16px;
}
.marquee-content {
animation: marquee 10s linear infinite;
display: inline-block;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-content">
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
</div>
<div class="marquee-content">
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: #FFD900;
width: 100%;
height: 36px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
}
.marquee-text {
color: #292929;
font-size: 12px;
line-height: 16px;
text-transform: uppercase;
white-space: nowrap;
display: inline-block;
padding-right: 12px;
}
.marquee-content {
animation: marquee 12s linear infinite;
display: inline-block;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-content">
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
</div>
<div class="marquee-content">
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: linear-gradient(92deg, #BFDC28 1.46%, #019EA4 99.43%);
width: 100%;
height: 36px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
}
.marquee-text {
color: #FFF;
font-size: 13px;
line-height: 16px;
white-space: nowrap;
display: inline-block;
}
.marquee-content, .marquee-content-double {
width: 100%;
animation: marquee 8s linear infinite;
display: inline-block;
}
.marquee-content-double {
animation-delay: -4s;
}
@keyframes marquee {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-content">
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
</div>
<div class="marquee-content-double">
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: #FE3030;
width: 100%;
height: 24px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
}
.marquee-text {
color: #FFF;
font-size: 13px;
line-height: 16px;
white-space: nowrap;
display: inline-block;
padding-right: 16px;
}
.marquee-content {
animation: marquee 10s linear infinite;
display: inline-block;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-content">
<span class="marquee-text">Самовывоз - бесплатно. Акция 1+1=3</span>
<span class="marquee-text">Самовывоз - бесплатно. Акция 1+1=3</span>
<span class="marquee-text">Самовывоз - бесплатно. Акция 1+1=3</span>
<span class="marquee-text">Самовывоз - бесплатно. Акция 1+1=3</span>
</div>
<div class="marquee-content">
<span class="marquee-text">Самовывоз - бесплатно. Акция 1+1=3</span>
<span class="marquee-text">Самовывоз - бесплатно. Акция 1+1=3</span>
<span class="marquee-text">Самовывоз - бесплатно. Акция 1+1=3</span>
<span class="marquee-text">Самовывоз - бесплатно. Акция 1+1=3</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: linear-gradient(90deg, #292929 0%, #212121 100%);
width: 100%;
height: 40px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
}
.marquee-text {
color: #FFF;
font-size: 12px;
line-height: 16px;
white-space: nowrap;
display: inline-block;
font-weight: 500;
text-transform: uppercase;
}
.marquee-text.red {
color: #FE3030;
font-weight: 700;
}
.marquee-content, .marquee-content-double {
width: 100%;
animation: marquee 8s linear infinite;
display: inline-block;
}
.marquee-content-double {
animation-delay: -4s;
}
@keyframes marquee {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-content">
<span class="marquee-text">Самовывоз - бесплатно. </span>
<span class="marquee-text red"> Акция 1+1=3</span>
</div>
<div class="marquee-content-double">
<span class="marquee-text">Самовывоз - бесплатно. </span>
<span class="marquee-text red"> Акция 1+1=3</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: radial-gradient(circle, rgba(17,0,47,1) 0%, rgba(116,66,205,1) 75%);
width: 100%;
height: 36px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
}
.marquee-text {
color: #FFF;
font-size: 13px;
line-height: 16px;
text-transform: uppercase;
white-space: nowrap;
display: inline-block;
padding-right: 12px;
font-weight: 600;
}
.marquee-content {
animation: marquee 10s linear infinite;
display: inline-block;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-content">
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
</div>
<div class="marquee-content">
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: radial-gradient(circle, rgba(116,66,205,1) 0%, rgba(236,1,133,1) 75%);
width: 100%;
height: 36px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
}
.marquee-text {
color: #FFF;
font-size: 13px;
line-height: 16px;
text-transform: uppercase;
white-space: nowrap;
display: inline-block;
padding-right: 12px;
font-weight: 600;
}
.marquee-content {
animation: marquee 10s linear infinite;
display: inline-block;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-content">
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
</div>
<div class="marquee-content">
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: radial-gradient(circle, rgba(236,1,133,1) 0%, rgba(116,66,205,1) 75%);
width: 100%;
height: 36px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
}
.marquee-text {
color: #FFF;
font-size: 13px;
line-height: 16px;
text-transform: uppercase;
white-space: nowrap;
display: inline-block;
padding-right: 12px;
}
.marquee-content {
animation: marquee 10s linear infinite;
display: inline-block;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-content">
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
</div>
<div class="marquee-content">
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: #60BD67;
width: 100%;
height: 36px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
}
.marquee-svg-background {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.marquee-svg-background svg {
min-height: 100%;
object-fit: cover;
}
.marquee-text {
color: #FFF;
font-size: 13px;
line-height: 16px;
white-space: nowrap;
display: inline-block;
padding-right: 32px;
font-weight: 600;
}
.marquee-content {
animation: marquee 10s linear infinite;
display: inline-block;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-svg-background">
<svg viewBox="0 0 390 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_8051_326)">
<rect width="390" height="36" fill="#60BD67"/>
<g filter="url(#filter0_f_8051_326)">
<ellipse cx="294" cy="-62" rx="76" ry="74" fill="#BEDC29"/>
</g>
<g filter="url(#filter1_f_8051_326)">
<ellipse cx="117.5" cy="92.5" rx="86.5" ry="80.5" fill="#BEDC29"/>
</g>
</g>
<defs>
<filter id="filter0_f_8051_326" x="178" y="-176" width="232" height="228" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_8051_326"/>
</filter>
<filter id="filter1_f_8051_326" x="-9" y="-28" width="253" height="241" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_8051_326"/>
</filter>
<clipPath id="clip0_8051_326">
<rect width="390" height="36" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<div class="marquee-content">
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
</div>
<div class="marquee-content">
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: #60BD67;
width: 100%;
height: 36px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
}
.marquee-svg-background {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.marquee-svg-background svg {
min-height: 100%;
object-fit: cover;
}
.marquee-text {
color: #292929;
font-size: 13px;
line-height: 16px;
white-space: nowrap;
display: inline-block;
padding-right: 32px;
font-weight: 600;
}
.marquee-content {
animation: marquee 12s linear infinite;
display: inline-block;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-svg-background">
<svg viewBox="0 0 390 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_8056_335)">
<rect width="390" height="36" fill="#60BD67"/>
<path d="M308.31 31.2834L307.375 32.7874C306.976 33.4141 306.614 33.7901 306.29 33.9154C305.99 34.0658 305.628 34.0157 305.204 33.765L300.901 31.0954C300.501 30.8197 300.289 30.5063 300.264 30.1554C300.239 29.8045 300.427 29.3157 300.826 28.689L301.761 27.185L330.39 -19.2508L331.326 -20.7548C331.725 -21.4065 332.087 -21.795 332.411 -21.9204C332.735 -22.0708 333.11 -22.0081 333.534 -21.7324L337.837 -19.0252C338.262 -18.7745 338.486 -18.4737 338.511 -18.1228C338.536 -17.7719 338.349 -17.2705 337.95 -16.6188L337.014 -15.1148L308.31 31.2834ZM302.023 6.16671C298.081 6.16671 294.925 4.93845 292.555 2.48193C290.185 0.0254025 289 -3.24579 289 -7.33164C289 -11.6932 290.247 -15.2151 292.742 -17.8972C295.237 -20.5793 298.643 -21.9204 302.959 -21.9204C307.2 -21.9204 310.444 -20.667 312.689 -18.1604C314.934 -15.6537 316.057 -12.3825 316.057 -8.34683C316.057 -3.83485 314.747 -0.287929 312.128 2.29393C309.533 4.87578 306.165 6.16671 302.023 6.16671ZM302.472 -1.05246C305.716 -1.05246 307.337 -3.37112 307.337 -8.00843C307.337 -12.4703 305.803 -14.7012 302.734 -14.7012C299.391 -14.7012 297.72 -12.37 297.72 -7.70763C297.72 -3.27085 299.304 -1.05246 302.472 -1.05246ZM335.966 33.5018C332.024 33.5018 328.868 32.2735 326.498 29.817C324.128 27.3605 322.943 24.0893 322.943 20.0035C322.943 15.6419 324.19 12.12 326.685 9.4379C329.18 6.75578 332.586 5.41471 336.902 5.41471C341.143 5.41471 344.387 6.66804 346.632 9.1747C348.877 11.6814 350 14.9525 350 18.9883C350 23.5002 348.69 27.0472 346.071 29.629C343.476 32.2109 340.108 33.5018 335.966 33.5018ZM336.415 26.2826C339.659 26.2826 341.28 23.964 341.28 19.3267C341.28 14.8648 339.746 12.6339 336.677 12.6339C333.334 12.6339 331.663 14.9651 331.663 19.6275C331.663 24.0642 333.247 26.2826 336.415 26.2826Z" fill="url(#paint0_linear_8056_335)" fill-opacity="0.5"/>
<path d="M58.5558 56.2945L56.9301 58.8996C56.2364 59.9851 55.6078 60.6364 55.0442 60.8535C54.5239 61.114 53.8953 61.0271 53.1583 60.5929L45.6798 55.9688C44.9861 55.4912 44.6176 54.9485 44.5742 54.3406C44.5309 53.7328 44.856 52.8861 45.5497 51.8006L47.1755 49.1955L96.9239 -31.238L98.5497 -33.8431C99.2434 -34.972 99.872 -35.645 100.436 -35.8621C100.999 -36.1226 101.649 -36.014 102.387 -35.5364L109.865 -30.8472C110.602 -30.413 110.992 -29.892 111.036 -29.2841C111.079 -28.6763 110.754 -27.8079 110.06 -26.679L108.434 -24.0739L58.5558 56.2945ZM47.6307 12.7888C40.7808 12.7888 35.2965 10.6612 31.1779 6.40619C27.0593 2.15114 25 -3.51502 25 -10.5923C25 -18.1472 27.1677 -24.2475 31.5031 -28.8934C35.8384 -33.5392 41.7562 -35.8621 49.2564 -35.8621C56.6266 -35.8621 62.2626 -33.6911 66.1644 -29.3493C70.0663 -25.0074 72.0172 -19.3412 72.0172 -12.3508C72.0172 -4.53537 69.7411 1.60841 65.189 6.08055C60.6802 10.5527 54.8274 12.7888 47.6307 12.7888ZM48.411 0.284131C54.047 0.284131 56.865 -3.73212 56.865 -11.7646C56.865 -19.4932 54.1988 -23.3574 48.8663 -23.3574C43.0569 -23.3574 40.1521 -19.3195 40.1521 -11.2436C40.1521 -3.55844 42.9051 0.284131 48.411 0.284131ZM106.613 60.137C99.7636 60.137 94.2793 58.0095 90.1607 53.7545C86.0421 49.4994 83.9828 43.8333 83.9828 36.756C83.9828 29.2011 86.1505 23.1007 90.4859 18.4549C94.8213 13.8091 100.739 11.4862 108.239 11.4862C115.609 11.4862 121.245 13.6571 125.147 17.999C129.049 22.3409 131 28.0071 131 34.9975C131 42.8129 128.724 48.9567 124.172 53.4288C119.663 57.901 113.81 60.137 106.613 60.137ZM107.394 47.6324C113.03 47.6324 115.848 43.6162 115.848 35.5837C115.848 27.8551 113.182 23.9908 107.849 23.9908C102.04 23.9908 99.135 28.0288 99.135 36.1047C99.135 43.7898 101.888 47.6324 107.394 47.6324Z" fill="url(#paint1_linear_8056_335)" fill-opacity="0.5"/>
<rect x="-19" y="-15" width="422" height="67" fill="white" fill-opacity="0.35"/>
</g>
<defs>
<linearGradient id="paint0_linear_8056_335" x1="319.215" y1="-4.85714" x2="315.206" y2="23.1402" gradientUnits="userSpaceOnUse">
<stop stop-color="#60BD67"/>
<stop offset="1" stop-color="#A6D339"/>
</linearGradient>
<linearGradient id="paint1_linear_8056_335" x1="84.7791" y1="-2.23418" x2="70.6318" y2="42.2135" gradientUnits="userSpaceOnUse">
<stop stop-color="#A6D339"/>
<stop offset="1" stop-color="#60BD67"/>
</linearGradient>
<clipPath id="clip0_8056_335">
<rect width="390" height="36" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<div class="marquee-content">
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
</div>
<div class="marquee-content">
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: #8401EA;
width: 100%;
height: 36px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
}
.marquee-svg-background {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.marquee-svg-background svg {
min-height: 100%;
object-fit: cover;
}
.marquee-text {
color: #FFF;
font-size: 13px;
line-height: 16px;
white-space: nowrap;
display: inline-block;
padding-right: 24px;
font-weight: 600;
}
.marquee-content {
animation: marquee 12s linear infinite;
display: inline-block;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-svg-background">
<svg viewBox="0 0 390 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_8057_344)">
<rect width="390" height="36" fill="#8401EA"/>
<g filter="url(#filter0_f_8057_344)">
<ellipse cx="294" cy="-62" rx="76" ry="74" fill="#FE4087"/>
</g>
<g filter="url(#filter1_f_8057_344)">
<ellipse cx="117.5" cy="92.5" rx="86.5" ry="80.5" fill="#FE4087"/>
</g>
</g>
<defs>
<filter id="filter0_f_8057_344" x="178" y="-176" width="232" height="228" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_8057_344"/>
</filter>
<filter id="filter1_f_8057_344" x="-9" y="-28" width="253" height="241" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_8057_344"/>
</filter>
<clipPath id="clip0_8057_344">
<rect width="390" height="36" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<div class="marquee-content">
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
</div>
<div class="marquee-content">
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: #FE3030;
width: 100%;
height: 34px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
}
.marquee-svg-background {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.marquee-svg-background svg {
min-height: 100%;
object-fit: cover;
}
.marquee-text {
color: #FFF;
font-size: 13px;
line-height: 16px;
white-space: nowrap;
display: inline-block;
}
.marquee-content, .marquee-content-double {
width: 100%;
animation: marquee 8s linear infinite;
display: inline-block;
}
.marquee-content-double {
animation-delay: -4s;
}
@keyframes marquee {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-svg-background">
<svg viewBox="0 0 390 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_8057_352)">
<rect width="390" height="34" fill="#FE3030"/>
<circle cx="295.5" cy="71.5" r="59.5" fill="#F32424"/>
<circle cx="79" cy="-12" r="48" fill="white" fill-opacity="0.09"/>
<path d="M41.8724 44.246L40.2313 46.878C39.5311 47.9746 38.8965 48.6326 38.3276 48.8519C37.8025 49.1151 37.1679 49.0274 36.4239 48.5887L28.8748 43.917C28.1746 43.4344 27.8027 42.8861 27.7589 42.272C27.7151 41.6578 28.0434 40.8024 28.7436 39.7058L30.3847 37.0738L80.6025 -44.1889L82.2436 -46.8209C82.9438 -47.9614 83.5783 -48.6413 84.1472 -48.8607C84.7162 -49.1239 85.3726 -49.0142 86.1166 -48.5317L93.6656 -43.7941C94.4096 -43.3554 94.8035 -42.829 94.8472 -42.2149C94.891 -41.6008 94.5628 -40.7234 93.8626 -39.5829L92.2215 -36.9509L41.8724 44.246ZM30.8442 0.291744C23.9297 0.291744 18.3937 -1.85771 14.2362 -6.15663C10.0787 -10.4555 8 -16.1801 8 -23.3304C8 -30.9631 10.1881 -37.1264 14.5644 -41.8201C18.9407 -46.5138 24.9143 -48.8607 32.4853 -48.8607C39.9249 -48.8607 45.6141 -46.6673 49.5528 -42.2807C53.4914 -37.894 55.4607 -32.1695 55.4607 -25.107C55.4607 -17.211 53.1632 -11.0039 48.5681 -6.48563C44.0168 -1.96738 38.1088 0.291744 30.8442 0.291744ZM31.6319 -12.3418C37.3211 -12.3418 40.1656 -16.3995 40.1656 -24.5148C40.1656 -32.323 37.4742 -36.2271 32.0914 -36.2271C26.2272 -36.2271 23.2951 -32.1475 23.2951 -23.9884C23.2951 -16.224 26.074 -12.3418 31.6319 -12.3418ZM90.3834 48.1282C83.4689 48.1282 77.9329 45.9787 73.7755 41.6798C69.618 37.3809 67.5393 31.6563 67.5393 24.506C67.5393 16.8733 69.7274 10.71 74.1037 6.01632C78.48 1.32261 84.4536 -1.02425 92.0245 -1.02425C99.4642 -1.02425 105.153 1.16907 109.092 5.55572C113.031 9.94237 115 15.6669 115 22.7295C115 30.6254 112.702 36.8325 108.107 41.3508C103.556 45.869 97.6481 48.1282 90.3834 48.1282ZM91.1712 35.4946C96.8603 35.4946 99.7049 31.437 99.7049 23.3217C99.7049 15.5134 97.0135 11.6093 91.6307 11.6093C85.7665 11.6093 82.8344 15.6889 82.8344 23.848C82.8344 31.6124 85.6133 35.4946 91.1712 35.4946Z" fill="#FE3030"/>
<path d="M294.988 91.7124L293.147 94.6398C292.362 95.8595 291.65 96.5914 291.012 96.8353C290.423 97.1281 289.712 97.0305 288.877 96.5426L280.411 91.3464C279.626 90.8097 279.209 90.1999 279.16 89.5168C279.11 88.8337 279.479 87.8823 280.264 86.6626L282.104 83.7351L338.423 -6.64885L340.264 -9.57627C341.049 -10.8448 341.761 -11.6011 342.399 -11.845C343.037 -12.1378 343.773 -12.0158 344.607 -11.4791L353.074 -6.20974C353.908 -5.72184 354.35 -5.13635 354.399 -4.45329C354.448 -3.77023 354.08 -2.79442 353.294 -1.52587L351.454 1.40154L294.988 91.7124ZM282.62 42.8245C274.865 42.8245 268.656 40.4338 263.994 35.6523C259.331 30.8709 257 24.5037 257 16.5509C257 8.06142 259.454 1.20638 264.362 -4.01418C269.27 -9.23474 275.969 -11.845 284.46 -11.845C292.804 -11.845 299.184 -9.4055 303.601 -4.52648C308.018 0.352552 310.227 6.71968 310.227 14.5749C310.227 23.3572 307.65 30.261 302.497 35.2864C297.393 40.3118 290.767 42.8245 282.62 42.8245ZM283.503 28.7729C289.883 28.7729 293.074 24.2598 293.074 15.2336C293.074 6.54892 290.055 2.20658 284.018 2.20658C277.442 2.20658 274.153 6.74408 274.153 15.8191C274.153 24.455 277.27 28.7729 283.503 28.7729ZM349.393 96.0303C341.638 96.0303 335.429 93.6396 330.767 88.8581C326.104 84.0767 323.773 77.7095 323.773 69.7567C323.773 61.2672 326.227 54.4122 331.135 49.1916C336.043 43.9711 342.742 41.3608 351.233 41.3608C359.577 41.3608 365.957 43.8003 370.374 48.6793C374.791 53.5584 377 59.9255 377 67.7807C377 76.563 374.423 83.4668 369.27 88.4922C364.166 93.5176 357.54 96.0303 349.393 96.0303ZM350.276 81.9787C356.656 81.9787 359.847 77.4656 359.847 68.4394C359.847 59.7547 356.828 55.4124 350.791 55.4124C344.215 55.4124 340.926 59.9499 340.926 69.0249C340.926 77.6608 344.043 81.9787 350.276 81.9787Z" fill="#FE3030"/>
</g>
<defs>
<clipPath id="clip0_8057_352">
<rect width="390" height="34" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<div class="marquee-content">
<span class="marquee-text">Самовывоз - бесплатно. Акция 1+1=3</span>
</div>
<div class="marquee-content-double">
<span class="marquee-text">Самовывоз - бесплатно. Акция 1+1=3</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: linear-gradient(90deg, #292929 0%, #212121 100%);
width: 100%;
height: 34px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
}
.marquee-svg-background {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.marquee-svg-background svg {
min-height: 100%;
object-fit: cover;
}
.marquee-text {
color: #FFF;
font-size: 13px;
line-height: 16px;
white-space: nowrap;
display: inline-block;
font-weight: 600;
text-transform: uppercase;
}
.marquee-text.yellow {
color: #292929;
border-radius: 4px;
background: #FFE406;
display: flex;
padding: 1px 4px;
justify-content: center;
align-items: center;
}
.marquee-content, .marquee-content-double {
animation: marquee 8s linear infinite;
width: 100%;
flex-shrink: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.marquee-content-double {
animation-delay: -4s;
}
@keyframes marquee {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-svg-background">
<svg viewBox="0 0 390 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_8057_352)">
<rect width="390" height="34" fill="#FE3030"/>
<circle cx="295.5" cy="71.5" r="59.5" fill="#F32424"/>
<circle cx="79" cy="-12" r="48" fill="white" fill-opacity="0.09"/>
<path d="M41.8724 44.246L40.2313 46.878C39.5311 47.9746 38.8965 48.6326 38.3276 48.8519C37.8025 49.1151 37.1679 49.0274 36.4239 48.5887L28.8748 43.917C28.1746 43.4344 27.8027 42.8861 27.7589 42.272C27.7151 41.6578 28.0434 40.8024 28.7436 39.7058L30.3847 37.0738L80.6025 -44.1889L82.2436 -46.8209C82.9438 -47.9614 83.5783 -48.6413 84.1472 -48.8607C84.7162 -49.1239 85.3726 -49.0142 86.1166 -48.5317L93.6656 -43.7941C94.4096 -43.3554 94.8035 -42.829 94.8472 -42.2149C94.891 -41.6008 94.5628 -40.7234 93.8626 -39.5829L92.2215 -36.9509L41.8724 44.246ZM30.8442 0.291744C23.9297 0.291744 18.3937 -1.85771 14.2362 -6.15663C10.0787 -10.4555 8 -16.1801 8 -23.3304C8 -30.9631 10.1881 -37.1264 14.5644 -41.8201C18.9407 -46.5138 24.9143 -48.8607 32.4853 -48.8607C39.9249 -48.8607 45.6141 -46.6673 49.5528 -42.2807C53.4914 -37.894 55.4607 -32.1695 55.4607 -25.107C55.4607 -17.211 53.1632 -11.0039 48.5681 -6.48563C44.0168 -1.96738 38.1088 0.291744 30.8442 0.291744ZM31.6319 -12.3418C37.3211 -12.3418 40.1656 -16.3995 40.1656 -24.5148C40.1656 -32.323 37.4742 -36.2271 32.0914 -36.2271C26.2272 -36.2271 23.2951 -32.1475 23.2951 -23.9884C23.2951 -16.224 26.074 -12.3418 31.6319 -12.3418ZM90.3834 48.1282C83.4689 48.1282 77.9329 45.9787 73.7755 41.6798C69.618 37.3809 67.5393 31.6563 67.5393 24.506C67.5393 16.8733 69.7274 10.71 74.1037 6.01632C78.48 1.32261 84.4536 -1.02425 92.0245 -1.02425C99.4642 -1.02425 105.153 1.16907 109.092 5.55572C113.031 9.94237 115 15.6669 115 22.7295C115 30.6254 112.702 36.8325 108.107 41.3508C103.556 45.869 97.6481 48.1282 90.3834 48.1282ZM91.1712 35.4946C96.8603 35.4946 99.7049 31.437 99.7049 23.3217C99.7049 15.5134 97.0135 11.6093 91.6307 11.6093C85.7665 11.6093 82.8344 15.6889 82.8344 23.848C82.8344 31.6124 85.6133 35.4946 91.1712 35.4946Z" fill="#FE3030"/>
<path d="M294.988 91.7124L293.147 94.6398C292.362 95.8595 291.65 96.5914 291.012 96.8353C290.423 97.1281 289.712 97.0305 288.877 96.5426L280.411 91.3464C279.626 90.8097 279.209 90.1999 279.16 89.5168C279.11 88.8337 279.479 87.8823 280.264 86.6626L282.104 83.7351L338.423 -6.64885L340.264 -9.57627C341.049 -10.8448 341.761 -11.6011 342.399 -11.845C343.037 -12.1378 343.773 -12.0158 344.607 -11.4791L353.074 -6.20974C353.908 -5.72184 354.35 -5.13635 354.399 -4.45329C354.448 -3.77023 354.08 -2.79442 353.294 -1.52587L351.454 1.40154L294.988 91.7124ZM282.62 42.8245C274.865 42.8245 268.656 40.4338 263.994 35.6523C259.331 30.8709 257 24.5037 257 16.5509C257 8.06142 259.454 1.20638 264.362 -4.01418C269.27 -9.23474 275.969 -11.845 284.46 -11.845C292.804 -11.845 299.184 -9.4055 303.601 -4.52648C308.018 0.352552 310.227 6.71968 310.227 14.5749C310.227 23.3572 307.65 30.261 302.497 35.2864C297.393 40.3118 290.767 42.8245 282.62 42.8245ZM283.503 28.7729C289.883 28.7729 293.074 24.2598 293.074 15.2336C293.074 6.54892 290.055 2.20658 284.018 2.20658C277.442 2.20658 274.153 6.74408 274.153 15.8191C274.153 24.455 277.27 28.7729 283.503 28.7729ZM349.393 96.0303C341.638 96.0303 335.429 93.6396 330.767 88.8581C326.104 84.0767 323.773 77.7095 323.773 69.7567C323.773 61.2672 326.227 54.4122 331.135 49.1916C336.043 43.9711 342.742 41.3608 351.233 41.3608C359.577 41.3608 365.957 43.8003 370.374 48.6793C374.791 53.5584 377 59.9255 377 67.7807C377 76.563 374.423 83.4668 369.27 88.4922C364.166 93.5176 357.54 96.0303 349.393 96.0303ZM350.276 81.9787C356.656 81.9787 359.847 77.4656 359.847 68.4394C359.847 59.7547 356.828 55.4124 350.791 55.4124C344.215 55.4124 340.926 59.9499 340.926 69.0249C340.926 77.6608 344.043 81.9787 350.276 81.9787Z" fill="#FE3030"/>
</g>
<defs>
<clipPath id="clip0_8057_352">
<rect width="390" height="34" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<div class="marquee-content">
<span class="marquee-text">Самовывоз - бесплатно. </span>
<span class="marquee-text yellow"> Акция 1+1=3</span>
</div>
<div class="marquee-content-double">
<span class="marquee-text">Самовывоз - бесплатно. </span>
<span class="marquee-text yellow"> Акция 1+1=3</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: #8401EA;
width: 100%;
height: 36px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
}
.marquee-svg-background {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.marquee-svg-background svg {
min-height: 100%;
object-fit: cover;
}
.marquee-text {
color: #292929;
font-size: 13px;
line-height: 16px;
white-space: nowrap;
display: inline-block;
padding-right: 32px;
}
.marquee-text.bold {
font-weight: 600;
}
.marquee-content {
animation: marquee 12s linear infinite;
display: inline-block;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-svg-background">
<svg viewBox="0 0 390 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_8060_362)">
<rect width="390" height="36" fill="#FFCC33"/>
<path d="M365.702 73.1054C350.737 69.0957 337.885 62.111 327.144 52.1513C316.649 42.2574 309.295 30.4512 305.083 16.7329C301.116 3.08034 301.296 -11.8215 305.624 -27.9727L335.623 -139.93C336.672 -143.845 336.642 -147.657 335.532 -151.364C334.421 -155.071 332.534 -158.331 329.87 -161.143C327.205 -163.955 323.91 -165.887 319.985 -166.939C316.06 -167.991 312.241 -167.965 308.527 -166.862C304.813 -165.758 301.549 -163.879 298.734 -161.224C296.164 -158.503 294.355 -155.184 293.306 -151.269L243.242 35.5712L182.894 19.401L231.777 -163.034C235.908 -178.451 242.982 -191.113 252.998 -201.018C263.26 -210.859 275.442 -217.561 289.544 -221.127C303.891 -224.626 318.792 -224.306 334.247 -220.164C349.947 -215.958 363.012 -208.785 373.442 -198.646C383.872 -188.507 391.07 -176.612 395.037 -162.959C399.004 -149.307 398.922 -134.772 394.791 -119.355L364.792 -7.39764C363.677 -3.23749 363.675 0.696184 364.785 4.40334C365.895 8.1105 367.66 11.3373 370.079 14.0838C372.809 16.6514 376.014 18.4282 379.694 19.4141C383.619 20.4659 387.406 20.5625 391.054 19.704C395.013 18.6665 398.4 16.8201 401.215 14.1646C404.03 11.5092 405.995 8.10139 407.109 3.94124L437.108 -108.016C441.239 -123.433 448.435 -136.062 458.697 -145.902C468.959 -155.742 481.14 -162.444 495.242 -166.01C509.589 -169.509 524.368 -169.222 539.578 -165.146C555.278 -160.939 568.22 -153.799 578.405 -143.726C588.835 -133.588 596.033 -121.692 600 -108.04C603.967 -94.3871 603.885 -79.8522 599.754 -64.4352L550.87 118L490.522 101.83L540.684 -85.3774C541.733 -89.2928 541.67 -92.9818 540.494 -96.4442C539.63 -100.086 537.865 -103.312 535.2 -106.125C532.536 -108.937 529.241 -110.869 525.316 -111.921C521.636 -112.907 517.817 -112.881 513.858 -111.843C510.144 -110.74 506.88 -108.861 504.065 -106.205C501.315 -103.795 499.416 -100.632 498.367 -96.7163L468.27 15.608C463.942 31.7592 456.525 44.722 446.018 54.4963C435.511 64.2707 423.239 70.8182 409.203 74.1389C395.167 77.4596 380.666 77.115 365.702 73.1054Z" fill="url(#paint0_linear_8060_362)"/>
<path d="M74.8614 77.6635C61.9178 85.1365 48.3853 89.1394 34.2639 89.6723C20.3547 90.0826 7.28424 87.0453 -4.94749 80.5604C-16.967 73.953 -27.0097 63.6641 -35.0754 49.6939L-90.9855 -47.1453C-92.9409 -50.5321 -95.5616 -53.1113 -98.8479 -54.8829C-102.134 -56.6545 -105.645 -57.5907 -109.381 -57.6915C-113.118 -57.7922 -116.683 -56.8625 -120.078 -54.9024C-123.473 -52.9423 -126.061 -50.3192 -127.842 -47.0332C-129.623 -43.7472 -130.568 -40.2384 -130.677 -36.5066C-130.573 -32.8973 -129.544 -29.3993 -127.589 -26.0126L-83.3295 48.2004L-135.529 78.3375L-177.588 7.93467C-185.287 -5.40057 -189.099 -18.8634 -189.024 -32.4538C-188.736 -46.1668 -184.998 -59.0493 -177.811 -71.1015C-170.411 -83.2763 -160.027 -93.2227 -146.659 -100.941C-133.078 -108.781 -119.272 -112.801 -105.241 -113C-91.2096 -113.198 -78.1842 -109.994 -66.1647 -103.386C-54.1451 -96.779 -44.2858 -86.8077 -36.5867 -73.4724L19.3234 23.3668C21.401 26.9652 24.0828 29.6502 27.3691 31.4219C30.6553 33.1935 34.0604 34.1909 37.5844 34.4142C41.1983 34.3033 44.5968 33.329 47.7796 31.4914C51.1747 29.5312 53.8237 27.014 55.7267 23.9397C57.7198 20.5312 58.7707 16.9611 58.8795 13.2293C58.9883 9.49752 58.004 5.83241 55.9265 2.23401L0.0163118 -94.6052C-7.68279 -107.94 -11.3886 -121.465 -11.101 -135.177C-10.8134 -148.89 -7.07577 -161.773 0.111988 -173.825C7.51193 -186 17.7899 -195.885 30.9458 -203.481C44.526 -211.321 58.2257 -215.28 72.0449 -215.356C86.0763 -215.554 99.1018 -212.35 111.121 -205.743C123.141 -199.135 133 -189.164 140.699 -175.829L158.888 -171.955L106.689 -141.818L86.1171 -149.819C84.1618 -153.206 81.6021 -155.679 78.4381 -157.239C75.3641 -159.133 71.959 -160.131 68.2228 -160.231C64.4867 -160.332 60.9211 -159.402 57.526 -157.442C54.3431 -155.605 51.7552 -152.982 49.7622 -149.573C47.9814 -146.287 47.0365 -142.778 46.9277 -139.046C46.6966 -135.526 47.5587 -132.073 49.5141 -128.686L105.608 -31.5294C113.673 -17.5592 117.456 -3.65635 116.956 10.1791C116.457 24.0145 112.552 36.8525 105.242 48.6931C97.9319 60.5336 87.8051 70.1904 74.8614 77.6635Z" fill="url(#paint1_linear_8060_362)"/>
</g>
<defs>
<linearGradient id="paint0_linear_8060_362" x1="304.5" y1="77" x2="345.078" y2="-38.2967" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white" stop-opacity="0.34"/>
</linearGradient>
<linearGradient id="paint1_linear_8060_362" x1="23.4862" y1="-27.7228" x2="99" y2="79.0001" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white" stop-opacity="0.34"/>
</linearGradient>
<clipPath id="clip0_8060_362">
<rect width="390" height="36" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<div class="marquee-content">
<div class="marquee-text">Самовывоз - бесплатно. <span class="marquee-text bold">Акция 1+1=3</span></div>
<div class="marquee-text">Самовывоз - бесплатно. <span class="marquee-text bold">Акция 1+1=3</span></div>
<div class="marquee-text">Самовывоз - бесплатно. <span class="marquee-text bold">Акция 1+1=3</span></div>
<div class="marquee-text">Самовывоз - бесплатно. <span class="marquee-text bold">Акция 1+1=3</span></div>
</div>
<div class="marquee-content">
<div class="marquee-text">Самовывоз - бесплатно. <span class="marquee-text bold">Акция 1+1=3</span></div>
<div class="marquee-text">Самовывоз - бесплатно. <span class="marquee-text bold">Акция 1+1=3</span></div>
<div class="marquee-text">Самовывоз - бесплатно. <span class="marquee-text bold">Акция 1+1=3</span></div>
<div class="marquee-text">Самовывоз - бесплатно. <span class="marquee-text bold">Акция 1+1=3</span></div>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: #8401EA;
width: 100%;
height: 36px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
}
.marquee-svg-background {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.marquee-svg-background svg {
min-height: 100%;
object-fit: cover;
}
.marquee-text {
color: #FFF;
font-size: 13px;
line-height: 16px;
white-space: nowrap;
display: flex;
align-items: center;
font-weight: 600;
}
.marquee-marker {
width: 4px;
height: 4px;
border-radius: 2px;
background-color: #FFF;
margin: 0 16px;
display: inline-block;
}
.marquee-content {
animation: marquee 16s linear infinite;
display: flex;
align-items: center;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-svg-background">
<svg viewBox="0 0 390 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_8022_313)">
<rect width="390" height="36" fill="url(#paint0_linear_8022_313)"/>
<g filter="url(#filter0_f_8022_313)">
<ellipse cx="10.5" cy="145.5" rx="117.5" ry="109.5" fill="#1563B5"/>
</g>
<g filter="url(#filter1_f_8022_313)">
<ellipse cx="418" cy="-119.5" rx="161" ry="149.5" fill="#5BC8E0"/>
</g>
<g opacity="0.18" clip-path="url(#clip1_8022_313)">
<path d="M74.5013 -3.92498L72.5548 -0.55354L74.4988 2.81596L78.3888 2.81472L80.3353 -0.556721L78.3914 -3.92622L74.5013 -3.92498Z" fill="white"/>
<path d="M94.9215 19.6536L89.2488 18.1276L87.064 14.3364L92.5423 15.8033C92.7638 15.8628 92.9949 15.878 93.2223 15.8481C93.4497 15.8182 93.669 15.7436 93.8676 15.6288C94.0662 15.514 94.2402 15.3612 94.3796 15.179C94.519 14.9969 94.6211 14.789 94.6801 14.5674C94.7391 14.3457 94.7537 14.1146 94.7233 13.8872C94.6928 13.6599 94.6178 13.4408 94.5025 13.2425C94.3872 13.0441 94.234 12.8705 94.0515 12.7315C93.869 12.5925 93.6609 12.4909 93.4391 12.4324L84.5855 10.0524L84.4434 9.80925L89.4197 1.18989L89.7017 1.19101L96.1896 7.66834C96.2939 7.78166 96.4147 7.87864 96.5479 7.956C96.8833 8.1464 97.2719 8.22158 97.6542 8.17002C98.0364 8.11846 98.3912 7.943 98.6642 7.67052C98.826 7.50855 98.9543 7.31627 99.0417 7.10468C99.1291 6.89308 99.1739 6.66633 99.1736 6.4374C99.1732 6.20847 99.1278 5.98185 99.0398 5.77051C98.9518 5.55916 98.823 5.36725 98.6607 5.20573L94.651 1.19539L99.0266 1.19186L103.185 5.34163C103.291 5.45205 103.414 5.54565 103.549 5.61923C103.916 5.82937 104.346 5.89917 104.76 5.81564C105.174 5.7321 105.544 5.50093 105.8 5.16515C106.057 4.82937 106.183 4.41186 106.154 3.99035C106.126 3.56884 105.945 3.17205 105.646 2.87383L102.228 -0.552835L105.65 -3.9868C105.977 -4.31411 106.16 -4.75767 106.159 -5.21991C106.158 -5.68215 105.974 -6.1252 105.647 -6.45159C105.319 -6.77798 104.876 -6.96097 104.414 -6.96032C103.951 -6.95967 103.508 -6.77542 103.182 -6.4481L99.0278 -2.30647L94.6521 -2.30294L98.6627 -6.31196C98.8259 -6.4744 98.9555 -6.66749 99.0439 -6.88015C99.1323 -7.0928 99.1778 -7.32083 99.1778 -7.55112C99.1779 -7.78142 99.1324 -8.00945 99.044 -8.22213C98.9557 -8.4348 98.8262 -8.62792 98.663 -8.7904C98.4997 -8.95288 98.306 -9.08151 98.093 -9.16891C97.8799 -9.2563 97.6517 -9.30075 97.4214 -9.29969C97.1911 -9.29862 96.9633 -9.25207 96.751 -9.16271C96.5388 -9.07334 96.3462 -8.94293 96.1845 -8.77895L89.7028 -2.30735L89.4209 -2.30846L84.4446 -10.9147L84.5903 -11.167L93.442 -13.5387C93.6636 -13.5981 93.8713 -13.7006 94.0533 -13.8403C94.2353 -13.9799 94.388 -14.1541 94.5027 -14.3528C94.6174 -14.5515 94.6918 -14.7708 94.7217 -14.9983C94.7517 -15.2257 94.7365 -15.4569 94.6771 -15.6785C94.6177 -15.9 94.5152 -16.1078 94.3755 -16.2898C94.2359 -16.4717 94.0617 -16.6244 93.863 -16.7391C93.6643 -16.8538 93.445 -16.9282 93.2175 -16.9582C92.9901 -16.9881 92.7589 -16.9729 92.5374 -16.9135L87.0609 -15.4461L89.2521 -19.2413L94.9198 -20.7599C95.1414 -20.8193 95.3491 -20.9218 95.5311 -21.0615C95.7131 -21.2011 95.8658 -21.3753 95.9805 -21.574C96.0952 -21.7727 96.1696 -21.992 96.1995 -22.2195C96.2294 -22.4469 96.2143 -22.678 96.1549 -22.8996C96.0954 -23.1212 95.993 -23.329 95.8533 -23.5109C95.7136 -23.6929 95.5395 -23.8456 95.3408 -23.9603C95.1421 -24.075 94.9227 -24.1494 94.6953 -24.1794C94.4678 -24.2093 94.2367 -24.1941 94.0151 -24.1347L89.3346 -22.8806L88.0805 -27.561C87.9606 -28.0085 87.6679 -28.3901 87.2666 -28.6218C86.8654 -28.8535 86.3886 -28.9164 85.941 -28.7965C85.4935 -28.6766 85.1119 -28.3839 84.8802 -27.9827C84.6485 -27.5814 84.5856 -27.1046 84.7055 -26.657L86.2242 -20.9893L84.033 -17.1941L82.5656 -22.6706C82.5063 -22.8923 82.4038 -23.1 82.2642 -23.282C82.1246 -23.464 81.9504 -23.6168 81.7518 -23.7315C81.5531 -23.8462 81.3338 -23.9207 81.1063 -23.9507C80.8789 -23.9807 80.6478 -23.9655 80.4262 -23.9062C80.2046 -23.8468 79.9968 -23.7444 79.8148 -23.6048C79.6328 -23.4651 79.48 -23.291 79.3653 -23.0923C79.2506 -22.8937 79.1761 -22.6744 79.1461 -22.4469C79.1162 -22.2195 79.1313 -21.9883 79.1906 -21.7667L81.5625 -12.915L81.4168 -12.6627L71.4755 -12.6692L71.3336 -12.9128L73.6972 -21.762C73.7581 -21.9839 73.7746 -22.2157 73.7458 -22.4441C73.7169 -22.6724 73.6432 -22.8928 73.529 -23.0926C73.4147 -23.2924 73.2621 -23.4677 73.08 -23.6084C72.8978 -23.7491 72.6897 -23.8524 72.4675 -23.9125C72.2453 -23.9726 72.0135 -23.9882 71.7852 -23.9584C71.557 -23.9287 71.3369 -23.8542 71.1375 -23.7392C70.9382 -23.6242 70.7635 -23.4709 70.6235 -23.2882C70.4835 -23.1056 70.3809 -22.897 70.3217 -22.6746L68.8546 -17.1972L68.3767 -18.0243L66.6698 -20.9883L68.1898 -26.6508C68.309 -27.0978 68.2461 -27.5738 68.015 -27.9746C67.7839 -28.3753 67.4033 -28.6682 66.9568 -28.7889C66.5102 -28.9096 66.0339 -28.8485 65.6323 -28.6188C65.2308 -28.3891 64.9366 -28.0096 64.8143 -27.5634L63.5516 -22.8826L58.8811 -24.1394C58.4722 -24.2489 58.0375 -24.2063 57.6575 -24.0196C57.2776 -23.8328 56.9784 -23.5146 56.8153 -23.1239C56.6522 -22.7333 56.6363 -22.2967 56.7706 -21.8953C56.905 -21.4938 57.1804 -21.1548 57.5457 -20.9409C57.6769 -20.8609 57.8194 -20.8012 57.9685 -20.7639L63.6408 -19.2381L65.348 -16.2747L65.8256 -15.447L60.3481 -16.9141C60.1271 -16.9739 59.8965 -16.9895 59.6694 -16.9601C59.4424 -16.9307 59.2234 -16.8567 59.0249 -16.7425C58.8265 -16.6283 58.6525 -16.4761 58.513 -16.2946C58.3735 -16.1131 58.2711 -15.9059 58.2118 -15.6847C58.1123 -15.3121 58.1378 -14.9171 58.2842 -14.5602C58.4307 -14.2034 58.6901 -13.9044 59.0227 -13.7091C59.1563 -13.6325 59.3007 -13.5764 59.451 -13.5427L68.3045 -11.1627L68.4464 -10.9191L63.47 -2.29969L63.1884 -2.30126L56.7064 -8.78898C56.3749 -9.1141 55.9287 -9.29555 55.4644 -9.29402C55.0001 -9.29249 54.5551 -9.10812 54.2258 -8.78083C54.064 -8.61891 53.9357 -8.42667 53.8483 -8.2151C53.7609 -8.00353 53.7161 -7.7768 53.7164 -7.54789C53.7168 -7.31899 53.7623 -7.09239 53.8503 -6.88109C53.9384 -6.6698 54.0672 -6.47795 54.2296 -6.31653L58.2386 -2.30598L53.8629 -2.30244L49.7055 -6.45194C49.3781 -6.77833 48.9346 -6.96132 48.4723 -6.96067C48.0101 -6.96001 47.5671 -6.77576 47.2407 -6.44844C46.9143 -6.12112 46.7313 -5.67756 46.7319 -5.21532C46.7326 -4.75308 46.9168 -4.31003 47.2442 -3.98364L50.6621 -0.557449L47.2455 2.86667C47.0815 3.02823 46.9512 3.22076 46.8622 3.43309C46.7732 3.64542 46.7272 3.87331 46.727 4.10354C46.7268 4.33377 46.7724 4.56174 46.861 4.77423C46.9496 4.98672 47.0796 5.17948 47.2433 5.34133C47.35 5.45165 47.4728 5.54515 47.6076 5.61864C47.9397 5.80988 48.3257 5.88602 48.7056 5.83524C49.0854 5.78447 49.4379 5.6096 49.7081 5.33785L53.8618 1.19593L58.2374 1.1924L54.2273 5.2017C54.0655 5.36363 53.9371 5.5559 53.8497 5.7675C53.7622 5.9791 53.7174 6.20587 53.7177 6.43483C53.718 6.66378 53.7635 6.89043 53.8516 7.10178C53.9396 7.31313 54.0685 7.50503 54.2308 7.6665C54.3353 7.77996 54.4562 7.87704 54.5896 7.95446C54.925 8.14473 55.3136 8.21981 55.6957 8.16819C56.0779 8.11658 56.4326 7.94112 56.7055 7.66869L63.1872 1.19709L63.4691 1.1982L68.4454 9.80439L68.2997 10.0567L59.448 12.4285C59.0005 12.5485 58.6189 12.8413 58.3873 13.2426C58.1557 13.6439 58.093 14.1207 58.2129 14.5682C58.3329 15.0158 58.6257 15.3973 59.027 15.6289C59.4283 15.8605 59.9051 15.9233 60.3526 15.8033L65.829 14.3359L63.6379 18.1311L57.9703 19.6496C57.7488 19.709 57.541 19.8115 57.359 19.9511C57.177 20.0908 57.0244 20.265 56.9097 20.4637C56.795 20.6624 56.7206 20.8817 56.6906 21.1092C56.6607 21.3366 56.6759 21.5677 56.7353 21.7893C56.7947 22.0109 56.8972 22.2186 57.0368 22.4006C57.1765 22.5826 57.3507 22.7353 57.5494 22.85C57.7481 22.9647 57.9674 23.0391 58.1948 23.069C58.4223 23.099 58.6534 23.0838 58.875 23.0244L63.5554 21.7702L64.8095 26.4507C64.8686 26.6724 64.9709 26.8804 65.1105 27.0626C65.2501 27.2448 65.4243 27.3976 65.6231 27.5124C65.8218 27.6272 66.0413 27.7016 66.2689 27.7314C66.4965 27.7612 66.7277 27.7458 66.9493 27.6861C67.1716 27.6278 67.3801 27.5261 67.5627 27.3867C67.7454 27.2474 67.8985 27.0732 68.0134 26.8742C68.1283 26.6752 68.2026 26.4555 68.2319 26.2276C68.2613 25.9997 68.2452 25.7683 68.1845 25.5467L66.6658 19.8791L68.8569 16.0839L70.3244 21.5604C70.3835 21.7821 70.4858 21.9901 70.6254 22.1723C70.765 22.3545 70.9392 22.5073 71.1379 22.6221C71.3367 22.7369 71.5562 22.8113 71.7838 22.8411C72.0114 22.8709 72.2426 22.8555 72.4642 22.7958C72.6865 22.7375 72.8949 22.6358 73.0776 22.4964C73.2602 22.3571 73.4134 22.1829 73.5283 21.9839C73.6432 21.7849 73.7174 21.5652 73.7468 21.3373C73.7762 21.1094 73.7601 20.878 73.6994 20.6564L71.3276 11.8047L71.4732 11.5524L81.4146 11.5589L81.5565 11.8025L79.1928 20.6516C79.0931 21.0242 79.1184 21.4191 79.2648 21.7759C79.4112 22.1327 79.6706 22.4317 80.0032 22.6269C80.1371 22.7016 80.2789 22.7611 80.4261 22.8041C80.8745 22.9213 81.351 22.8568 81.7521 22.6247C82.1533 22.3926 82.4466 22.0115 82.5684 21.5644L84.035 16.0866L86.2198 19.8778L84.7101 25.5462C84.608 25.916 84.6319 26.3092 84.7779 26.6639C84.924 27.0186 85.1839 27.3147 85.5167 27.5054C85.6478 27.5855 85.7904 27.6452 85.9395 27.6825C86.1605 27.7436 86.3914 27.7602 86.6189 27.7313C86.8463 27.7024 87.0658 27.6286 87.2645 27.5143C87.4633 27.3999 87.6373 27.2472 87.7766 27.0651C87.9158 26.8829 88.0175 26.6749 88.0758 26.4531L89.3385 21.7724L94.0146 23.0193C94.4609 23.1396 94.9367 23.0776 95.3374 22.847C95.738 22.6165 96.0306 22.2362 96.1509 21.7899C96.2712 21.3436 96.2092 20.8678 95.9787 20.4671C95.7481 20.0665 95.3679 19.7738 94.9215 19.6536ZM80.9099 5.44052C80.7584 5.70615 80.5387 5.92642 80.2734 6.07852C80.0081 6.2306 79.707 6.30897 79.4012 6.30549L73.4902 6.31093C73.1834 6.31035 72.8822 6.22932 72.6165 6.07595C72.3509 5.92258 72.1301 5.70222 71.9762 5.43686L69.0254 0.315022C68.8695 0.0519612 68.7868 -0.248003 68.7859 -0.553782C68.785 -0.859564 68.8659 -1.16003 69.0202 -1.42402L71.9804 -6.55131C72.1337 -6.81732 72.3544 -7.03824 72.6203 -7.19183C72.8861 -7.34541 73.1877 -7.42623 73.4948 -7.42616L79.3998 -7.42124C79.707 -7.42243 80.0089 -7.34216 80.2748 -7.1886C80.5408 -7.03505 80.7613 -6.81372 80.9138 -6.54717L83.8706 -1.43569C84.0242 -1.16983 84.105 -0.868198 84.1049 -0.561168C84.1048 -0.254135 84.0239 0.0474565 83.8701 0.313235L80.9099 5.44052Z" fill="white"/>
</g>
<g opacity="0.18" clip-path="url(#clip2_8022_313)">
<path d="M257.14 37.643L252.367 45.9115L257.134 54.1754L266.675 54.1723L271.448 45.9037L266.681 37.6399L257.14 37.643Z" fill="white"/>
<path opacity="0.5" d="M307.222 95.4703L293.309 91.7277L287.951 82.4297L301.387 86.0275C301.93 86.1734 302.497 86.2107 303.055 86.1373C303.612 86.0638 304.15 85.8811 304.637 85.5995C305.124 85.3179 305.551 84.943 305.893 84.4963C306.235 84.0496 306.485 83.5398 306.63 82.9962C306.775 82.4525 306.811 81.8857 306.736 81.3281C306.661 80.7705 306.477 80.2332 306.194 79.7468C305.912 79.2605 305.536 78.8346 305.088 78.4938C304.641 78.1529 304.13 77.9036 303.586 77.7602L281.873 71.923L281.524 71.3268L293.729 50.1875L294.42 50.1902L310.332 66.0761C310.588 66.354 310.884 66.5919 311.211 66.7816C312.033 67.2486 312.986 67.4329 313.924 67.3065C314.861 67.18 315.732 66.7497 316.401 66.0815C316.798 65.6842 317.113 65.2126 317.327 64.6937C317.541 64.1748 317.651 63.6186 317.65 63.0572C317.65 62.4957 317.538 61.9399 317.322 61.4216C317.106 60.9033 316.791 60.4326 316.393 60.0365L306.558 50.201L317.29 50.1923L327.487 60.3698C327.749 60.6406 328.051 60.8701 328.382 61.0506C329.281 61.566 330.336 61.7372 331.352 61.5323C332.368 61.3274 333.274 60.7605 333.903 59.9369C334.532 59.1134 334.84 58.0895 334.77 57.0557C334.7 56.0219 334.257 55.0488 333.523 54.3174L325.141 45.9134L333.534 37.4915C334.335 36.6887 334.784 35.6009 334.782 34.4672C334.781 33.3336 334.329 32.247 333.526 31.4465C332.723 30.646 331.635 30.1972 330.502 30.1988C329.368 30.2004 328.281 30.6523 327.481 31.455L317.293 41.6125L306.561 41.6212L316.397 31.7889C316.798 31.3905 317.115 30.917 317.332 30.3954C317.549 29.8739 317.661 29.3146 317.661 28.7498C317.661 28.185 317.549 27.6258 317.333 27.1042C317.116 26.5826 316.798 26.1089 316.398 25.7105C315.998 25.312 315.523 24.9965 315 24.7822C314.478 24.5678 313.918 24.4588 313.353 24.4614C312.788 24.464 312.229 24.5782 311.709 24.7974C311.188 25.0165 310.716 25.3364 310.32 25.7385L294.423 41.6104L293.732 41.6077L281.527 20.5007L281.884 19.8818L303.594 14.065C304.137 13.9193 304.646 13.668 305.093 13.3255C305.539 12.9829 305.914 12.5558 306.195 12.0685C306.476 11.5812 306.659 11.0433 306.732 10.4854C306.805 9.92757 306.768 9.36074 306.623 8.81728C306.477 8.27382 306.226 7.76437 305.883 7.31803C305.54 6.87169 305.113 6.49719 304.626 6.21592C304.139 5.93465 303.601 5.75212 303.043 5.67874C302.485 5.60536 301.918 5.64258 301.375 5.78826L287.944 9.3871L293.317 0.0793763L307.218 -3.64519C307.761 -3.79087 308.271 -4.04218 308.717 -4.38474C309.163 -4.72731 309.538 -5.15444 309.819 -5.64174C310.1 -6.12904 310.283 -6.66697 310.356 -7.22481C310.43 -7.78265 310.392 -8.34948 310.247 -8.89294C310.101 -9.4364 309.85 -9.94585 309.507 -10.3922C309.165 -10.8385 308.738 -11.213 308.25 -11.4943C307.763 -11.7756 307.225 -11.9581 306.667 -12.0315C306.109 -12.1049 305.543 -12.0677 304.999 -11.922L293.52 -8.84616L290.444 -20.325C290.15 -21.4227 289.432 -22.3586 288.448 -22.9268C287.464 -23.4951 286.295 -23.6492 285.197 -23.3552C284.099 -23.0612 283.164 -22.3432 282.595 -21.3592C282.027 -20.3752 281.873 -19.2058 282.167 -18.1081L285.891 -4.20782L280.518 5.10001L276.919 -8.33134C276.773 -8.87483 276.522 -9.38434 276.179 -9.83075C275.837 -10.2772 275.41 -10.6518 274.923 -10.9331C274.436 -11.2145 273.898 -11.3972 273.34 -11.4707C272.782 -11.5442 272.215 -11.5071 271.672 -11.3615C271.128 -11.216 270.619 -10.9648 270.172 -10.6223C269.726 -10.2798 269.351 -9.85278 269.07 -9.36554C268.788 -8.87831 268.606 -8.34042 268.532 -7.7826C268.459 -7.22477 268.496 -6.65793 268.641 -6.11444L274.458 15.5946L274.101 16.2134L249.72 16.1975L249.372 15.6001L255.169 -6.10278C255.318 -6.64713 255.359 -7.21562 255.288 -7.77564C255.217 -8.33565 255.036 -8.87617 254.756 -9.3662C254.476 -9.85622 254.102 -10.2861 253.655 -10.6312C253.208 -10.9762 252.698 -11.2297 252.153 -11.377C251.608 -11.5243 251.039 -11.5626 250.479 -11.4897C249.92 -11.4167 249.38 -11.234 248.891 -10.9519C248.402 -10.6699 247.974 -10.294 247.63 -9.846C247.287 -9.39796 247.035 -8.88654 246.89 -8.34107L243.292 5.09261L242.12 3.06392L237.934 -4.2054L241.662 -18.0927C241.954 -19.189 241.8 -20.3565 241.233 -21.3394C240.666 -22.3223 239.733 -23.0404 238.637 -23.3366C237.542 -23.6327 236.374 -23.4826 235.389 -22.9193C234.404 -22.3559 233.683 -21.4252 233.383 -20.331L230.286 -8.85124L218.832 -11.9336C217.829 -12.202 216.763 -12.0976 215.831 -11.6396C214.899 -11.1816 214.165 -10.4011 213.765 -9.44306C213.365 -8.48498 213.326 -7.41432 213.656 -6.42975C213.985 -5.44518 214.66 -4.61355 215.557 -4.08916C215.878 -3.89296 216.228 -3.74655 216.593 -3.65489L230.505 0.0870033L234.692 7.35507L235.863 9.38501L222.429 5.78682C221.887 5.64014 221.322 5.6018 220.765 5.674C220.208 5.7462 219.671 5.92752 219.184 6.20758C218.698 6.48764 218.271 6.86094 217.929 7.30611C217.587 7.75128 217.336 8.25957 217.19 8.80189C216.946 9.71588 217.009 10.6846 217.368 11.5598C217.727 12.4349 218.363 13.1681 219.179 13.6471C219.507 13.8351 219.861 13.9727 220.229 14.0553L241.943 19.8924L242.291 20.4898L230.086 41.6292L229.395 41.6253L213.498 25.7139C212.685 24.9166 211.591 24.4716 210.452 24.4753C209.313 24.4791 208.222 24.9312 207.414 25.7339C207.017 26.131 206.703 26.6025 206.488 27.1214C206.274 27.6403 206.164 28.1963 206.165 28.7578C206.166 29.3192 206.277 29.8749 206.493 30.3931C206.709 30.9113 207.025 31.3818 207.424 31.7777L217.256 41.6137L206.524 41.6224L196.328 31.4456C195.525 30.6452 194.437 30.1963 193.304 30.198C192.17 30.1996 191.084 30.6515 190.283 31.4542C189.483 32.257 189.034 33.3448 189.035 34.4785C189.037 35.6121 189.489 36.6987 190.292 37.4992L198.674 45.9021L190.295 54.2998C189.893 54.6961 189.573 55.1683 189.355 55.689C189.136 56.2097 189.024 56.7687 189.023 57.3333C189.023 57.898 189.134 58.4571 189.352 58.9782C189.569 59.4993 189.888 59.9721 190.29 60.369C190.551 60.6396 190.852 60.8689 191.183 61.0491C191.997 61.5182 192.944 61.7049 193.876 61.5804C194.807 61.4558 195.672 61.027 196.335 60.3605L206.522 50.2023L217.253 50.1936L207.418 60.0266C207.021 60.4237 206.706 60.8953 206.492 61.4142C206.277 61.9332 206.167 62.4893 206.168 63.0509C206.169 63.6124 206.281 64.1683 206.497 64.6866C206.712 65.2049 207.029 65.6756 207.427 66.0716C207.683 66.3499 207.979 66.5879 208.307 66.7778C209.129 67.2445 210.082 67.4286 211.019 67.302C211.957 67.1754 212.827 66.7451 213.496 66.077L229.392 50.2052L230.084 50.2079L242.288 71.3148L241.931 71.9337L220.222 77.7506C219.124 78.0448 218.189 78.763 217.621 79.7472C217.052 80.7313 216.899 81.9008 217.193 82.9984C217.487 84.0959 218.205 85.0317 219.189 85.5997C220.174 86.1678 221.343 86.3216 222.441 86.0274L235.872 82.4285L230.498 91.7364L216.598 95.4606C216.054 95.6063 215.545 95.8576 215.099 96.2001C214.652 96.5427 214.278 96.9698 213.997 97.4571C213.715 97.9444 213.533 98.4824 213.459 99.0402C213.386 99.598 213.423 100.165 213.569 100.708C213.715 101.252 213.966 101.761 214.308 102.208C214.651 102.654 215.078 103.028 215.565 103.31C216.053 103.591 216.591 103.774 217.149 103.847C217.706 103.92 218.273 103.883 218.817 103.737L230.296 100.662L233.371 112.14C233.516 112.684 233.767 113.194 234.109 113.641C234.452 114.088 234.879 114.463 235.367 114.744C235.854 115.026 236.392 115.208 236.95 115.281C237.509 115.355 238.076 115.317 238.619 115.17C239.164 115.027 239.676 114.778 240.124 114.436C240.572 114.094 240.947 113.667 241.229 113.179C241.511 112.691 241.693 112.152 241.765 111.593C241.837 111.035 241.797 110.467 241.649 109.924L237.924 96.0234L243.298 86.7156L246.897 100.147C247.042 100.691 247.293 101.201 247.635 101.648C247.977 102.094 248.404 102.469 248.892 102.751C249.379 103.032 249.918 103.215 250.476 103.288C251.034 103.361 251.601 103.323 252.145 103.177C252.69 103.034 253.201 102.784 253.649 102.443C254.097 102.101 254.473 101.673 254.754 101.186C255.036 100.698 255.218 100.159 255.29 99.5997C255.362 99.0409 255.323 98.4733 255.174 97.9299L249.357 76.2207L249.714 75.6018L274.096 75.6178L274.444 76.2152L268.647 97.918C268.402 98.8317 268.464 99.8004 268.823 100.675C269.182 101.551 269.819 102.284 270.634 102.762C270.963 102.946 271.311 103.092 271.671 103.197C272.771 103.485 273.94 103.326 274.924 102.757C275.907 102.188 276.627 101.253 276.925 100.157L280.522 86.7222L285.881 96.0202L282.178 109.922C281.928 110.829 281.986 111.793 282.345 112.663C282.703 113.533 283.34 114.259 284.156 114.727C284.478 114.924 284.828 115.07 285.193 115.162C285.735 115.311 286.302 115.352 286.859 115.281C287.417 115.21 287.956 115.029 288.443 114.749C288.93 114.468 289.357 114.094 289.699 113.647C290.04 113.2 290.29 112.69 290.433 112.146L293.529 100.667L304.998 103.725C306.092 104.02 307.259 103.868 308.242 103.302C309.224 102.737 309.942 101.804 310.237 100.71C310.532 99.6152 310.38 98.4482 309.815 97.4656C309.249 96.483 308.317 95.7653 307.222 95.4703ZM272.858 60.6123C272.487 61.2638 271.948 61.804 271.297 62.177C270.646 62.55 269.908 62.7422 269.158 62.7337L254.661 62.747C253.909 62.7456 253.17 62.5469 252.518 62.1707C251.867 61.7946 251.325 61.2541 250.948 60.6033L243.711 48.0418C243.329 47.3967 243.126 46.661 243.123 45.9111C243.121 45.1611 243.32 44.4242 243.698 43.7768L250.958 31.2019C251.334 30.5495 251.875 30.0077 252.527 29.631C253.179 29.2544 253.919 29.0561 254.672 29.0563L269.155 29.0684C269.908 29.0655 270.648 29.2623 271.3 29.6389C271.953 30.0155 272.493 30.5583 272.868 31.2121L280.119 43.7482C280.496 44.4002 280.694 45.1399 280.694 45.8929C280.694 46.646 280.495 47.3856 280.118 48.0375L272.858 60.6123Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_f_8022_313" x="-155.9" y="-12.9" width="332.8" height="316.8" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="24.45" result="effect1_foregroundBlur_8022_313"/>
</filter>
<filter id="filter1_f_8022_313" x="204" y="-322" width="428" height="405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="26.5" result="effect1_foregroundBlur_8022_313"/>
</filter>
<linearGradient id="paint0_linear_8022_313" x1="-28.5" y1="-20.25" x2="385.054" y2="86.2541" gradientUnits="userSpaceOnUse">
<stop stop-color="#49D4FF"/>
<stop offset="1" stop-color="#0040A1"/>
</linearGradient>
<clipPath id="clip0_8022_313">
<rect width="390" height="36" fill="white"/>
</clipPath>
<clipPath id="clip1_8022_313">
<rect width="68" height="68" fill="white" transform="translate(64 -47) rotate(30)"/>
</clipPath>
<clipPath id="clip2_8022_313">
<rect width="166.772" height="166.772" fill="white" transform="translate(231.386 -68) rotate(30)"/>
</clipPath>
</defs>
</svg>
</div>
<div class="marquee-content">
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
</div>
<div class="marquee-content">
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: #8401EA;
width: 100%;
height: 36px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
}
.marquee-svg-background {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.marquee-svg-background svg {
min-height: 100%;
object-fit: cover;
}
.marquee-text {
color: #FFF;
font-size: 13px;
line-height: 16px;
white-space: nowrap;
display: flex;
align-items: center;
font-weight: 600;
}
.marquee-marker {
width: 8px;
height: 8px;
margin: 0 8px;
display: inline-block;
}
.marquee-content {
animation: marquee 16s linear infinite;
display: flex;
align-items: center;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-svg-background">
<svg viewBox="0 0 390 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_8064_371)">
<rect width="390" height="36" fill="url(#paint0_radial_8064_371)"/>
<path d="M71.8462 9.84615C75.3608 6.33155 76.5 -2 76.5 -2C76.5 -2 77.6392 6.33155 81.1538 9.84615C84.6685 13.3608 93 14.5 93 14.5C93 14.5 84.6685 15.6392 81.1538 19.1538C77.6392 22.6685 76.5 31 76.5 31C76.5 31 75.3608 22.6685 71.8462 19.1538C68.3315 15.6392 60 14.5 60 14.5C60 14.5 68.3315 13.3608 71.8462 9.84615Z" fill="url(#paint1_linear_8064_371)" fill-opacity="0.17"/>
<path d="M321.692 23.6923C324.568 20.8167 325.5 14 325.5 14C325.5 14 326.432 20.8167 329.308 23.6923C332.183 26.5679 339 27.5 339 27.5C339 27.5 332.183 28.4321 329.308 31.3077C326.432 34.1833 325.5 41 325.5 41C325.5 41 324.568 34.1833 321.692 31.3077C318.817 28.4321 312 27.5 312 27.5C312 27.5 318.817 26.5679 321.692 23.6923Z" fill="url(#paint2_linear_8064_371)" fill-opacity="0.17"/>
<path d="M47.1795 30.1795C49.3096 28.0494 50 23 50 23C50 23 50.6904 28.0494 52.8205 30.1795C54.9506 32.3096 60 33 60 33C60 33 54.9506 33.6904 52.8205 35.8205C50.6904 37.9506 50 43 50 43C50 43 49.3096 37.9506 47.1795 35.8205C45.0494 33.6904 40 33 40 33C40 33 45.0494 32.3096 47.1795 30.1795Z" fill="url(#paint3_linear_8064_371)" fill-opacity="0.17"/>
</g>
<defs>
<radialGradient id="paint0_radial_8064_371" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(195 18) scale(195 175.5)">
<stop stop-color="#007DEB"/>
<stop offset="1" stop-color="#041F6C"/>
</radialGradient>
<linearGradient id="paint1_linear_8064_371" x1="76.5" y1="-2" x2="76.5" y2="31" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#017AE6"/>
</linearGradient>
<linearGradient id="paint2_linear_8064_371" x1="325.5" y1="14" x2="325.5" y2="41" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#017AE6"/>
</linearGradient>
<linearGradient id="paint3_linear_8064_371" x1="50" y1="23" x2="50" y2="43" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#017AE6"/>
</linearGradient>
<clipPath id="clip0_8064_371">
<rect width="390" height="36" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<div class="marquee-content">
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
</div>
<div class="marquee-content">
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: linear-gradient(91deg, #FEFEFC -8.44%, #49D4FF 102%);
width: 100%;
height: 36px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
}
.marquee-text {
color: #0040A1;
font-size: 15px;
line-height: 16px;
white-space: nowrap;
display: flex;
align-items: center;
font-weight: 500;
text-transform: uppercase;
}
.marquee-marker {
width: 4px;
height: 4px;
border-radius: 2px;
background-color: #094AA7;
margin: 0 14px;
display: inline-block;
}
.marquee-content {
animation: marquee 16s linear infinite;
display: flex;
align-items: center;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-content">
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
</div>
<div class="marquee-content">
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
<div class="marquee-text">Зимняя распродажа<span class="marquee-marker"></span></div>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: #49D4FF;
width: 100%;
height: 36px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
}
.marquee-svg-background {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.marquee-svg-background svg {
min-height: 100%;
object-fit: cover;
}
.marquee-text {
color: #0040A1;
font-size: 13px;
line-height: 16px;
white-space: nowrap;
display: inline-block;
font-weight: 600;
padding-right: 24px;
}
.marquee-content {
animation: marquee 16s linear infinite;
display: inline-block;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-svg-background">
<svg viewBox="0 0 390 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_8064_383)">
<rect width="390" height="36" fill="url(#paint0_linear_8064_383)"/>
<path d="M101.356 13.6963C101.238 13.2735 101.028 12.8759 100.739 12.5263C100.45 12.1766 100.087 11.8819 99.6707 11.659C99.2544 11.4362 98.7934 11.2896 98.314 11.2276C97.8346 11.1657 97.3463 11.1897 96.8772 11.2981L81.4941 15.0521L78.8463 12.7017L83.939 -4.40409L87.5202 -5.25233L98.7793 4.90942C99.1145 5.23796 99.52 5.5021 99.9715 5.68593C100.423 5.86975 100.911 5.96948 101.407 5.97911C101.902 5.98873 102.395 5.90806 102.855 5.74194C103.314 5.57582 103.732 5.32769 104.083 5.01247C104.434 4.69725 104.71 4.32145 104.895 3.90769C105.08 3.49394 105.17 3.05077 105.16 2.60484C105.15 2.15892 105.039 1.71946 104.835 1.3129C104.632 0.906339 104.339 0.541081 103.974 0.239097L95.7397 -7.24166L104.98 -9.46422C105.463 -9.56163 105.92 -9.74607 106.322 -10.0065C106.725 -10.2668 107.064 -10.5978 107.321 -10.9794C107.578 -11.361 107.746 -11.7853 107.815 -12.2269C107.885 -12.6685 107.855 -13.1182 107.726 -13.549C107.598 -13.9798 107.374 -14.3827 107.068 -14.7335C106.761 -15.0843 106.38 -15.3758 105.945 -15.5904C105.511 -15.8051 105.033 -15.9384 104.54 -15.9824C104.046 -16.0264 103.548 -15.9801 103.076 -15.8464L93.8357 -13.6238L96.8457 -23.734C97.0979 -24.5812 96.9659 -25.4839 96.4786 -26.2435C95.9914 -27.003 95.1888 -27.5573 94.2474 -27.7843C93.3061 -28.0113 92.3031 -27.8925 91.4592 -27.4539C90.6152 -27.0154 89.9993 -26.2931 89.7471 -25.4459L85.6387 -11.6462L82.0398 -10.8022L68.1765 -23.2696L69.1276 -26.464L84.4739 -30.1583C84.9575 -30.2558 85.4142 -30.4402 85.8166 -30.7006C86.2189 -30.961 86.5586 -31.2919 86.8152 -31.6735C87.0717 -32.0551 87.2399 -32.4795 87.3095 -32.9211C87.3791 -33.3627 87.3487 -33.8124 87.2202 -34.2431C87.0917 -34.6739 86.8677 -35.0768 86.5617 -35.4276C86.2557 -35.7785 85.874 -36.07 85.4395 -36.2846C85.0051 -36.4992 84.5269 -36.6325 84.0338 -36.6765C83.5406 -36.7205 83.0427 -36.6742 82.5699 -36.5405L71.3387 -33.8909L73.8114 -42.1962C74.0636 -43.0434 73.9316 -43.9461 73.4443 -44.7057C72.957 -45.4652 72.1545 -46.0195 71.2131 -46.2465C70.2718 -46.4735 69.2688 -46.3547 68.4248 -45.9161C67.5809 -45.4776 66.965 -44.7553 66.7128 -43.9081L64.2401 -35.6027L56.0367 -43.0589C55.7015 -43.3875 55.296 -43.6516 54.8445 -43.8355C54.3929 -44.0193 53.9048 -44.119 53.4093 -44.1286C52.9138 -44.1383 52.4213 -44.0576 51.9614 -43.8915C51.5015 -43.7253 51.0837 -43.4772 50.7331 -43.162C50.3825 -42.8468 50.1063 -42.471 49.9213 -42.0572C49.7362 -41.6435 49.6461 -41.2003 49.6563 -40.7544C49.6665 -40.3084 49.7768 -39.869 49.9806 -39.4624C50.1844 -39.0559 50.4774 -38.6906 50.8421 -38.3886L62.0432 -28.2237L61.0922 -25.0294L42.115 -20.4474L39.4848 -22.7935L43.5885 -36.5772C43.8408 -37.4244 43.7087 -38.3271 43.2215 -39.0866C42.7342 -39.8462 41.9316 -40.4005 40.9903 -40.6275C40.049 -40.8545 39.046 -40.7357 38.202 -40.2971C37.358 -39.8586 36.7422 -39.1362 36.49 -38.2891L33.4799 -28.1789L26.7126 -34.2617C26.3775 -34.5902 25.9719 -34.8544 25.5204 -35.0382C25.0689 -35.222 24.5807 -35.3217 24.0852 -35.3314C23.5898 -35.341 23.0973 -35.2603 22.6374 -35.0942C22.1774 -34.9281 21.7596 -34.6799 21.409 -34.3647C21.0584 -34.0495 20.7823 -33.6737 20.5972 -33.26C20.4122 -32.8462 20.322 -32.403 20.3322 -31.9571C20.3424 -31.5112 20.4527 -31.0717 20.6565 -30.6652C20.8603 -30.2586 21.1533 -29.8933 21.518 -29.5914L28.2676 -23.5128L17.0529 -20.7907C16.5693 -20.6933 16.1126 -20.5089 15.7102 -20.2485C15.3079 -19.9881 14.9682 -19.6572 14.7116 -19.2756C14.4551 -18.894 14.2869 -18.4696 14.2173 -18.028C14.1477 -17.5864 14.1781 -17.1367 14.3066 -16.706C14.4351 -16.2752 14.6591 -15.8723 14.9651 -15.5214C15.2711 -15.1706 15.6528 -14.8791 16.0873 -14.6645C16.5217 -14.4499 16.9999 -14.3166 17.493 -14.2726C17.9862 -14.2286 18.4841 -14.2749 18.9569 -14.4086L34.3033 -18.1029L36.9334 -15.7568L31.8406 1.349L28.2595 2.19725L17.0358 -7.95594C16.7007 -8.28449 16.2951 -8.54862 15.8436 -8.73245C15.3921 -8.91628 14.9039 -9.01601 14.4085 -9.02563C13.913 -9.03526 13.4205 -8.95459 12.9606 -8.78847C12.5007 -8.62235 12.0828 -8.37421 11.7322 -8.05899C11.3816 -7.74377 11.1055 -7.36798 10.9204 -6.95422C10.7354 -6.54046 10.6452 -6.09729 10.6554 -5.65137C10.6656 -5.20544 10.7759 -4.76599 10.9797 -4.35943C11.1835 -3.95287 11.4766 -3.58761 11.8413 -3.28562L20.0577 4.19085L10.8177 6.41341C10.3341 6.51082 9.87735 6.69527 9.47499 6.95565C9.07264 7.21604 8.73296 7.54699 8.4764 7.92858C8.21985 8.31018 8.05171 8.73454 7.9821 9.17613C7.91249 9.61773 7.94286 10.0674 8.07137 10.4982C8.19988 10.929 8.42388 11.3319 8.72989 11.6827C9.0359 12.0335 9.41761 12.325 9.85204 12.5396C10.2865 12.7543 10.7646 12.8876 11.2578 12.9316C11.751 12.9755 12.2489 12.9293 12.7217 12.7956L21.9439 10.5688L18.9339 20.6789C18.6817 21.5261 18.8138 22.4288 19.301 23.1884C19.7883 23.9479 20.5909 24.5022 21.5322 24.7292C22.4735 24.9562 23.4765 24.8374 24.3205 24.3988C25.1645 23.9603 25.7803 23.238 26.0325 22.3908L30.141 8.59112L33.7221 7.74287L47.6161 20.2348L46.6651 23.4291L31.327 27.1597C30.8434 27.2571 30.3866 27.4416 29.9843 27.702C29.5819 27.9624 29.2423 28.2933 28.9857 28.6749C28.7291 29.0565 28.561 29.4809 28.4914 29.9225C28.4218 30.3641 28.4522 30.8138 28.5807 31.2445C28.7092 31.6753 28.9332 32.0782 29.2392 32.429C29.5452 32.7799 29.9269 33.0713 30.3613 33.286C30.7958 33.5006 31.2739 33.6339 31.7671 33.6779C32.2603 33.7219 32.7582 33.6756 33.231 33.5419L44.4587 30.8401L41.986 39.1454C41.7338 39.9926 41.8658 40.8953 42.3531 41.6549C42.8404 42.4144 43.6429 42.9687 44.5843 43.1957C45.5256 43.4227 46.5286 43.3039 47.3726 42.8653C48.2165 42.4268 48.8324 41.7045 49.0846 40.8573L51.5573 32.5519L59.7784 40.0124C60.1136 40.341 60.5191 40.6051 60.9707 40.7889C61.4222 40.9728 61.9104 41.0725 62.4058 41.0821C62.9013 41.0917 63.3938 41.0111 63.8537 40.8449C64.3136 40.6788 64.7315 40.4307 65.0821 40.1155C65.4327 39.8002 65.7088 39.4245 65.8939 39.0107C66.0789 38.5969 66.1691 38.1538 66.1589 37.7078C66.1487 37.2619 66.0384 36.8225 65.8346 36.4159C65.6308 36.0093 65.3377 35.6441 64.973 35.3421L53.7542 25.1729L54.7052 21.9786L73.6777 17.4126L76.3078 19.7587L72.1993 33.5583C71.9471 34.4055 72.0792 35.3082 72.5664 36.0678C73.0537 36.8274 73.8563 37.3816 74.7976 37.6086C75.7389 37.8356 76.7419 37.7168 77.5859 37.2783C78.4299 36.8397 79.0457 36.1174 79.2979 35.2702L82.3174 25.1281L89.0848 31.2109C89.4199 31.5394 89.8255 31.8035 90.277 31.9874C90.7285 32.1712 91.2167 32.2709 91.7122 32.2806C92.2076 32.2902 92.7001 32.2095 93.16 32.0434C93.62 31.8773 94.0378 31.6291 94.3884 31.3139C94.739 30.9987 95.0151 30.6229 95.2002 30.2091C95.3852 29.7954 95.4754 29.3522 95.4652 28.9063C95.455 28.4604 95.3447 28.0209 95.1409 27.6144C94.9371 27.2078 94.644 26.8425 94.2793 26.5406L87.4943 20.4535L98.7622 17.7442C99.7021 17.5163 100.503 16.962 100.989 16.2031C101.476 15.4442 101.607 14.5426 101.356 13.6963ZM71.7347 10.9696L52.8154 15.5485L38.9262 3.04061L44.0095 -14.0333L62.982 -18.5993L76.8712 -6.09141L71.7347 10.9696Z" fill="#C3F0FD"/>
<g opacity="0.34">
<path d="M294.689 31.7147L290.427 32.8531C290.102 32.9387 289.803 33.1011 289.561 33.3238C289.319 33.5466 289.141 33.8219 289.047 34.1218L287.813 38.0633C287.719 38.3634 287.711 38.6774 287.791 38.9737C287.871 39.27 288.034 39.538 288.266 39.7507L291.293 42.5538C291.524 42.7667 291.813 42.9173 292.133 42.9903C292.453 43.0634 292.792 43.0564 293.116 42.97L297.378 41.8317C297.704 41.7478 298.005 41.5864 298.249 41.364C298.493 41.1416 298.672 40.866 298.768 40.5653L300.002 36.6238C300.096 36.3238 300.103 36.0097 300.024 35.7135C299.944 35.4172 299.78 35.1492 299.549 34.9365L296.521 32.1333C296.291 31.9183 295.999 31.7663 295.677 31.6928C295.356 31.6193 295.014 31.6268 294.689 31.7147Z" fill="#C3F0FD"/>
<path d="M319.632 46.1435C319.568 45.8857 319.449 45.6444 319.282 45.4335C319.114 45.2226 318.902 45.0463 318.657 44.9148C318.411 44.7832 318.138 44.699 317.853 44.6669C317.567 44.6348 317.275 44.6555 316.994 44.7279L307.747 47.22L306.201 45.8111L309.507 35.2567L311.659 34.6923L318.228 40.786C318.423 40.9834 318.662 41.1404 318.928 41.2476C319.195 41.3547 319.485 41.4099 319.781 41.4097C320.077 41.4095 320.373 41.3539 320.65 41.2464C320.927 41.1388 321.181 40.9815 321.395 40.7838C321.609 40.5861 321.78 40.3522 321.897 40.0962C322.014 39.8401 322.074 39.5672 322.075 39.2938C322.076 39.0205 322.017 38.7523 321.901 38.5055C321.786 38.2586 321.617 38.0382 321.403 37.8575L316.6 33.3708L322.154 31.8937C322.444 31.828 322.72 31.7093 322.964 31.5446C323.209 31.3799 323.417 31.1728 323.576 30.9355C323.735 30.6983 323.842 30.436 323.89 30.1643C323.939 29.8926 323.927 29.6171 323.857 29.3545C323.787 29.0919 323.66 28.8476 323.482 28.6362C323.305 28.4248 323.081 28.2507 322.825 28.1244C322.569 27.9981 322.285 27.9223 321.991 27.9014C321.698 27.8805 321.399 27.915 321.115 28.0028L315.561 29.4799L317.515 23.2419C317.679 22.7192 317.614 22.1672 317.335 21.7073C317.055 21.2475 316.584 20.9174 316.026 20.7898C315.467 20.6622 314.866 20.7474 314.355 21.0268C313.844 21.3062 313.465 21.7568 313.301 22.2795L310.634 30.794L308.471 31.356L300.382 23.8803L301 21.9094L310.224 19.4542C310.514 19.3885 310.79 19.2698 311.034 19.1051C311.279 18.9404 311.487 18.7333 311.646 18.4961C311.805 18.2588 311.912 17.9965 311.96 17.7248C312.009 17.4531 311.998 17.1776 311.927 16.915C311.857 16.6524 311.73 16.4081 311.552 16.1967C311.375 15.9853 311.151 15.8112 310.895 15.6849C310.639 15.5586 310.355 15.4828 310.062 15.4619C309.768 15.441 309.469 15.4755 309.185 15.5633L302.435 17.3269L304.04 12.2025C304.204 11.6798 304.139 11.1278 303.86 10.6679C303.58 10.2081 303.11 9.87801 302.551 9.75038C301.992 9.62276 301.391 9.70802 300.88 9.9874C300.369 10.2668 299.99 10.7174 299.826 11.2401L298.221 16.3646L293.436 11.8926C293.241 11.6952 293.003 11.5382 292.736 11.431C292.469 11.3238 292.179 11.2687 291.883 11.2689C291.587 11.2691 291.292 11.3247 291.014 11.4322C290.737 11.5398 290.484 11.6971 290.269 11.8948C290.055 12.0924 289.884 12.3263 289.767 12.5824C289.651 12.8384 289.59 13.1114 289.589 13.3847C289.588 13.6581 289.647 13.9263 289.763 14.1731C289.878 14.42 290.048 14.6404 290.261 14.8211L296.795 20.9174L296.178 22.8883L284.771 25.9327L283.236 24.5261L285.9 16.0216C286.064 15.4988 285.999 14.9468 285.719 14.487C285.44 14.0271 284.969 13.697 284.41 13.5694C283.852 13.4418 283.251 13.5271 282.74 13.8064C282.229 14.0858 281.85 14.5364 281.686 15.0592L279.732 21.2972L275.784 17.6499C275.588 17.4525 275.35 17.2955 275.083 17.1883C274.816 17.0811 274.526 17.026 274.231 17.0262C273.935 17.0264 273.639 17.0819 273.362 17.1895C273.085 17.2971 272.831 17.4544 272.617 17.6521C272.403 17.8497 272.232 18.0836 272.115 18.3397C271.998 18.5957 271.937 18.8686 271.937 19.142C271.936 19.4154 271.995 19.6836 272.11 19.9304C272.226 20.1772 272.395 20.3977 272.608 20.5784L276.547 24.2233L269.805 26.0311C269.515 26.0968 269.239 26.2156 268.995 26.3803C268.751 26.5449 268.543 26.7521 268.384 26.9893C268.224 27.2265 268.117 27.4889 268.069 27.7606C268.021 28.0323 268.032 28.3077 268.102 28.5703C268.172 28.833 268.3 29.0773 268.477 29.2887C268.654 29.5001 268.878 29.6742 269.134 29.8005C269.39 29.9267 269.674 30.0026 269.968 30.0235C270.262 30.0444 270.56 30.0099 270.844 29.9221L280.068 27.4669L281.603 28.8734L278.297 39.4278L276.145 39.9922L269.597 33.9033C269.402 33.706 269.164 33.549 268.897 33.4418C268.63 33.3346 268.34 33.2795 268.044 33.2797C267.748 33.2799 267.453 33.3354 267.176 33.443C266.898 33.5505 266.645 33.7079 266.431 33.9055C266.216 34.1032 266.046 34.3371 265.929 34.5931C265.812 34.8492 265.751 35.1221 265.75 35.3955C265.75 35.6689 265.809 35.937 265.924 36.1839C266.04 36.4307 266.209 36.6511 266.422 36.8319L271.215 41.3161L265.661 42.7932C265.371 42.8589 265.095 42.9777 264.851 43.1423C264.606 43.307 264.398 43.5142 264.239 43.7514C264.08 43.9886 263.973 44.2509 263.925 44.5226C263.876 44.7943 263.888 45.0698 263.958 45.3324C264.028 45.595 264.155 45.8394 264.333 46.0508C264.51 46.2622 264.734 46.4363 264.99 46.5625C265.246 46.6888 265.53 46.7647 265.824 46.7856C266.117 46.8065 266.416 46.772 266.7 46.6841L272.243 45.2046L270.289 51.4426C270.126 51.9653 270.191 52.5173 270.47 52.9772C270.749 53.4371 271.22 53.7671 271.779 53.8947C272.338 54.0224 272.939 53.9371 273.45 53.6577C273.961 53.3783 274.34 52.9277 274.503 52.405L277.17 43.8906L279.323 43.3261L287.43 50.8165L286.812 52.7874L277.592 55.2647C277.302 55.3304 277.026 55.4491 276.782 55.6138C276.538 55.7785 276.33 55.9856 276.17 56.2228C276.011 56.4601 275.904 56.7224 275.856 56.9941C275.808 57.2658 275.819 57.5413 275.889 57.8039C275.959 58.0665 276.087 58.3108 276.264 58.5222C276.441 58.7336 276.665 58.9077 276.921 59.034C277.177 59.1603 277.461 59.2361 277.755 59.257C278.049 59.2779 278.347 59.2434 278.631 59.1556L285.38 57.36L283.775 62.4844C283.611 63.0071 283.676 63.5592 283.955 64.019C284.235 64.4789 284.705 64.8089 285.264 64.9365C285.823 65.0642 286.424 64.9789 286.935 64.6995C287.446 64.4202 287.825 63.9695 287.989 63.4468L289.594 58.3224L294.39 62.7968C294.585 62.9941 294.823 63.1511 295.09 63.2583C295.357 63.3655 295.647 63.4206 295.943 63.4204C296.238 63.4202 296.534 63.3647 296.811 63.2571C297.088 63.1496 297.342 62.9922 297.556 62.7946C297.77 62.5969 297.941 62.363 298.058 62.107C298.175 61.8509 298.236 61.578 298.236 61.3046C298.237 61.0312 298.178 60.7631 298.063 60.5162C297.947 60.2694 297.778 60.049 297.565 59.8682L291.02 53.7695L291.637 51.7986L303.041 48.7641L304.576 50.1707L301.909 58.6851C301.745 59.2078 301.81 59.7598 302.089 60.2197C302.369 60.6796 302.84 61.0096 303.398 61.1372C303.957 61.2648 304.558 61.1796 305.069 60.9002C305.58 60.6208 305.959 60.1702 306.123 59.6475L308.083 53.3898L312.032 57.0371C312.227 57.2345 312.465 57.3915 312.732 57.4986C312.999 57.6058 313.289 57.661 313.584 57.6608C313.88 57.6605 314.176 57.605 314.453 57.4974C314.73 57.3899 314.984 57.2325 315.198 57.0349C315.412 56.8372 315.583 56.6033 315.7 56.3473C315.817 56.0912 315.878 55.8183 315.878 55.5449C315.879 55.2716 315.82 55.0034 315.705 54.7565C315.589 54.5097 315.42 54.2893 315.207 54.1086L311.247 50.4588L318.02 48.6582C318.585 48.5068 319.072 48.157 319.374 47.6855C319.676 47.2141 319.769 46.6595 319.632 46.1435ZM301.98 44.8364L290.608 47.8781L282.504 40.3779L285.804 29.8433L297.207 26.8088L305.311 34.309L301.98 44.8364Z" fill="#C3F0FD"/>
</g>
<g filter="url(#filter0_f_8064_383)">
<ellipse cx="15" cy="141.5" rx="122" ry="113.5" fill="#49D4FF"/>
</g>
<g filter="url(#filter1_f_8064_383)">
<ellipse cx="418" cy="-119.5" rx="161" ry="149.5" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_f_8064_383" x="-155.9" y="-20.9" width="341.8" height="324.8" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="24.45" result="effect1_foregroundBlur_8064_383"/>
</filter>
<filter id="filter1_f_8064_383" x="204" y="-322" width="428" height="405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="26.5" result="effect1_foregroundBlur_8064_383"/>
</filter>
<linearGradient id="paint0_linear_8064_383" x1="-28.5" y1="-20.25" x2="385.054" y2="86.2541" gradientUnits="userSpaceOnUse">
<stop stop-color="#FEFEFC"/>
<stop offset="1" stop-color="#49D4FF"/>
</linearGradient>
<clipPath id="clip0_8064_383">
<rect width="390" height="36" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<div class="marquee-content">
<div class="marquee-text">Зимняя распродажа</div>
<div class="marquee-text">Зимняя распродажа</div>
<div class="marquee-text">Зимняя распродажа</div>
<div class="marquee-text">Зимняя распродажа</div>
<div class="marquee-text">Зимняя распродажа</div>
<div class="marquee-text">Зимняя распродажа</div>
<div class="marquee-text">Зимняя распродажа</div>
<div class="marquee-text">Зимняя распродажа</div>
</div>
<div class="marquee-content">
<div class="marquee-text">Зимняя распродажа</div>
<div class="marquee-text">Зимняя распродажа</div>
<div class="marquee-text">Зимняя распродажа</div>
<div class="marquee-text">Зимняя распродажа</div>
<div class="marquee-text">Зимняя распродажа</div>
<div class="marquee-text">Зимняя распродажа</div>
<div class="marquee-text">Зимняя распродажа</div>
<div class="marquee-text">Зимняя распродажа</div>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: linear-gradient(91deg, #EC0185 -3.55%, #6E00C5 31.39%, #EC0185 85.34%, #7442CD 124.09%);
width: 100%;
height: 34px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
}
.marquee-promocode {
position: absolute;
z-index: 3;
color: #4A268A;
text-align: center;
font-size: 13px;
font-weight: 600;
line-height: 16px;
display: flex;
padding: 1px 4px;
justify-content: center;
align-items: center;
right: 8px;
top: 8px;
border-radius: 4px;
background: #FFF;
text-transform: uppercase;
}
.marquee-text {
color: #FFF;
font-size: 13px;
line-height: 16px;
white-space: nowrap;
display: inline-block;
padding-right: 12px;
}
.marquee-content {
animation: marquee 16s linear infinite;
display: inline-block;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-promocode">LOVEBRAND</div>
<div class="marquee-content">
<span class="marquee-text">Промокод на скидку 25%</span>
<span class="marquee-text">Промокод на скидку 25%</span>
<span class="marquee-text">Промокод на скидку 25%</span>
<span class="marquee-text">Промокод на скидку 25%</span>
<span class="marquee-text">Промокод на скидку 25%</span>
<span class="marquee-text">Промокод на скидку 25%</span>
<span class="marquee-text">Промокод на скидку 25%</span>
<span class="marquee-text">Промокод на скидку 25%</span>
</div>
<div class="marquee-content">
<span class="marquee-text">Промокод на скидку 25%</span>
<span class="marquee-text">Промокод на скидку 25%</span>
<span class="marquee-text">Промокод на скидку 25%</span>
<span class="marquee-text">Промокод на скидку 25%</span>
<span class="marquee-text">Промокод на скидку 25%</span>
<span class="marquee-text">Промокод на скидку 25%</span>
<span class="marquee-text">Промокод на скидку 25%</span>
<span class="marquee-text">Промокод на скидку 25%</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: radial-gradient(circle, rgba(17,0,47,1) 0%, rgba(116,66,205,1) 80%);
width: 100%;
height: 40px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
}
.marquee-text {
color: #FFF;
font-size: 15px;
line-height: 22px;
white-space: nowrap;
display: flex;
align-items: center;
height: 100%;
}
.marquee-promocode {
font-size: 13px;
line-height: 16px;
font-weight: 600;
border-radius: 4px;
background: #E1018B;
display: flex;
padding: 1px 4px;
justify-content: center;
align-items: center;
margin: 0 8px;
text-transform: uppercase;
}
.marquee-content, .marquee-content-double {
width: 100%;
animation: marquee 8s linear infinite;
display: inline-block;
}
.marquee-content-double {
animation-delay: -4s;
}
@keyframes marquee {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-content">
<div class="marquee-text">Промокод<span class="marquee-promocode">LOVEBRAND</span>на скидку 25%</div>
</div>
<div class="marquee-content-double">
<div class="marquee-text">Промокод<span class="marquee-promocode">LOVEBRAND</span>на скидку 25%</div>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: linear-gradient(91deg, #EC0185 -0.37%, #6E00C5 50.94%, #EC0185 103.63%);
width: 100%;
height: 36px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
}
.marquee-text {
color: #FFF;
font-size: 13px;
line-height: 16px;
font-weight: 600;
white-space: nowrap;
display: flex;
align-items: center;
height: 100%;
}
.marquee-promocode {
border-radius: 4px;
background: #2D0050;
display: flex;
padding: 1px 4px;
justify-content: center;
align-items: center;
margin: 0 6px;
text-transform: uppercase;
}
.marquee-content, .marquee-content-double {
width: 100%;
animation: marquee 8s linear infinite;
display: inline-block;
}
.marquee-content-double {
animation-delay: -4s;
}
@keyframes marquee {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-content">
<div class="marquee-text">Промокод<span class="marquee-promocode">LOVEBRAND</span>на скидку 25%</div>
</div>
<div class="marquee-content-double">
<div class="marquee-text">Промокод<span class="marquee-promocode">LOVEBRAND</span>на скидку 25%</div>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: linear-gradient(91deg, #EC0185 -0.37%, #6E00C5 50.94%, #EC0185 103.63%);
width: 100%;
height: 40px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
}
.marquee-text {
color: #FFF;
font-size: 15px;
line-height: 22px;
white-space: nowrap;
display: flex;
align-items: center;
height: 100%;
padding-right: 24px;
}
.marquee-promocode {
border-radius: 4px;
background: #2D0050;
display: flex;
padding: 1px 4px;
justify-content: center;
align-items: center;
margin: 0 6px;
text-transform: uppercase;
font-weight: 600;
font-size: 13px;
line-height: 16px;
}
.marquee-content {
animation: marquee 16s linear infinite;
display: flex;
align-items: center;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-content">
<div class="marquee-text">Промокод<span class="marquee-promocode">LOVEBRAND</span>на скидку 25%</div>
<div class="marquee-text">Промокод<span class="marquee-promocode">LOVEBRAND</span>на скидку 25%</div>
<div class="marquee-text">Промокод<span class="marquee-promocode">LOVEBRAND</span>на скидку 25%</div>
<div class="marquee-text">Промокод<span class="marquee-promocode">LOVEBRAND</span>на скидку 25%</div>
<div class="marquee-text">Промокод<span class="marquee-promocode">LOVEBRAND</span>на скидку 25%</div>
</div>
<div class="marquee-content">
<div class="marquee-text">Промокод<span class="marquee-promocode">LOVEBRAND</span>на скидку 25%</div>
<div class="marquee-text">Промокод<span class="marquee-promocode">LOVEBRAND</span>на скидку 25%</div>
<div class="marquee-text">Промокод<span class="marquee-promocode">LOVEBRAND</span>на скидку 25%</div>
<div class="marquee-text">Промокод<span class="marquee-promocode">LOVEBRAND</span>на скидку 25%</div>
<div class="marquee-text">Промокод<span class="marquee-promocode">LOVEBRAND</span>на скидку 25%</div>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: #60BD67;
width: 100%;
height: 36px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
}
.marquee-svg-background {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.marquee-svg-background svg {
min-height: 100%;
object-fit: cover;
}
.marquee-text {
color: #FFF;
font-size: 13px;
line-height: 16px;
white-space: nowrap;
display: inline-block;
padding-right: 16px;
font-weight: 600;
text-transform: uppercase;
}
.marquee-content {
animation: marquee 14s linear infinite;
display: inline-block;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-svg-background">
<svg viewBox="0 0 390 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_8073_312)">
<rect width="390" height="36" fill="#8401EA"/>
<g filter="url(#filter0_f_8073_312)">
<ellipse cx="294" cy="-62" rx="76" ry="74" fill="#FE4087"/>
</g>
<g filter="url(#filter1_f_8073_312)">
<ellipse cx="117.5" cy="92.5" rx="86.5" ry="80.5" fill="#FE4087"/>
</g>
<g opacity="0.76">
<path d="M292.831 62.6503L310.164 9.51373L318.404 21.4482L340 0.420837L322.667 55.5465L314.71 41.9072L292.831 62.6503Z" fill="url(#paint0_linear_8073_312)"/>
<path d="M288 62.6506H292.831L310.164 9.51398H305.049L288 62.6506Z" fill="url(#paint1_linear_8073_312)"/>
<path d="M318.404 22.0164L316.131 18.0382L334.601 -1L339.716 0.704918L318.404 22.0164Z" fill="url(#paint2_linear_8073_312)"/>
<path d="M319.541 57.5355L311.585 44.4645L314.71 41.9071L322.667 55.2623L319.541 57.5355Z" fill="url(#paint3_linear_8073_312)"/>
</g>
<g opacity="0.78">
<path d="M53.8867 33.0379L64.2452 1.2831L69.1698 8.41521L82.0755 -4.15088L71.717 28.7926L66.9622 20.6417L53.8867 33.0379Z" fill="url(#paint4_linear_8073_312)"/>
<path d="M51 33.038H53.8868L64.2453 1.28314H61.1887L51 33.038Z" fill="url(#paint5_linear_8073_312)"/>
<path d="M69.17 8.75477L67.8115 6.3774L78.8493 -5L81.9059 -3.98113L69.17 8.75477Z" fill="url(#paint6_linear_8073_312)"/>
<path d="M69.8492 29.9813L65.0945 22.1699L66.9624 20.6416L71.7171 28.6228L69.8492 29.9813Z" fill="url(#paint7_linear_8073_312)"/>
</g>
</g>
<defs>
<filter id="filter0_f_8073_312" x="178" y="-176" width="232" height="228" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_8073_312"/>
</filter>
<filter id="filter1_f_8073_312" x="-9" y="-28" width="253" height="241" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_8073_312"/>
</filter>
<linearGradient id="paint0_linear_8073_312" x1="316.415" y1="0.420837" x2="316.415" y2="62.6503" gradientUnits="userSpaceOnUse">
<stop stop-color="#8F07E1"/>
<stop offset="1" stop-color="#F13991"/>
</linearGradient>
<linearGradient id="paint1_linear_8073_312" x1="297.847" y1="61.8509" x2="291.074" y2="45.818" gradientUnits="userSpaceOnUse">
<stop stop-color="#B70F8C"/>
<stop offset="1" stop-color="#8401EA"/>
</linearGradient>
<linearGradient id="paint2_linear_8073_312" x1="324.083" y1="56.6545" x2="317.356" y2="38.3072" gradientUnits="userSpaceOnUse">
<stop stop-color="#B70F8C"/>
<stop offset="1" stop-color="#8401EA"/>
</linearGradient>
<linearGradient id="paint3_linear_8073_312" x1="324.083" y1="56.6545" x2="317.356" y2="38.3072" gradientUnits="userSpaceOnUse">
<stop stop-color="#B70F8C"/>
<stop offset="1" stop-color="#8401EA"/>
</linearGradient>
<linearGradient id="paint4_linear_8073_312" x1="67.9811" y1="-4.15088" x2="67.9811" y2="33.0379" gradientUnits="userSpaceOnUse">
<stop stop-color="#8F07E1"/>
<stop offset="1" stop-color="#F13991"/>
</linearGradient>
<linearGradient id="paint5_linear_8073_312" x1="56.8847" y1="32.5601" x2="52.837" y2="22.9787" gradientUnits="userSpaceOnUse">
<stop stop-color="#B70F8C"/>
<stop offset="1" stop-color="#8401EA"/>
</linearGradient>
<linearGradient id="paint6_linear_8073_312" x1="72.5636" y1="29.4548" x2="68.5433" y2="18.4903" gradientUnits="userSpaceOnUse">
<stop stop-color="#B70F8C"/>
<stop offset="1" stop-color="#8401EA"/>
</linearGradient>
<linearGradient id="paint7_linear_8073_312" x1="72.5636" y1="29.4548" x2="68.5433" y2="18.4903" gradientUnits="userSpaceOnUse">
<stop stop-color="#B70F8C"/>
<stop offset="1" stop-color="#8401EA"/>
</linearGradient>
<clipPath id="clip0_8073_312">
<rect width="390" height="36" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<div class="marquee-content">
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
</div>
<div class="marquee-content">
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: #60BD67;
width: 100%;
height: 44px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
}
.marquee-svg-background {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.marquee-svg-background svg {
min-height: 100%;
object-fit: cover;
}
.marquee-text {
color: #292929;
font-size: 13px;
line-height: 16px;
white-space: nowrap;
display: inline-block;
padding-right: 16px;
text-transform: uppercase;
}
.marquee-content {
animation: marquee 14s linear infinite;
display: inline-block;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-svg-background">
<svg viewBox="0 0 390 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_8075_334)">
<rect width="390" height="44" fill="#FFD900"/>
<path d="M299.872 62.246L298.231 64.878C297.531 65.9746 296.897 66.6326 296.328 66.8519C295.802 67.1151 295.168 67.0274 294.424 66.5887L286.875 61.917C286.175 61.4344 285.803 60.8861 285.759 60.272C285.715 59.6578 286.043 58.8024 286.744 57.7058L288.385 55.0738L338.602 -26.1889L340.244 -28.8209C340.944 -29.9614 341.578 -30.6413 342.147 -30.8607C342.716 -31.1239 343.373 -31.0142 344.117 -30.5317L351.666 -25.7941C352.41 -25.3554 352.803 -24.829 352.847 -24.2149C352.891 -23.6008 352.563 -22.7234 351.863 -21.5829L350.221 -18.9509L299.872 62.246ZM288.844 18.2917C281.93 18.2917 276.394 16.1423 272.236 11.8434C268.079 7.54445 266 1.81988 266 -5.33036C266 -12.9631 268.188 -19.1264 272.564 -23.8201C276.941 -28.5138 282.914 -30.8607 290.485 -30.8607C297.925 -30.8607 303.614 -28.6673 307.553 -24.2807C311.491 -19.894 313.461 -14.1695 313.461 -7.10696C313.461 0.789013 311.163 6.99612 306.568 11.5144C302.017 16.0326 296.109 18.2917 288.844 18.2917ZM289.632 5.65819C295.321 5.65819 298.166 1.60054 298.166 -6.51476C298.166 -14.323 295.474 -18.2271 290.091 -18.2271C284.227 -18.2271 281.295 -14.1475 281.295 -5.98836C281.295 1.77601 284.074 5.65819 289.632 5.65819ZM348.383 66.1282C341.469 66.1282 335.933 63.9787 331.775 59.6798C327.618 55.3809 325.539 49.6563 325.539 42.506C325.539 34.8733 327.727 28.71 332.104 24.0163C336.48 19.3226 342.454 16.9757 350.025 16.9757C357.464 16.9757 363.153 19.1691 367.092 23.5557C371.031 27.9424 373 33.6669 373 40.7295C373 48.6254 370.702 54.8325 366.107 59.3508C361.556 63.869 355.648 66.1282 348.383 66.1282ZM349.171 53.4946C354.86 53.4946 357.705 49.437 357.705 41.3217C357.705 33.5134 355.013 29.6093 349.631 29.6093C343.766 29.6093 340.834 33.6889 340.834 41.848C340.834 49.6124 343.613 53.4946 349.171 53.4946Z" fill="white" fill-opacity="0.25"/>
<path d="M49.8724 62.246L48.2313 64.878C47.5311 65.9746 46.8965 66.6326 46.3276 66.8519C45.8025 67.1151 45.1679 67.0274 44.4239 66.5887L36.8748 61.917C36.1746 61.4344 35.8027 60.8861 35.7589 60.272C35.7151 59.6578 36.0434 58.8024 36.7436 57.7058L38.3847 55.0738L88.6025 -26.1889L90.2436 -28.8209C90.9438 -29.9614 91.5783 -30.6413 92.1472 -30.8607C92.7162 -31.1239 93.3726 -31.0142 94.1166 -30.5317L101.666 -25.7941C102.41 -25.3554 102.803 -24.829 102.847 -24.2149C102.891 -23.6008 102.563 -22.7234 101.863 -21.5829L100.221 -18.9509L49.8724 62.246ZM38.8442 18.2917C31.9297 18.2917 26.3937 16.1423 22.2362 11.8434C18.0787 7.54445 16 1.81988 16 -5.33036C16 -12.9631 18.1881 -19.1264 22.5644 -23.8201C26.9407 -28.5138 32.9143 -30.8607 40.4853 -30.8607C47.9249 -30.8607 53.6141 -28.6673 57.5528 -24.2807C61.4914 -19.894 63.4607 -14.1695 63.4607 -7.10696C63.4607 0.789013 61.1632 6.99612 56.5681 11.5144C52.0168 16.0326 46.1088 18.2917 38.8442 18.2917ZM39.6319 5.65819C45.3211 5.65819 48.1656 1.60054 48.1656 -6.51476C48.1656 -14.323 45.4742 -18.2271 40.0914 -18.2271C34.2272 -18.2271 31.2951 -14.1475 31.2951 -5.98836C31.2951 1.77601 34.074 5.65819 39.6319 5.65819ZM98.3834 66.1282C91.4689 66.1282 85.9329 63.9787 81.7755 59.6798C77.618 55.3809 75.5393 49.6563 75.5393 42.506C75.5393 34.8733 77.7274 28.71 82.1037 24.0163C86.48 19.3226 92.4536 16.9757 100.025 16.9757C107.464 16.9757 113.153 19.1691 117.092 23.5557C121.031 27.9424 123 33.6669 123 40.7295C123 48.6254 120.702 54.8325 116.107 59.3508C111.556 63.869 105.648 66.1282 98.3834 66.1282ZM99.1712 53.4946C104.86 53.4946 107.705 49.437 107.705 41.3217C107.705 33.5134 105.013 29.6093 99.6307 29.6093C93.7665 29.6093 90.8344 33.6889 90.8344 41.848C90.8344 49.6124 93.6133 53.4946 99.1712 53.4946Z" fill="white" fill-opacity="0.25"/>
<path d="M174.872 62.246L173.231 64.878C172.531 65.9746 171.897 66.6326 171.328 66.8519C170.802 67.1151 170.168 67.0274 169.424 66.5887L161.875 61.917C161.175 61.4344 160.803 60.8861 160.759 60.272C160.715 59.6578 161.043 58.8024 161.744 57.7058L163.385 55.0738L213.602 -26.1889L215.244 -28.8209C215.944 -29.9614 216.578 -30.6413 217.147 -30.8607C217.716 -31.1239 218.373 -31.0142 219.117 -30.5317L226.666 -25.7941C227.41 -25.3554 227.803 -24.829 227.847 -24.2149C227.891 -23.6008 227.563 -22.7234 226.863 -21.5829L225.221 -18.9509L174.872 62.246ZM163.844 18.2917C156.93 18.2917 151.394 16.1423 147.236 11.8434C143.079 7.54445 141 1.81988 141 -5.33036C141 -12.9631 143.188 -19.1264 147.564 -23.8201C151.941 -28.5138 157.914 -30.8607 165.485 -30.8607C172.925 -30.8607 178.614 -28.6673 182.553 -24.2807C186.491 -19.894 188.461 -14.1695 188.461 -7.10696C188.461 0.789013 186.163 6.99612 181.568 11.5144C177.017 16.0326 171.109 18.2917 163.844 18.2917ZM164.632 5.65819C170.321 5.65819 173.166 1.60054 173.166 -6.51476C173.166 -14.323 170.474 -18.2271 165.091 -18.2271C159.227 -18.2271 156.295 -14.1475 156.295 -5.98836C156.295 1.77601 159.074 5.65819 164.632 5.65819ZM223.383 66.1282C216.469 66.1282 210.933 63.9787 206.775 59.6798C202.618 55.3809 200.539 49.6563 200.539 42.506C200.539 34.8733 202.727 28.71 207.104 24.0163C211.48 19.3226 217.454 16.9757 225.025 16.9757C232.464 16.9757 238.153 19.1691 242.092 23.5557C246.031 27.9424 248 33.6669 248 40.7295C248 48.6254 245.702 54.8325 241.107 59.3508C236.556 63.869 230.648 66.1282 223.383 66.1282ZM224.171 53.4946C229.86 53.4946 232.705 49.437 232.705 41.3217C232.705 33.5134 230.013 29.6093 224.631 29.6093C218.766 29.6093 215.834 33.6889 215.834 41.848C215.834 49.6124 218.613 53.4946 224.171 53.4946Z" fill="white" fill-opacity="0.25"/>
</g>
<defs>
<clipPath id="clip0_8075_334">
<rect width="390" height="44" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<div class="marquee-content">
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
</div>
<div class="marquee-content">
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: radial-gradient(circle, rgba(17,0,47,1) 0%, rgba(116,66,205,1) 75%);
width: 100%;
height: 44px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
}
.marquee-text {
color: #FFF;
font-size: 13px;
line-height: 16px;
text-transform: uppercase;
white-space: nowrap;
display: inline-block;
padding-right: 12px;
font-weight: 600;
}
.marquee-content {
animation: marquee 14s linear infinite;
display: inline-block;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-content">
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
</div>
<div class="marquee-content">
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: #60BD67;
width: 100%;
height: 44px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
}
.marquee-svg-background {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.marquee-svg-background svg {
min-height: 100%;
object-fit: cover;
}
.marquee-text {
color: #FFF;
font-size: 13px;
line-height: 16px;
white-space: nowrap;
display: inline-block;
padding-right: 16px;
font-weight: 600;
text-transform: uppercase;
}
.marquee-content {
animation: marquee 14s linear infinite;
display: inline-block;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-svg-background">
<svg viewBox="0 0 390 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_8076_348)">
<rect width="390" height="44" fill="#8401EA"/>
<g filter="url(#filter0_f_8076_348)">
<ellipse cx="294" cy="-62" rx="76" ry="74" fill="#FE4087"/>
</g>
<g filter="url(#filter1_f_8076_348)">
<ellipse cx="117.5" cy="92.5" rx="86.5" ry="80.5" fill="#FE4087"/>
</g>
<g opacity="0.76">
<path d="M292.831 62.6503L310.164 9.51373L318.404 21.4482L340 0.420837L322.667 55.5465L314.71 41.9072L292.831 62.6503Z" fill="url(#paint0_linear_8076_348)"/>
<path d="M288 62.6506H292.831L310.164 9.51398H305.049L288 62.6506Z" fill="url(#paint1_linear_8076_348)"/>
<path d="M318.404 22.0164L316.131 18.0382L334.601 -1L339.716 0.704918L318.404 22.0164Z" fill="url(#paint2_linear_8076_348)"/>
<path d="M319.541 57.5355L311.585 44.4645L314.71 41.9071L322.667 55.2623L319.541 57.5355Z" fill="url(#paint3_linear_8076_348)"/>
</g>
<g opacity="0.78">
<path d="M53.8867 33.0379L64.2452 1.2831L69.1698 8.41521L82.0755 -4.15088L71.717 28.7926L66.9622 20.6417L53.8867 33.0379Z" fill="url(#paint4_linear_8076_348)"/>
<path d="M51 33.038H53.8868L64.2453 1.28314H61.1887L51 33.038Z" fill="url(#paint5_linear_8076_348)"/>
<path d="M69.17 8.75477L67.8115 6.3774L78.8493 -5L81.9059 -3.98113L69.17 8.75477Z" fill="url(#paint6_linear_8076_348)"/>
<path d="M69.8492 29.9813L65.0945 22.1699L66.9624 20.6416L71.7171 28.6228L69.8492 29.9813Z" fill="url(#paint7_linear_8076_348)"/>
</g>
</g>
<defs>
<filter id="filter0_f_8076_348" x="178" y="-176" width="232" height="228" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_8076_348"/>
</filter>
<filter id="filter1_f_8076_348" x="-9" y="-28" width="253" height="241" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_8076_348"/>
</filter>
<linearGradient id="paint0_linear_8076_348" x1="316.415" y1="0.420837" x2="316.415" y2="62.6503" gradientUnits="userSpaceOnUse">
<stop stop-color="#8F07E1"/>
<stop offset="1" stop-color="#F13991"/>
</linearGradient>
<linearGradient id="paint1_linear_8076_348" x1="297.847" y1="61.8509" x2="291.074" y2="45.818" gradientUnits="userSpaceOnUse">
<stop stop-color="#B70F8C"/>
<stop offset="1" stop-color="#8401EA"/>
</linearGradient>
<linearGradient id="paint2_linear_8076_348" x1="324.083" y1="56.6545" x2="317.356" y2="38.3072" gradientUnits="userSpaceOnUse">
<stop stop-color="#B70F8C"/>
<stop offset="1" stop-color="#8401EA"/>
</linearGradient>
<linearGradient id="paint3_linear_8076_348" x1="324.083" y1="56.6545" x2="317.356" y2="38.3072" gradientUnits="userSpaceOnUse">
<stop stop-color="#B70F8C"/>
<stop offset="1" stop-color="#8401EA"/>
</linearGradient>
<linearGradient id="paint4_linear_8076_348" x1="67.9811" y1="-4.15088" x2="67.9811" y2="33.0379" gradientUnits="userSpaceOnUse">
<stop stop-color="#8F07E1"/>
<stop offset="1" stop-color="#F13991"/>
</linearGradient>
<linearGradient id="paint5_linear_8076_348" x1="56.8847" y1="32.5601" x2="52.837" y2="22.9787" gradientUnits="userSpaceOnUse">
<stop stop-color="#B70F8C"/>
<stop offset="1" stop-color="#8401EA"/>
</linearGradient>
<linearGradient id="paint6_linear_8076_348" x1="72.5636" y1="29.4548" x2="68.5433" y2="18.4903" gradientUnits="userSpaceOnUse">
<stop stop-color="#B70F8C"/>
<stop offset="1" stop-color="#8401EA"/>
</linearGradient>
<linearGradient id="paint7_linear_8076_348" x1="72.5636" y1="29.4548" x2="68.5433" y2="18.4903" gradientUnits="userSpaceOnUse">
<stop stop-color="#B70F8C"/>
<stop offset="1" stop-color="#8401EA"/>
</linearGradient>
<clipPath id="clip0_8076_348">
<rect width="390" height="44" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<div class="marquee-content">
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
</div>
<div class="marquee-content">
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: #FFD900;
width: 100%;
height: 60px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
}
.marquee-text {
color: #292929;
font-size: 12px;
line-height: 16px;
text-transform: uppercase;
white-space: nowrap;
display: inline-block;
padding-right: 12px;
}
.marquee-content {
animation: marquee 12s linear infinite;
display: inline-block;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-content">
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
</div>
<div class="marquee-content">
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: #292929;
width: 100%;
height: 60px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
}
.marquee-text {
color: #FFD900;
font-size: 12px;
line-height: 16px;
text-transform: uppercase;
white-space: nowrap;
display: inline-block;
padding-right: 12px;
}
.marquee-content {
animation: marquee 12s linear infinite;
display: inline-block;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-content">
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
</div>
<div class="marquee-content">
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
<span class="marquee-text">SALE</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: #FFD900;
width: 100%;
height: 36px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
}
.marquee-svg-background {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.marquee-svg-background svg {
min-height: 100%;
object-fit: cover;
}
.marquee-text {
color: #292929;
font-size: 12px;
line-height: 16px;
white-space: nowrap;
display: inline-block;
padding-right: 10px;
font-weight: 500;
text-transform: uppercase;
}
.marquee-content {
animation: marquee 12s linear infinite;
display: inline-block;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-svg-background">
<svg viewBox="0 0 390 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_8077_376)">
<rect width="390" height="36" fill="#FFA403"/>
<g filter="url(#filter0_f_8077_376)">
<ellipse cx="294" cy="-62" rx="76" ry="74" fill="#FFD906"/>
</g>
<g filter="url(#filter1_f_8077_376)">
<ellipse cx="117.5" cy="92.5" rx="86.5" ry="80.5" fill="#FFD906"/>
</g>
<path d="M365.702 73.1053C350.737 69.0956 337.885 62.1109 327.144 52.1513C316.649 42.2573 309.295 30.4512 305.083 16.7329C301.116 3.08028 301.296 -11.8216 305.624 -27.9728L335.623 -139.93C336.672 -143.845 336.642 -147.657 335.532 -151.364C334.421 -155.071 332.534 -158.331 329.87 -161.143C327.205 -163.955 323.91 -165.887 319.985 -166.939C316.06 -167.991 312.241 -167.965 308.527 -166.862C304.813 -165.759 301.549 -163.879 298.734 -161.224C296.164 -158.503 294.355 -155.184 293.306 -151.269L243.242 35.5712L182.894 19.4009L231.777 -163.034C235.908 -178.451 242.982 -191.113 252.998 -201.019C263.26 -210.859 275.442 -217.561 289.544 -221.127C303.891 -224.626 318.792 -224.306 334.247 -220.164C349.947 -215.958 363.012 -208.785 373.442 -198.646C383.872 -188.507 391.07 -176.612 395.037 -162.959C399.004 -149.307 398.922 -134.772 394.791 -119.355L364.792 -7.3977C363.677 -3.23755 363.675 0.696123 364.785 4.40328C365.895 8.11044 367.66 11.3373 370.079 14.0838C372.809 16.6513 376.014 18.4281 379.694 19.4141C383.619 20.4658 387.406 20.5624 391.054 19.7039C395.013 18.6664 398.4 16.82 401.215 14.1646C404.03 11.5091 405.995 8.10133 407.109 3.94118L437.108 -108.016C441.239 -123.433 448.435 -136.062 458.697 -145.902C468.959 -155.742 481.14 -162.445 495.242 -166.01C509.589 -169.51 524.368 -169.222 539.578 -165.146C555.278 -160.939 568.22 -153.799 578.405 -143.727C588.835 -133.588 596.033 -121.692 600 -108.04C603.967 -94.3871 603.885 -79.8523 599.754 -64.4353L550.87 118L490.522 101.83L540.684 -85.3774C541.733 -89.2929 541.67 -92.9818 540.494 -96.4443C539.63 -100.086 537.865 -103.313 535.2 -106.125C532.536 -108.937 529.241 -110.869 525.316 -111.921C521.636 -112.907 517.817 -112.881 513.858 -111.843C510.144 -110.74 506.88 -108.861 504.065 -106.206C501.315 -103.795 499.416 -100.632 498.367 -96.7163L468.27 15.608C463.942 31.7591 456.525 44.7219 446.018 54.4963C435.511 64.2706 423.239 70.8181 409.203 74.1388C395.167 77.4595 380.666 77.115 365.702 73.1053Z" fill="url(#paint0_linear_8077_376)"/>
<path d="M74.8614 77.6634C61.9178 85.1365 48.3853 89.1394 34.2639 89.6722C20.3547 90.0826 7.28424 87.0452 -4.94749 80.5603C-16.967 73.9529 -27.0097 63.6641 -35.0754 49.6938L-90.9855 -47.1454C-92.9409 -50.5321 -95.5616 -53.1113 -98.8479 -54.883C-102.134 -56.6546 -105.645 -57.5908 -109.381 -57.6915C-113.118 -57.7923 -116.683 -56.8626 -120.078 -54.9025C-123.473 -52.9423 -126.061 -50.3193 -127.842 -47.0333C-129.623 -43.7473 -130.568 -40.2384 -130.677 -36.5066C-130.573 -32.8974 -129.544 -29.3994 -127.589 -26.0126L-83.3295 48.2003L-135.529 78.3375L-177.588 7.93461C-185.287 -5.40063 -189.099 -18.8635 -189.024 -32.4539C-188.736 -46.1668 -184.998 -59.0494 -177.811 -71.1016C-170.411 -83.2763 -160.027 -93.2227 -146.659 -100.941C-133.078 -108.781 -119.272 -112.801 -105.241 -113C-91.2096 -113.198 -78.1842 -109.994 -66.1647 -103.386C-54.1451 -96.7791 -44.2858 -86.8077 -36.5867 -73.4725L19.3234 23.3667C21.401 26.9651 24.0828 29.6502 27.3691 31.4218C30.6553 33.1934 34.0604 34.1909 37.5844 34.4141C41.1983 34.3032 44.5968 33.3289 47.7796 31.4913C51.1747 29.5312 53.8237 27.014 55.7267 23.9396C57.7198 20.5312 58.7707 16.961 58.8795 13.2292C58.9883 9.49746 58.004 5.83235 55.9265 2.23395L0.0163118 -94.6053C-7.68279 -107.94 -11.3886 -121.465 -11.101 -135.178C-10.8134 -148.89 -7.07577 -161.773 0.111988 -173.825C7.51193 -186 17.7899 -195.885 30.9458 -203.481C44.526 -211.321 58.2257 -215.28 72.0449 -215.356C86.0763 -215.554 99.1018 -212.35 111.121 -205.743C123.141 -199.135 133 -189.164 140.699 -175.829L158.888 -171.955L106.689 -141.818L86.1171 -149.819C84.1618 -153.206 81.6021 -155.679 78.4381 -157.239C75.3641 -159.133 71.959 -160.131 68.2228 -160.231C64.4867 -160.332 60.9211 -159.402 57.526 -157.442C54.3431 -155.605 51.7552 -152.982 49.7622 -149.573C47.9814 -146.287 47.0365 -142.778 46.9277 -139.047C46.6966 -135.526 47.5587 -132.073 49.5141 -128.686L105.608 -31.5295C113.673 -17.5593 117.456 -3.65642 116.956 10.179C116.457 24.0145 112.552 36.8525 105.242 48.693C97.9319 60.5336 87.8051 70.1904 74.8614 77.6634Z" fill="url(#paint1_linear_8077_376)"/>
</g>
<defs>
<filter id="filter0_f_8077_376" x="178" y="-176" width="232" height="228" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_8077_376"/>
</filter>
<filter id="filter1_f_8077_376" x="-9" y="-28" width="253" height="241" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_8077_376"/>
</filter>
<linearGradient id="paint0_linear_8077_376" x1="304.5" y1="77" x2="345.078" y2="-38.2967" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white" stop-opacity="0.34"/>
</linearGradient>
<linearGradient id="paint1_linear_8077_376" x1="23.4862" y1="-27.7228" x2="99" y2="79" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white" stop-opacity="0.34"/>
</linearGradient>
<clipPath id="clip0_8077_376">
<rect width="390" height="36" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<div class="marquee-content">
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
</div>
<div class="marquee-content">
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: #8401EA;
width: 100%;
height: 36px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
}
.marquee-svg-background {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.marquee-svg-background svg {
min-height: 100%;
object-fit: cover;
}
.marquee-text {
color: #FFF;
font-size: 13px;
line-height: 16px;
white-space: nowrap;
display: inline-block;
padding-right: 32px;
font-weight: 600;
}
.marquee-content {
animation: marquee 12s linear infinite;
display: inline-block;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-svg-background">
<svg viewBox="0 0 390 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_8073_312)">
<rect width="390" height="36" fill="#8401EA"/>
<g filter="url(#filter0_f_8073_312)">
<ellipse cx="294" cy="-62" rx="76" ry="74" fill="#FE4087"/>
</g>
<g filter="url(#filter1_f_8073_312)">
<ellipse cx="117.5" cy="92.5" rx="86.5" ry="80.5" fill="#FE4087"/>
</g>
<g opacity="0.76">
<path d="M292.831 62.6503L310.164 9.51373L318.404 21.4482L340 0.420837L322.667 55.5465L314.71 41.9072L292.831 62.6503Z" fill="url(#paint0_linear_8073_312)"/>
<path d="M288 62.6506H292.831L310.164 9.51398H305.049L288 62.6506Z" fill="url(#paint1_linear_8073_312)"/>
<path d="M318.404 22.0164L316.131 18.0382L334.601 -1L339.716 0.704918L318.404 22.0164Z" fill="url(#paint2_linear_8073_312)"/>
<path d="M319.541 57.5355L311.585 44.4645L314.71 41.9071L322.667 55.2623L319.541 57.5355Z" fill="url(#paint3_linear_8073_312)"/>
</g>
<g opacity="0.78">
<path d="M53.8867 33.0379L64.2452 1.2831L69.1698 8.41521L82.0755 -4.15088L71.717 28.7926L66.9622 20.6417L53.8867 33.0379Z" fill="url(#paint4_linear_8073_312)"/>
<path d="M51 33.038H53.8868L64.2453 1.28314H61.1887L51 33.038Z" fill="url(#paint5_linear_8073_312)"/>
<path d="M69.17 8.75477L67.8115 6.3774L78.8493 -5L81.9059 -3.98113L69.17 8.75477Z" fill="url(#paint6_linear_8073_312)"/>
<path d="M69.8492 29.9813L65.0945 22.1699L66.9624 20.6416L71.7171 28.6228L69.8492 29.9813Z" fill="url(#paint7_linear_8073_312)"/>
</g>
</g>
<defs>
<filter id="filter0_f_8073_312" x="178" y="-176" width="232" height="228" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_8073_312"/>
</filter>
<filter id="filter1_f_8073_312" x="-9" y="-28" width="253" height="241" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_8073_312"/>
</filter>
<linearGradient id="paint0_linear_8073_312" x1="316.415" y1="0.420837" x2="316.415" y2="62.6503" gradientUnits="userSpaceOnUse">
<stop stop-color="#8F07E1"/>
<stop offset="1" stop-color="#F13991"/>
</linearGradient>
<linearGradient id="paint1_linear_8073_312" x1="297.847" y1="61.8509" x2="291.074" y2="45.818" gradientUnits="userSpaceOnUse">
<stop stop-color="#B70F8C"/>
<stop offset="1" stop-color="#8401EA"/>
</linearGradient>
<linearGradient id="paint2_linear_8073_312" x1="324.083" y1="56.6545" x2="317.356" y2="38.3072" gradientUnits="userSpaceOnUse">
<stop stop-color="#B70F8C"/>
<stop offset="1" stop-color="#8401EA"/>
</linearGradient>
<linearGradient id="paint3_linear_8073_312" x1="324.083" y1="56.6545" x2="317.356" y2="38.3072" gradientUnits="userSpaceOnUse">
<stop stop-color="#B70F8C"/>
<stop offset="1" stop-color="#8401EA"/>
</linearGradient>
<linearGradient id="paint4_linear_8073_312" x1="67.9811" y1="-4.15088" x2="67.9811" y2="33.0379" gradientUnits="userSpaceOnUse">
<stop stop-color="#8F07E1"/>
<stop offset="1" stop-color="#F13991"/>
</linearGradient>
<linearGradient id="paint5_linear_8073_312" x1="56.8847" y1="32.5601" x2="52.837" y2="22.9787" gradientUnits="userSpaceOnUse">
<stop stop-color="#B70F8C"/>
<stop offset="1" stop-color="#8401EA"/>
</linearGradient>
<linearGradient id="paint6_linear_8073_312" x1="72.5636" y1="29.4548" x2="68.5433" y2="18.4903" gradientUnits="userSpaceOnUse">
<stop stop-color="#B70F8C"/>
<stop offset="1" stop-color="#8401EA"/>
</linearGradient>
<linearGradient id="paint7_linear_8073_312" x1="72.5636" y1="29.4548" x2="68.5433" y2="18.4903" gradientUnits="userSpaceOnUse">
<stop stop-color="#B70F8C"/>
<stop offset="1" stop-color="#8401EA"/>
</linearGradient>
<clipPath id="clip0_8073_312">
<rect width="390" height="36" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<div class="marquee-content">
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
</div>
<div class="marquee-content">
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: #60BD67;
width: 100%;
height: 36px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
}
.marquee-svg-background {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.marquee-svg-background svg {
min-height: 100%;
object-fit: cover;
}
.marquee-text {
color: #FFF;
font-size: 13px;
line-height: 16px;
white-space: nowrap;
display: inline-block;
font-weight: 600;
}
.marquee-content, .marquee-content-double {
width: 100%;
animation: marquee 8s linear infinite;
display: inline-block;
}
.marquee-content-double {
animation-delay: -4s;
}
@keyframes marquee {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-svg-background">
<svg viewBox="0 0 390 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_8079_386)">
<rect width="390" height="36" fill="#60BD67"/>
<path d="M308.31 31.2834L307.375 32.7874C306.976 33.4141 306.614 33.7901 306.29 33.9154C305.99 34.0658 305.628 34.0157 305.204 33.765L300.901 31.0954C300.501 30.8197 300.289 30.5063 300.264 30.1554C300.239 29.8045 300.427 29.3157 300.826 28.689L301.761 27.185L330.39 -19.2508L331.326 -20.7548C331.725 -21.4065 332.087 -21.795 332.411 -21.9204C332.735 -22.0708 333.11 -22.0081 333.534 -21.7324L337.837 -19.0252C338.262 -18.7745 338.486 -18.4737 338.511 -18.1228C338.536 -17.7719 338.349 -17.2705 337.95 -16.6188L337.014 -15.1148L308.31 31.2834ZM302.023 6.16671C298.081 6.16671 294.925 4.93845 292.555 2.48193C290.185 0.0254025 289 -3.24579 289 -7.33164C289 -11.6932 290.247 -15.2151 292.742 -17.8972C295.237 -20.5793 298.643 -21.9204 302.959 -21.9204C307.2 -21.9204 310.444 -20.667 312.689 -18.1604C314.934 -15.6537 316.057 -12.3825 316.057 -8.34683C316.057 -3.83485 314.747 -0.287929 312.128 2.29393C309.533 4.87578 306.165 6.16671 302.023 6.16671ZM302.472 -1.05246C305.716 -1.05246 307.337 -3.37112 307.337 -8.00843C307.337 -12.4703 305.803 -14.7012 302.734 -14.7012C299.391 -14.7012 297.72 -12.37 297.72 -7.70763C297.72 -3.27085 299.304 -1.05246 302.472 -1.05246ZM335.966 33.5018C332.024 33.5018 328.868 32.2735 326.498 29.817C324.128 27.3605 322.943 24.0893 322.943 20.0035C322.943 15.6419 324.19 12.12 326.685 9.4379C329.18 6.75578 332.586 5.41471 336.902 5.41471C341.143 5.41471 344.387 6.66804 346.632 9.1747C348.877 11.6814 350 14.9525 350 18.9883C350 23.5002 348.69 27.0472 346.071 29.629C343.476 32.2109 340.108 33.5018 335.966 33.5018ZM336.415 26.2826C339.659 26.2826 341.28 23.964 341.28 19.3267C341.28 14.8648 339.746 12.6339 336.677 12.6339C333.334 12.6339 331.663 14.9651 331.663 19.6275C331.663 24.0642 333.247 26.2826 336.415 26.2826Z" fill="url(#paint0_linear_8079_386)" fill-opacity="0.5"/>
<path d="M58.5558 56.2945L56.9301 58.8996C56.2364 59.9851 55.6078 60.6364 55.0442 60.8535C54.5239 61.114 53.8953 61.0271 53.1583 60.5929L45.6798 55.9688C44.9861 55.4912 44.6176 54.9485 44.5742 54.3406C44.5309 53.7328 44.856 52.8861 45.5497 51.8006L47.1755 49.1955L96.9239 -31.238L98.5497 -33.8431C99.2434 -34.972 99.872 -35.645 100.436 -35.8621C100.999 -36.1226 101.649 -36.014 102.387 -35.5364L109.865 -30.8472C110.602 -30.413 110.992 -29.892 111.036 -29.2841C111.079 -28.6763 110.754 -27.8079 110.06 -26.679L108.434 -24.0739L58.5558 56.2945ZM47.6307 12.7888C40.7808 12.7888 35.2965 10.6612 31.1779 6.40619C27.0593 2.15114 25 -3.51502 25 -10.5923C25 -18.1472 27.1677 -24.2475 31.5031 -28.8934C35.8384 -33.5392 41.7562 -35.8621 49.2564 -35.8621C56.6266 -35.8621 62.2626 -33.6911 66.1644 -29.3493C70.0663 -25.0074 72.0172 -19.3412 72.0172 -12.3508C72.0172 -4.53537 69.7411 1.60841 65.189 6.08055C60.6802 10.5527 54.8274 12.7888 47.6307 12.7888ZM48.411 0.284131C54.047 0.284131 56.865 -3.73212 56.865 -11.7646C56.865 -19.4932 54.1988 -23.3574 48.8663 -23.3574C43.0569 -23.3574 40.1521 -19.3195 40.1521 -11.2436C40.1521 -3.55844 42.9051 0.284131 48.411 0.284131ZM106.613 60.137C99.7636 60.137 94.2793 58.0095 90.1607 53.7545C86.0421 49.4994 83.9828 43.8333 83.9828 36.756C83.9828 29.2011 86.1505 23.1007 90.4859 18.4549C94.8213 13.8091 100.739 11.4862 108.239 11.4862C115.609 11.4862 121.245 13.6571 125.147 17.999C129.049 22.3409 131 28.0071 131 34.9975C131 42.8129 128.724 48.9567 124.172 53.4288C119.663 57.901 113.81 60.137 106.613 60.137ZM107.394 47.6324C113.03 47.6324 115.848 43.6162 115.848 35.5837C115.848 27.8551 113.182 23.9908 107.849 23.9908C102.04 23.9908 99.135 28.0288 99.135 36.1047C99.135 43.7898 101.888 47.6324 107.394 47.6324Z" fill="url(#paint1_linear_8079_386)" fill-opacity="0.5"/>
</g>
<defs>
<linearGradient id="paint0_linear_8079_386" x1="319.215" y1="-4.85714" x2="315.206" y2="23.1402" gradientUnits="userSpaceOnUse">
<stop stop-color="#60BD67"/>
<stop offset="1" stop-color="#A6D339"/>
</linearGradient>
<linearGradient id="paint1_linear_8079_386" x1="84.7791" y1="-2.23418" x2="70.6318" y2="42.2135" gradientUnits="userSpaceOnUse">
<stop stop-color="#A6D339"/>
<stop offset="1" stop-color="#60BD67"/>
</linearGradient>
<clipPath id="clip0_8079_386">
<rect width="390" height="36" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<div class="marquee-content">
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
</div>
<div class="marquee-content-double">
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: #60BD67;
width: 100%;
height: 36px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
}
.marquee-svg-background {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.marquee-svg-background svg {
min-height: 100%;
object-fit: cover;
}
.marquee-text {
color: #FFF;
font-size: 13px;
line-height: 16px;
white-space: nowrap;
display: inline-block;
font-weight: 600;
}
.marquee-content, .marquee-content-double {
width: 100%;
animation: marquee 8s linear infinite;
display: inline-block;
}
.marquee-content-double {
animation-delay: -4s;
}
@keyframes marquee {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-svg-background">
<svg viewBox="0 0 390 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_8079_391)">
<rect width="390" height="36" fill="url(#paint0_linear_8079_391)"/>
<path d="M41.8462 9.84615C45.3608 6.33155 46.5 -2 46.5 -2C46.5 -2 47.6392 6.33155 51.1538 9.84615C54.6685 13.3608 63 14.5 63 14.5C63 14.5 54.6685 15.6392 51.1538 19.1538C47.6392 22.6685 46.5 31 46.5 31C46.5 31 45.3608 22.6685 41.8462 19.1538C38.3315 15.6392 30 14.5 30 14.5C30 14.5 38.3315 13.3608 41.8462 9.84615Z" fill="white" fill-opacity="0.2"/>
<path d="M341.692 23.6923C344.568 20.8167 345.5 14 345.5 14C345.5 14 346.432 20.8167 349.308 23.6923C352.183 26.5679 359 27.5 359 27.5C359 27.5 352.183 28.4321 349.308 31.3077C346.432 34.1833 345.5 41 345.5 41C345.5 41 344.568 34.1833 341.692 31.3077C338.817 28.4321 332 27.5 332 27.5C332 27.5 338.817 26.5679 341.692 23.6923Z" fill="white" fill-opacity="0.2"/>
<path d="M21.1795 30.1795C23.3096 28.0494 24 23 24 23C24 23 24.6904 28.0494 26.8205 30.1795C28.9506 32.3096 34 33 34 33C34 33 28.9506 33.6904 26.8205 35.8205C24.6904 37.9506 24 43 24 43C24 43 23.3096 37.9506 21.1795 35.8205C19.0494 33.6904 14 33 14 33C14 33 19.0494 32.3096 21.1795 30.1795Z" fill="white" fill-opacity="0.2"/>
</g>
<defs>
<linearGradient id="paint0_linear_8079_391" x1="40.5" y1="-18.45" x2="385.481" y2="74.7733" gradientUnits="userSpaceOnUse">
<stop stop-color="#8401EA"/>
<stop offset="1" stop-color="#FE4087"/>
</linearGradient>
<clipPath id="clip0_8079_391">
<rect width="390" height="36" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<div class="marquee-content">
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
</div>
<div class="marquee-content-double">
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: linear-gradient(92deg, #A8DA09 1.46%, #10AA23 52.41%, #119FE6 97.96%);
width: 100%;
height: 36px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
}
.marquee-text {
color: #FFF;
font-size: 13px;
line-height: 16px;
white-space: nowrap;
display: flex;
align-items: center;
font-weight: 600;
}
.marquee-marker {
width: 8px;
height: 8px;
margin: 0 12px;
display: inline-block;
}
.marquee-content {
animation: marquee 16s linear infinite;
display: flex;
align-items: center;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-content">
<div class="marquee-text">Скидки до 50% на летнюю коллекцию<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
<div class="marquee-text">Скидки до 50% на летнюю коллекцию<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
<div class="marquee-text">Скидки до 50% на летнюю коллекцию<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
<div class="marquee-text">Скидки до 50% на летнюю коллекцию<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
<div class="marquee-text">Скидки до 50% на летнюю коллекцию<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
</div>
<div class="marquee-content">
<div class="marquee-text">Скидки до 50% на летнюю коллекцию<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
<div class="marquee-text">Скидки до 50% на летнюю коллекцию<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
<div class="marquee-text">Скидки до 50% на летнюю коллекцию<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
<div class="marquee-text">Скидки до 50% на летнюю коллекцию<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
<div class="marquee-text">Скидки до 50% на летнюю коллекцию<span class="marquee-marker">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.87179 2.87179C3.72382 2.01977 4 0 4 0C4 0 4.27618 2.01977 5.12821 2.87179C5.98023 3.72382 8 4 8 4C8 4 5.98023 4.27618 5.12821 5.12821C4.27618 5.98023 4 8 4 8C4 8 3.72382 5.98023 2.87179 5.12821C2.01977 4.27618 0 4 0 4C0 4 2.01977 3.72382 2.87179 2.87179Z" fill="white"/>
</svg>
</span>
</div>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: #FFD900;
width: 100%;
height: 36px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
}
.marquee-svg-background {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.marquee-svg-background svg {
min-height: 100%;
object-fit: cover;
}
.marquee-text {
color: #292929;
font-size: 13px;
line-height: 16px;
white-space: nowrap;
display: inline-block;
padding-right: 16px;
}
.marquee-content {
animation: marquee 12s linear infinite;
display: inline-block;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-svg-background">
<svg viewBox="0 0 390 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_8084_402)">
<rect width="390" height="36" fill="url(#paint0_linear_8084_402)"/>
<rect width="390" height="36" fill="white" fill-opacity="0.47"/>
<path d="M41.8462 9.84615C45.3608 6.33155 46.5 -2 46.5 -2C46.5 -2 47.6392 6.33155 51.1538 9.84615C54.6685 13.3608 63 14.5 63 14.5C63 14.5 54.6685 15.6392 51.1538 19.1538C47.6392 22.6685 46.5 31 46.5 31C46.5 31 45.3608 22.6685 41.8462 19.1538C38.3315 15.6392 30 14.5 30 14.5C30 14.5 38.3315 13.3608 41.8462 9.84615Z" fill="white" fill-opacity="0.2"/>
<path d="M341.692 23.6923C344.568 20.8167 345.5 14 345.5 14C345.5 14 346.432 20.8167 349.308 23.6923C352.183 26.5679 359 27.5 359 27.5C359 27.5 352.183 28.4321 349.308 31.3077C346.432 34.1833 345.5 41 345.5 41C345.5 41 344.568 34.1833 341.692 31.3077C338.817 28.4321 332 27.5 332 27.5C332 27.5 338.817 26.5679 341.692 23.6923Z" fill="white" fill-opacity="0.2"/>
<path d="M21.1795 30.1795C23.3096 28.0494 24 23 24 23C24 23 24.6904 28.0494 26.8205 30.1795C28.9506 32.3096 34 33 34 33C34 33 28.9506 33.6904 26.8205 35.8205C24.6904 37.9506 24 43 24 43C24 43 23.3096 37.9506 21.1795 35.8205C19.0494 33.6904 14 33 14 33C14 33 19.0494 32.3096 21.1795 30.1795Z" fill="white" fill-opacity="0.2"/>
</g>
<defs>
<linearGradient id="paint0_linear_8084_402" x1="40.5" y1="-18.45" x2="385.481" y2="74.7733" gradientUnits="userSpaceOnUse">
<stop stop-color="#8401EA"/>
<stop offset="1" stop-color="#FE4087"/>
</linearGradient>
<clipPath id="clip0_8084_402">
<rect width="390" height="36" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<div class="marquee-content">
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
</div>
<div class="marquee-content">
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
</div>
</div>
</div>
HTML
<style>
.marquee-wrapper {
margin-bottom: 20px;
}
.marquee-container {
background: #60BD67;
width: 100%;
height: 36px;
overflow: hidden;
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
}
.marquee-svg-background {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.marquee-svg-background svg {
min-height: 100%;
object-fit: cover;
}
.marquee-text {
color: #FFF;
font-size: 13px;
line-height: 16px;
white-space: nowrap;
display: inline-block;
font-weight: 600;
}
.marquee-content, .marquee-content-double {
width: 100%;
animation: marquee 8s linear infinite;
display: inline-block;
}
.marquee-content-double {
animation-delay: -4s;
}
@keyframes marquee {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="marquee-wrapper">
<div class="marquee-container">
<div class="marquee-svg-background">
<svg viewBox="0 0 390 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_8086_411)">
<rect width="390" height="36" fill="url(#paint0_linear_8086_411)"/>
<path d="M288.717 -10C284.844 -10 281.292 -8.21907 279 -5.28844C276.708 -8.21907 273.156 -10 269.283 -10C262.511 -10 257 -4.55578 257 2.1396C257 5.28439 258.215 8.27139 260.426 10.5483L277.751 27.7601L279 29L280.249 27.7601L297.242 10.8751C299.648 8.587 301 5.47601 301 2.1396C301 -4.55578 295.489 -10 288.717 -10Z" fill="url(#paint1_linear_8086_411)"/>
<path d="M349.95 23C346.781 23 343.875 24.4613 342 26.8659C340.125 24.4613 337.219 23 334.05 23C328.509 23 324 27.4671 324 32.9607C324 35.541 324.994 37.9919 326.803 39.8601L340.978 53.9827L342 55L343.022 53.9827L356.925 40.1283C358.894 38.2509 360 35.6983 360 32.9607C360 27.4671 355.491 23 349.95 23Z" fill="url(#paint2_linear_8086_411)"/>
<path d="M105.352 14.4726C101.721 10.4129 96.439 8.04478 91.1569 7.70647H90.4967C83.8942 7.70647 77.9519 11.0896 73.9904 16.5025C70.359 9.39801 63.4263 5 55.8334 5H55.5033C49.8912 5 44.279 7.36816 40.6476 11.7662C36.6861 15.8259 34.7054 21.5771 35.0355 27.3284C35.6957 37.4776 40.6476 42.5522 45.2694 46.9502C50.5514 52.3632 55.5033 56.7612 53.8527 69.6169C53.8527 71.6468 54.8431 73 56.4937 73C57.1539 73 57.4841 73 58.4745 72.6617C92.8076 61.8358 110.965 47.2886 110.965 31.0498V30.7114C111.295 24.2836 109.314 18.8706 105.352 14.4726Z" fill="url(#paint3_linear_8086_411)" fill-opacity="0.59"/>
<path d="M35.4625 24C33.0859 24 30.9062 25.096 29.5 26.8994C28.0938 25.096 25.9141 24 23.5375 24C19.382 24 16 27.3503 16 31.4705C16 33.4058 16.7453 35.2439 18.1023 36.6451L28.7336 47.237L29.5 48L30.2664 47.237L40.6938 36.8462C42.1703 35.4382 43 33.5237 43 31.4705C43 27.3503 39.618 24 35.4625 24Z" fill="url(#paint4_linear_8086_411)" fill-opacity="0.59"/>
</g>
<defs>
<linearGradient id="paint0_linear_8086_411" x1="40.5" y1="-18.45" x2="385.481" y2="74.7733" gradientUnits="userSpaceOnUse">
<stop stop-color="#8401EA"/>
<stop offset="1" stop-color="#FE4087"/>
</linearGradient>
<linearGradient id="paint1_linear_8086_411" x1="290" y1="-22" x2="252" y2="36" gradientUnits="userSpaceOnUse">
<stop stop-color="#FE4087"/>
<stop offset="1" stop-color="#8401EA"/>
</linearGradient>
<linearGradient id="paint2_linear_8086_411" x1="351" y1="13.1538" x2="319.785" y2="60.6622" gradientUnits="userSpaceOnUse">
<stop stop-color="#C121B9"/>
<stop offset="1" stop-color="#FE4087"/>
</linearGradient>
<linearGradient id="paint3_linear_8086_411" x1="42.8923" y1="-29.85" x2="114.972" y2="-27.8405" gradientUnits="userSpaceOnUse">
<stop stop-color="#8401EA"/>
<stop offset="1" stop-color="#FE4087"/>
</linearGradient>
<linearGradient id="paint4_linear_8086_411" x1="18.8038" y1="11.7" x2="44.411" y2="12.4186" gradientUnits="userSpaceOnUse">
<stop stop-color="#8401EA"/>
<stop offset="1" stop-color="#FE4087"/>
</linearGradient>
<clipPath id="clip0_8086_411">
<rect width="390" height="36" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<div class="marquee-content">
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
</div>
<div class="marquee-content-double">
<span class="marquee-text">Скидки до 50% на летнюю коллекцию</span>
</div>
</div>
</div>
Обновлено 01.09.2025 10:42