Skip to content

Instantly share code, notes, and snippets.

@d0ruk

d0ruk/README.md

Last active November 28, 2023 11:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save d0ruk/ad5639c1a0fb40b61dccd0ed03be3d6a to your computer and use it in GitHub Desktop.
Save d0ruk/ad5639c1a0fb40b61dccd0ed03be3d6a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

Randomising CSS variables to change hsl(), font-size, and rotation.

Raw
index.css
: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;
}
Raw
index.html
<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>
Raw
index.js
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