An Apple Pay-like static gradients generator
It uses:
You can find it at
/src/App.tsx(9)
const colors = [...Array(getRandomInt(15))].map(() => ({
color: getRandomInt(360),
x: getRandomInt(100),
y: getRandomInt(100),
width: getRandomInt(30),
}));
You can find it at
/src/styles/gradients.ts(10)
background-image: ${({ colors }: { colors: Colors }) =>
colors.map(
({ x, y, width, color }, i) =>
`radial-gradient(circle at ${x}% ${y}%,
hsl(${color}, 100%, 90%) 0%,
transparent ${width}%)${colors.length - 1 === i ? "" : ", "}`
)};