Creating an animated tv static effect using just a gradient

HTML-CSS
1

I was able to do this, can it be improved?

https://jsfiddle.net/tvLfzao6/

html,
body {
  width: 100%;
  height: 100%;
  display: flex;
}

.animation {
  width: 500px;
  height: 300px;
  margin: auto;
  background-image: repeating-radial-gradient(circle at 17% 32%, white, black 0.00085px);
  animation: tv-static 5s linear infinite;
}

@keyframes tv-static {
  from {
    background-size: 100% 100%;
  }

  to {
    background-size: 200% 200%;
  }
}

<div class="animation"></div>

2

Here’s a related discussion:
https://stackoverflow.com/questions/70208639/how-to-improve-an-animated-tv-static-effect-using-a-pure-css-gradient

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.