How to improve an animated tv static effect using a pure css gradient

Admin 1
Viewed 1582

How would I be able to improve this animated static noise effect using a css gradient?

CSS only, no javascript, no svg, no image, using only a gradient, and adjusting that.

A tv no signal noise effect is what I am looking for using a css gradient.

Does anyone know how this effect can be improved, made better?

Is there a better way it can be written?

I am looking for something that is more accurate to a tv noise effect.

I think the way this effect is written can be improved.

Are there any tweaks or adjustments that can be made to it to so that it better depicts a tv noise effect?

The gradient can be anything, as long as it is a gradient, it doesn't matter what kind.

This one uses radial gradient:

https://jsfiddle.net/xhdkza5w/

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

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

@keyframes back {
    from {
    background-size: 100% 100%;
  }
  to {
    background-size: 200% 200%;
  }
}
<div class="tv-static"></div>

This one uses a conic-gradient: https://jsfiddle.net/bkx50apm/

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

.tv-static {
  width: 500px;
  height: 300px;
  margin: auto;
  background-image: repeating-conic-gradient(white, black 0.00085%);
  animation: back 25s linear infinite;
}

@keyframes back {
    from {
    background-size: 100% 100%;
  }
  to {
    background-size: 200% 200%;
  }
}
<div class="tv-static"></div>

css-animations noise gradient css
3 Answers

Do you mean this effect?

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


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

@keyframes animation {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 240px 240px;
  }
}
<div class="animation"></div>

Or this effect?

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


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

@keyframes back {
    from {
    background-size: 100% 100%;
  }
  to {
    background-size: 200% 200%;
  }
}
<div class="animation"></div>

Edit: Added background-position: center.

user_164318420

By overlaying 2 of those effect on top of each other and each div has a different animation, you can create interference between the two that removes the artifacts of only having 1 static noise made from a single div.

This might be improved as I'm not well versed in css but the proof of concept works

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

.container_row {
  display: flex;
}

.layer1 {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}

.layer2 {
  width: 100%;
  margin-left: -100%;
  background-color: rgba(255, 255, 255, 0.5);
}

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

.animation1 {
  animation: back1 1s linear infinite;
}

.animation2 {
  animation: back2 0.1s linear infinite;
}

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

  to {
    background-size: 99% 100%;
  }
}

@keyframes back2 {
  from {
    background-size: 48.56% 50%;
  }

  to {
    background-size: 43.9% 50.1%;
  }
}
<div class="layer1">
    <div class="tv-static animation1"></div>
</div>

<div class="layer2">
    <div class="tv-static animation2"></div>
</div>

user_86294530

With smooth timing function, animations don't give that effect we need to use step timing function to give those sudden change effect.
Solution 1: I've changed animation. And tweaked your gradient a little bit. I think using gradient is not a reliable solution because browsers do calculations differently and fractions, rounding change output. You are using radial gradient it looks things are going outwards from center of the placement. You'll have to test his on every platform and browser to see if it looks same.

Solution 2: Used SVG instead of gradient. The feTurbulence filter gives the noise effect. You can use svg as background-image.

Solution 3: Used image instead of gradient with same animation. Advantage of using image is that it'll look same across all browsers and screens.

Solution 3: Simply used noise gif image. No animation is required. :)
View following in 'full page' mode:

body {
  text-align: center;
}

.tv {
  width: 400px;
  height: 200px;
  border: 6px solid black;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  border-radius: 50% / 10%;
}

.tv-static {
  position: absolute;
  top: -200px;
  left: -200px;
  margin: auto;
  height: 800px;
  width: 800px;
  background-image: repeating-radial-gradient(circle at 17% 132%, white 0.0005px, black 0.00085px);
  animation: anim 1s steps(2, jump-both) infinite both;
  transform: translate3d(0, 0, 0);
}


/******************************/

.tv0 {
  width: 400px;
  height: 200px;
  border: 6px solid black;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  border-radius: 50% / 10%;
  isolation: isolate;
}

.tv-static0 {
  position: absolute;
  top: 0px;
  left: 0px;
  margin: auto;
  height: 300%;
  width: 300%;
  animation: anim 1s steps(2, end) infinite both;
  transform: translate3d(0, 0, 0);
  filter: contrast(300%) brightness(50%);
}

.tv-static0 svg {
  height: 200%;
  width: 100%;
  transform: scale(2.5);
}


/******************************/

.tv1 {
  width: 400px;
  height: 200px;
  border: 6px solid black;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  border-radius: 50% / 10%;
}

.tv-static1 {
  position: absolute;
  top: -500px;
  right: -500px;
  bottom: -500px;
  left: -500px;
  margin: auto;
  background-image: url(https://i.stack.imgur.com/uzEM4.png);
  animation: anim 1s steps(2, end) infinite both;
  transform: translate3d(0, 0, 0);
}


/******************************/

.tv2 {
  width: 400px;
  height: 200px;
  border: 6px solid black;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  border-radius: 50% / 10%;
}

.tv-static2 {
  position: absolute;
  top: -500px;
  right: -500px;
  bottom: -500px;
  left: -500px;
  margin: auto;
  background-image: url(https://i.stack.imgur.com/9Be02.gif);
  transform: translate3d(0, 0, 0);
}

@keyframes anim {
  0% {
    transform: translateX(0px, 0px);
  }
  10% {
    transform: translate(-100px, 100px);
  }
  20% {
    transform: translate(150px, -100px);
  }
  30% {
    transform: translate(-100px, 100px);
  }
  40% {
    transform: translate(100px, -150px);
  }
  50% {
    transform: translate(-100px, 200px);
  }
  60% {
    transform: translate(-200px, -100px);
  }
  70% {
    transform: translateY(50px, 100px);
  }
  80% {
    transform: translate(100px, -150px);
  }
  90% {
    transform: translate(0px, 200px);
  }
  100% {
    transform: translate(-100px, 100px);
  }
}
Your original code. modified. May not work on every browser.
<div class="tv">
  <div class="tv-static"></div>
</div>
<br> Using SVG `feTurbulence` filter
<div class="tv0">
  <div class="tv-static0">
    <svg viewBox="0 0 200% 200%" xmlns='http://www.w3.org/2000/svg'>

        <filter id='noiseFilter'>
          <feTurbulence type='turbulence' result='noise' baseFrequency='0.7' numOctaves='6' seed='2'
            stitchTiles='noStitch' />
        </filter>

        <rect width='100%' height='100%' filter='url(#noiseFilter)' />
      </svg>
    <div class="overlay"></div>
  </div>
</div>
<br>
<br> Animating image. Color TV
<div class="tv1">
  <div class="tv-static1"></div>
</div>
<br> Using gif. No animation.
<div class="tv2">
  <div class="tv-static2"></div>
</div>

user_152739680
Related