HTML
<div class="container"> <div class="stripe"> <div class="stripe_inner">EMANDARINE</div> </div> </div>
CSS
.container{ overflow: hidden; } .stripe { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .stripe_inner { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 8rem; text-align: center; font-family: "Anton", sans-serif; color: rgba(255, 255, 255, 0); background: repeating-linear-gradient(45deg, #ff7e00e8 25%, #ff7e00e8 50%, #313131 50%, #313131 75%); background-size: 100px 100px; -webkit-background-clip: text; background-clip: text; -webkit-animation: stripeBackgroundPosition 2s linear infinite; animation: stripeBackgroundPosition 2s linear infinite; } .stripe::before { content: ""; position: absolute; top: 0; left: 0; width: calc(100% + 100px); height: 100%; background: repeating-linear-gradient(45deg, #313131 25%, #313131 50%, #ff7e00e8 50%, #ff7e00e8 75%); background-size: 100px 100px; -webkit-animation: stripeTransform 2s linear infinite; animation: stripeTransform 2s linear infinite; } .stripe::after { content: ""; position: absolute; width: 100%; height: 100%; background: radial-gradient(ellipse at center, rgba(27, 39, 53, 0) 0%, #090a0f 100%); } @-webkit-keyframes stripeTransform { 0% { transform: translateX(0); } 100% { transform: translateX(calc(100px * -1)); } } @keyframes stripeTransform { 0% { transform: translateX(0); } 100% { transform: translateX(calc(100px * -1)); } } @-webkit-keyframes stripeBackgroundPosition { 0% { background-position: 0 0; } 100% { background-position: calc(100px * -1) 0; } } @keyframes stripeBackgroundPosition { 0% { background-position: 0 0; } 100% { background-position: calc(100px * -1) 0; } } @media screen and (max-width: 768px){ .stripe_inner{ font-size: 4rem; } } @media screen and (min-width: 769px) and (max-width: 1023px){ .stripe_inner{ font-size: 6rem; } } @media screen and (min-width: 1024px) and (max-width: 1215px){ .stripe_inner{ font-size: 7rem; } } @media screen and (min-width: 1216px) and (max-width: 1407px){ .stripe_inner{ font-size: 8rem; } }