<style>
@keyframes noiseAnimation {
0% { background-position: 0 0, 0 0; }
10% { background-position: 320px -280px, -600px 250px; }
20% { background-position: -900px 500px, 150px -400px; }
30% { background-position: 450px -800px, -200px 900px; }
40% { background-position: -1000px 300px, 700px -700px; }
50% { background-position: 200px 1200px, -100px 300px; }
60% { background-position: -700px -700px, 500px 500px; }
70% { background-position: 1100px -500px, -900px 700px; }
80% { background-position: -1500px 800px, 800px -600px; }
90% { background-position: 600px 600px, -300px -300px; }
100% { background-position: 0 0, 0 0; }
}
.sections .section-background {
background-image:
repeating-linear-gradient(
45deg,
rgba(0, 0, 0, 0.04),
rgba(0, 0, 0, 0.04) 1px,
rgba(255, 255, 255, 0.04) 1px,
rgba(255, 255, 255, 0.04) 2px
),
repeating-linear-gradient(
-60deg,
rgba(0, 0, 0, 0.02),
rgba(0, 0, 0, 0.02) 1px,
rgba(255, 255, 255, 0.02) 1px,
rgba(255, 255, 255, 0.02) 2px
),
url('https://images.squarespace-cdn.com/content/v1/67e9bdb18b8cdf5eaae0e23a/817e8a6b-a1db-4863-9723-bb5791279deb/That+Darn+Racket.png');
background-size: 800px 800px, 1200px 1200px, 1500px;
animation: noiseAnimation 0.4s steps(1, end) infinite;
opacity: 0.41;
background-blend-mode: overlay;
}
</style>