diff --git a/Base/res/html/misc/gradients.html b/Base/res/html/misc/gradients.html
index c54747437b..994eb59578 100644
--- a/Base/res/html/misc/gradients.html
+++ b/Base/res/html/misc/gradients.html
@@ -102,6 +102,22 @@
background-image: linear-gradient(to top left, red, green, blue);
background-size: 30px 30px;
}
+
+ .grad-hints {
+ background-image: linear-gradient(to right, hotpink, 50%, rebeccapurple);
+ }
+
+ .grad-rainbow {
+ background-image: linear-gradient(
+ to right,
+ tomato,
+ 25%,
+ orange 0,
+ 50%,
+ yellowgreen 0,
+ 75%,
+ dodgerblue 0)
+ }
@@ -112,13 +128,17 @@
- Funky color hints:
+ Funky transition hints:
+
+ Transition hint test (click to animate):
+
Multiple color stops + arbitrary angles (click to spin!):
Default color stops:
+ Cool pattern demo
Pre-multiplied alpha mixing test:
@@ -156,23 +176,30 @@
})
}
- // Spinning gradient demo/test
- let angle = 0;
- let spinIntervalId = -1;
- const gradientSpin = document.getElementById("gradient-spin");
- gradientSpin.onclick = () => {
- if (spinIntervalId <= -1) {
- spinIntervalId = setInterval(() => {
- gradientSpin.style.backgroundImage = `linear-gradient(${angle}deg, red 0%, black 20%, yellow 60%, cyan 100%)`;
- angle += 1;
- updateLabels();
- }, 100)
- } else {
- clearInterval(spinIntervalId);
- spinIntervalId = -1;
+ const backgroundAnimateDemo = (id, newBackgroundCallback) => {
+ const el = document.getElementById(id);
+ let t = 0;
+ let demoIntervalId = -1;
+ el.onclick = () => {
+ if (demoIntervalId <= -1) {
+ demoIntervalId = setInterval(() => {
+ el.style.backgroundImage = newBackgroundCallback(t);
+ t += 1;
+ updateLabels();
+ }, 100)
+ } else {
+ clearInterval(demoIntervalId);
+ demoIntervalId = -1;
+ }
}
}
+ // Spinning gradient demo/test
+ backgroundAnimateDemo("gradient-spin", angle => `linear-gradient(${angle}deg, red 0%, black 20%, yellow 60%, cyan 100%)`)
+
+ // Transistion hints demo
+ backgroundAnimateDemo("gradient-hints", t => `linear-gradient(to right, hotpink, ${((Math.sin(t/4)+1)*50)|0}%, rebeccapurple)`)
+
updateLabels();