JSFiddle - React, Tailwind, and code Playground
JavaScript
function getSizes(baseSize, sVariance) {
var sizes = [];
for (i = 0; i < 5; i++) {
sizes[i] = Math.ceil(baseSize - (Math.random() * sVariance));
}
return sizes;
}
function calculateOpacityValues(baseSize, sVariance) {
var min = 0.25, max = 1,
step = 0.75 / sVariance, i,
opacityValues = {};
for (i = 0; i <= sVariance; i++) {
opacityValues[baseSize - i] = min + step * i;
}
return opacityValues;
}
function getOpacities(sizes, opacityValues) {
// create a map of opacities
// and your expected values
var opacities = [];
sizes.forEach(function(value, index) {
opacities[index] = opacityValues[value];
});
return opacities;
}
var baseSize = 60, sVariance = 3,
sizes = getSizes(baseSize, sVariance);
console.log(sizes);
// use the map to get the opacity
console.log(getOpacities(sizes, calculateOpacityValues(baseSize, sVariance)));