I was able to do this, can it be improved?
https://jsfiddle.net/apfoq81z/
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>
Looks good to me.
How would I create this using a conic gradient?
The % number in there would be changed to something I think.
https://jsfiddle.net/hsx7urmk/
Is there some sort of math equation that tells you the percent it should be?
.animation {
width: 500px;
height: 300px;
margin: auto;
background: repeating-conic-gradient(deeppink, #fc0, #000, red, green, gray 0.1%);
animation: tv-static 25s infinite linear;
}
It’s shown in here, but in there there are multiple animations going on at 1 time.
To see animation, cursor can’t be on top of it, that causes it to pause.
html, body {
width: 100%;
height: 100%;
}
@property --per {
syntax: '<percentage>';
inherits: false;
initial-value: 100%;
}
body {
background: repeating-conic-gradient(deeppink, #fc0, #000, red, green, gray var(--per));
animation: perChange 25s infinite linear;
cursor: pointer;
&:hover {
animation-play-state: paused;
}
}
@keyframes perChange {
5% {
--per: 1%;
}
10% {
--per: .1%;
}
30% {
--per: .01%;
}
50% {
--per: .001%;
}
70% {
--per: .0001%;
}
78% {
--per: .00001%;
}
90% {
--per: .000001%;
}
95%,
100% {
--per: .0000001%;
}
}
How would this be set up differently?
.animation {
width: 500px;
height: 300px;
margin: auto;
background: repeating-conic-gradient(deeppink, #fc0, #000, red, green, gray .1%);
animation: tv-static 25s infinite linear;
}
@keyframes tv-static {
from {
background-size: 100% 100%;
}
to {
background-size: 200% 200%;
}
}
I don’t think I should be using background-size to do this static effect animation.
It pushes the gradient off to the right, where it does not stay in the middle, like how it is in the codepen example, in there it stays in the middle.
or, maybe that would be fixed a different way.
In here, what would --per be replaced with?
@keyframes perChange {
5% {
--per: 1%;
}
10% {
--per: .1%;
}
30% {
--per: .01%;
}
50% {
--per: .001%;
}
70% {
--per: .0001%;
}
78% {
--per: .00001%;
}
90% {
--per: .000001%;
}
95%,
100% {
--per: .0000001%;
}
Why don’t you just playa round with the colors in your black and white demo instead as that looks easier to manage.
.animation {
width: 500px;
height: 300px;
margin: auto;
background-image: repeating-radial-gradient(circle at 17% 32%, white, blue, red, orange, black 0.00085px);
animation: tv-static 5s linear infinite;
}
That uses the experimental @property rule so won’t work in Firefox I believe.
How do I keep the animation in the middle? https://jsfiddle.net/4f1moa5g/2/
It moves from the left to the right I believe.
.animation {
width: 500px;
height: 300px;
margin: auto;
background-image: repeating-radial-gradient(circle at 17% 32%, white, blue, red, orange, black);
background-repeat: no-repeat;
animation: tv-static 5s linear infinite;
}
@keyframes tv-static {
from {
background-size: 100% 100%;
}
to {
background-size: 200% 200%;
}
}
Here also: The animation does not stay in the middle.
This one uses conic: https://jsfiddle.net/L3r4neo1/
.animation {
width: 500px;
height: 300px;
margin: auto;
background-image: repeating-conic-gradient(blue, black
/*0.00085%*/
);
animation: tv-static 5s linear infinite;
}
@keyframes tv-static {
from {
background-size: 100% 100%;
}
to {
background-size: 200% 200%;
}
}
How is the animation able to stay in the middle?
The experimental @property rule controls that?
You don’t seem to be animating anything other than doubling its size. You are just moving the middle away from the centre.
If you put the background-position:to 50% 50% then it will stay n the middle but you will see nothing because the element will expand on each edge.
.animation {
width: 500px;
height: 300px;
margin: auto;
background-image: repeating-conic-gradient(blue, black
/*0.00085%*/
);
animation: tv-static 5s linear infinite;
background-position:50% 50%;
}
No it has nothing to do with that. I’m not sure what that experimental property is doing that a css variable couldn’t do in that context but I haven’t given @property more than a cursory glance as it’s experimental and poorly supported.
In that one you’d need to set the circle to the centre (circle at 50% 50%,) and then the background-position at 50% as already mentioned.
.animation {
width: 500px;
height: 300px;
margin: auto;
background-image: repeating-radial-gradient(circle at 50% 50%, white, blue, red, orange, black);
background-repeat: no-repeat;
animation: tv-static 5s linear infinite;
background-position :50% 50%;
}
How come a repeating-conic gradient only uses % and not px it seems?
https://jsfiddle.net/dqksu7pg/
.grain3 {
width: 300px;
height: 300px;
background-image: repeating-conic-gradient(blue, black 0.00085%);
}
I found this:
The position of color-stops for a conic gradient can be specified either in terms of percentage or in terms of degrees. A value of 0% or 0deg refers to the top of the conic gradient. The values keep increasing gradually as you move clockwise. A value of 360deg is equivalent to 0deg. Any color whose color-stop value is greater than 100% or 360deg won’t be drawn on the conic gradient but it will still affect its color distribution.
Because there is not a linear dimension to measure. The gradient repeats around a centre point so 100% is equal to 360 degrees.
Your example could be written like this:
background-image: repeating-conic-gradient(blue, black .0306deg);
These don’t create the exact same image: https://jsfiddle.net/wrxL2pb4/
Is there a math equation that figures it out?
I think you meant: 0.00306deg
.grain {
width: 300px;
height: 300px;
background-image: repeating-conic-gradient(red, black 0.00085%);
}
.grain2 {
width: 300px;
height: 300px;
background-image: repeating-conic-gradient(red, black 0.0306deg);
}
Are there any advantages of using deg over % and vice versa?
Yes I meant .00306 (3.6 * .000085).
I guess its easier to easier to divide 100% as you’d have 25% and 50% etc instead of 90deg and 180deg but its all math in the end.
Grainy texture effects can be made using these.
background-image: repeating-conic-gradient(blue, black 0.00085%);
background-image: repeating-radial-gradient(red, black 0.00085%);
Can a grain effect be made using a repeating-linear-gradient ?
Would it be written differently?
or, is it not able to work?
background-image: repeating-linear-gradient(blue, black 0.00085%);
All that code does is make horizontal lines of blue and black very close together. It’s no use for a random background unless you strung hundreds of them together with transparent sections so odd bits could show through. The repeating conic gradient is best for that effect.
I don’t think you meant this:
.grain3 {
width: 300px;
height: 300px;
background-image: repeating-linear-gradient(blue, transparent, green, transparent, red, transparent, orange, transparent 0.00085%);
}
I don’t think you meant this:
.grain3 {
width: 300px;
height: 300px;
background-image: repeating-linear-gradient(blue, transparent, green, transparent, red, transparent, orange, transparent 0.00085%);
}
Wouldn’t I be able to create 1px specs, but hundreds of them using background size?
This doesn’t use repeating though. https://jsfiddle.net/465y30kq/
.grain3 {
width: 300px;
height: 300px;
background: linear-gradient(transparent 50%, black 50%), linear-gradient(90deg, transparent, black, transparent);
background-size: 100% 2px, 3px 100%;
background-position: center;
}
Yes but that’s just uniform square boxes. There’s no randomness to its appearance.
You’d have to play around with various rules like this.
.grain3 {
width: 300px;
height: 300px;
background-image: repeating-linear-gradient(
to right bottom,
transparent,
transparent,
yellow,
transparent,
blue,
transparent,
transparent,
transparent,
red 6.005%
),
repeating-linear-gradient(
to left bottom,
transparent,
transparent,
yellow,
transparent,
blue,
transparent,
transparent,
transparent,
red 0.0008%
);
background-size: 29px 51px;
}
However I don’t see the point as you already have the best and most succinct answer with the conic gradient so I’ll leave you to play around to your hearts content.