Randomising CSS variables to change hsl(), font-size, and rotation.
Last active
November 28, 2023 11:04
-
-
Save d0ruk/ad5639c1a0fb40b61dccd0ed03be3d6a to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --textSize: 12; | |
| --rotation: 20; | |
| --hue: 60; | |
| --saturation: 100; | |
| --lightness: 50; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| overflow: hidden; | |
| background-color: rgba(0, 0, 0, 0.1); | |
| } | |
| #root { | |
| background-color: hsl( | |
| var(--hue), | |
| calc(var(--saturation) * 1%), | |
| calc(var(--lightness) * 1%) | |
| ); | |
| color: hsl( | |
| calc(var(--hue) + 180), | |
| calc(var(--saturation) * 1%), | |
| calc(var(--lightness) * 1%) | |
| ); | |
| height: 100%; | |
| width: 100%; | |
| font-size: calc(var(--textSize) * 1px); | |
| position: relative; | |
| transition: all 0.5s; | |
| transform: rotate(calc(var(--rotation) * 1deg)); | |
| display: grid; | |
| place-items: center; | |
| } | |
| #root > h1 { | |
| margin: 0 5rem; | |
| } | |
| #controls { | |
| --lightness-threshold: 55; | |
| display: flex; | |
| align-items: center; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| color: white; | |
| position: fixed; | |
| padding: 5px; | |
| top: 10px; | |
| left: 10px; | |
| } | |
| #controls > * { | |
| margin: 0 0.2rem; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>CSS variables + hsl() demo</title> | |
| <link rel="stylesheet" href="index.css" /> | |
| <script src="index.js" defer></script> | |
| </head> | |
| <body> | |
| <div id="root"><h1>The quick brown fox jumps over the lazy dog</h1></div> | |
| <div id="controls"> | |
| <input type="checkbox" id="size" checked onclick="toggleSize(event)" /> | |
| <label for="size">size</label> | |
| <span> | </span> | |
| <input | |
| type="checkbox" | |
| id="rotation" | |
| checked | |
| onclick="toggleRotation(event)" | |
| /> | |
| <label for="rotation">rotation</label> | |
| <span> | </span> | |
| <input type="checkbox" id="hue" checked onclick="toggleHue(event)" /> | |
| <label for="hue">hue</label> | |
| <span> | </span> | |
| <input | |
| type="checkbox" | |
| id="saturation" | |
| onclick="toggleSaturation(event)" | |
| /> | |
| <label for="saturation">saturation</label> | |
| <span> | </span> | |
| <input type="checkbox" id="lightness" onclick="toggleLightness(event)" /> | |
| <label for="lightness">lightness</label> | |
| <span> | </span> | |
| <label for="delta">dt</label> | |
| <input | |
| type="range" | |
| id="delta" | |
| min="100" | |
| max="5000" | |
| value="2000" | |
| step="50" | |
| onchange="changeDelta(event)" | |
| /> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const root = document.getElementById("root"); | |
| let intervalId, | |
| size = true, | |
| rotation = true, | |
| hue = true, | |
| saturation = false, | |
| lightness = false; | |
| const toggleSize = ({ target: { checked } }) => (size = checked); | |
| const toggleRotation = ({ target: { checked } }) => (rotation = checked); | |
| const toggleHue = ({ target: { checked } }) => (hue = checked); | |
| const toggleSaturation = ({ target: { checked } }) => (saturation = checked); | |
| const toggleLightness = ({ target: { checked } }) => (lightness = checked); | |
| const changeDelta = ({ target: { value } }) => | |
| resetInterval(parseInt(value, 10)); | |
| const resetInterval = dt => { | |
| if (intervalId) clearInterval(intervalId); | |
| intervalId = setInterval(randomise, dt); | |
| randomise(); | |
| }; | |
| function randomise() { | |
| console.log( | |
| "--textSize %spx, --rotation %s, --hue %sdeg, --saturation %s%, --lightness %s%", | |
| root.style.getPropertyValue("--textSize"), | |
| root.style.getPropertyValue("--rotation"), | |
| root.style.getPropertyValue("--hue"), | |
| root.style.getPropertyValue("--saturation"), | |
| root.style.getPropertyValue("--lightness") | |
| ); | |
| size && | |
| root.style.setProperty("--textSize", Math.floor(Math.random() * 30 + 15)); | |
| rotation && | |
| root.style.setProperty("--rotation", Math.floor(Math.random() * 360)); | |
| hue && root.style.setProperty("--hue", Math.floor(Math.random() * 360)); | |
| saturation && | |
| root.style.setProperty("--saturation", Math.floor(Math.random() * 100)); | |
| lightness && | |
| root.style.setProperty("--lightness", Math.floor(Math.random() * 100)); | |
| } | |
| resetInterval(2000); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment