Weird things with Gradients
Let's start with some linear gradients!
First idea: circel gradients that get smaller in the middle!
So, I made 4 linear gradients between purple and blue, displayed in a circel.
The first one goes to the right, second one to the bottom, third one to the left, and the fouht one to the top.
This pattern is repeated in the middle, with one third the size.
The first example does this 2 times, the second one time and the last one only has the first iteration of these gradients.
Now try something smaller maybe?
Now I am using thinner gradients (with a ration of 1:9).
The inner parts have a size of 33% of the outer parent.
Except in the last example, which only has 10%.
None of them are correct!
Okay, percentages do something that I want here! Let's try with 90%!
This time the children have 90% of the size of parents.
The second example uses 80%, which is what I want!
Phew, got a lot of divs there. Zeno's parodox is saying hello!
That last one is 16 divs deep!
Let's do this again, but mix up the colors!
Here I simply changed the direction of the gradients, switching the ones going to the top and to the bottom.
Then I mix things up, by mixing that with the prior version.
Finally, some more experiments:
Here the gradients change proportions, and increase in width.
Okay, I think thats enough for with linear gradients. Let's move on.
Time to get radial
Let's experiment with some basic radial and conic gradients!
Two radial grdient, a radial gradient with a circel and an ellipse as shape.
The same gradients but the ellipse is now at the bottom left.
Two conical gradients, consisting of three colors.
Hmmm. Not that interesting yet. How about we put them in a similar context as above?
First sample: radial gradients arranged in the 33% pattern.
Second: arranged in 90% pattern.
Third: 80% pattern.
Fourth-sixth: conicial gradient in 33%,80%,90% pattern. In that order.
Some of them are kinda nice, but I think I will just move on here.
Repeating Gradients
First, some examples for repeating linear, radial, and conical gradients
Linear gradients at a 45 degree angle, repeating 10 times.
Radial gradients pulsing from the center, repeating 10 times.
Linear gradients at a 45 degree angle, repeating 10 times.
Now let's plug them into the 33%,80%, and 90% patterns!
Well, should give these less ugly colors, but still.
And that's mostly it for now!
Lastly, Some bonus playing around
First, let's do some chess-like shapes
The pattern: recursively gives the bottom-left square the color A, then the top right square the color B.
The first sample uses flat color, with purple in the bottom left and blue in the top right.
The second sample uses linear gradients for A, and radial gradients for B.
