marcofaggian/react-gradient

Apple Pay like gradient generation

React Gradient

An Apple Pay-like static gradients generator

It uses:

• Styled Components
• HSL color values
• Radial Gradient

Randomic generator

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),
}));

Gradient constructor

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 ? "" : ", "}`
  )};