Трюк по CSS ⭐ Вы можете создать этот сверкающий фон с помощью одного элемента, используя mask-composite, при этом анимируя mask-position. .canvas { background: var(--gradient); mask: var(--dots), var(--noise); mask-composite: intersect /* source-in, xor */; animation: flicker; } @keyframes flicker { to { mask-position: 50% 50% , 0 50%; } } Хитрость заключается в том, чтобы наложить маски друг на друга, а затем использовать значение intersect для mask-composite✨. Intersect работает так же, как и в SVG, объединяя маски и беря их пересечение. Маска dots — это базовый radial-gradient, который повторяется по всему элементу. Маска noise — сгенерированное изображение шума Перлина. mask: radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / 40px 40px; mask: url("noise.png") 50% 50% / 256px 256px; https://codepen.io/jh3y/pen/ExrWOJe @javascript_react