RadomiCSSer is a small utility function that will create CSS variables with random values.
From CSS art, to experiments, we all need random values sometimes. With this utility function you can create random CSS variables and use them in your CSS or JS. Demo
npm i randomicsserIn order to be able to use the variables in your CSS, you need to load them first. You can do this by calling the load method.
Then, you'll find the variables in your CSS, right onto your target element.
If the target prop isn't filled, it will default on the body.
By default, you'll see this on the body:
<body
style="
--random-0:235;
--random-1:247;
--random-2:153;
--random-3:295;
--random-4:71;
--random-5:219;
--random-6:41;
--random-7:101;
--random-8:249;
--random-9:142;
"
></body><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>RandomiCSSer</title>
</head>
<body>
<div id="app"></div>
<script type="module">
import randomCSSVariable from 'https://unpkg.com/randomicsser@1.0.4';
randomCSSVariable({
variable: 'random',
unit: '',
count: 10,
range: { min: 1, max: 300, round: true },
}).load();
</script>
</body>
</html>{% raw %}
const App = () => {
randomCSSVariable({
target: document.querySelector('body'),
count: 10,
unit: 'px',
variable: 'random',
range: {
round: true,
min: 100,
max: 300,
},
}).load();
return (
<div>
{Array.from({ length: 5 }).map((item, index) => (
<div
style={{
width: '100px',
height: `var(--random-${index})`,
background: 'red',
}}
/>
))}
</div>
);
};{% endraw %}
import randomCSSVariable from '../lib/index.js';
import fs from 'fs';
const randCSS = randomCSSVariable({
count: 10,
range: {
min: 1,
max: 100,
},
}).getVars();
fs.writeFileSync('./demo/randomicsser.json', JSON.stringify(randCSS), null, 2);