leumas-private-shared/src/Components/Backgrounds/Triangles.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React from 'react';
import { styled, keyframes } from '@mui/system';

const numCols = 10;
const numRows = 6;
const numCells = numCols * numRows;
const shapeHeight = 230;
const shapeWidth = 200;
const bgColor = '#6223D2';

const Overlay = styled('div')`
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: 2;
  background: radial-gradient(circle, transparent 0%, rgba(98, 35, 210, 0.15) 100%);
`;

const Container = styled('div')`
  display: grid;
  grid-template-columns: repeat(${numCols}, ${shapeWidth}px);
  grid-template-rows: repeat(${numRows}, ${shapeHeight}px);
  transform: translate(-3%, -4%);
`;

const triangleAnimation = keyframes`
  from {
    points: 50 57.5, 50 57.5, 50 57.5;
  }
  to {
    points: 50 -75, 175 126, -75 126;
  }
`;

const Shape = styled('svg')`
  width: ${shapeWidth}px;
  height: ${shapeHeight}px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  ${({ index }) => {
    let transform = '';
    if (index > numCols) {
      transform = 'translate(-50%, -25%)';
    }
    if (index > numCols * 2) {
      transform = 'translate(0%, -50%)';
    }
    if (index > numCols * 3) {
      transform = 'translate(-50%, -75%)';
    }
    if (index > numCols * 4) {
      transform = 'translate(0%, -100%)';
    }
    if (index > numCols * 5) {
      transform = 'translate(-50%, -125%)';
    }
    return `
      transform: ${transform};
    `;
  }}
`;

const Polygon = styled('polygon')`
  fill: none;
  stroke-width: 5;
  stroke: ${({ color }) => color};
  animation: ${triangleAnimation} 4s infinite;
  animation-delay: ${({ num }) => num}s;
`;

const colors = ["hsl(320,100%,70%)", "hsl(240,100%,70%)", "hsl(160,100%,70%)", "hsl(80,100%,70%)"];

const TrianglesBackground = ({ children }) => {
  const shapes = [];

  for (let i = 0; i < numCells; i++) {
    shapes.push(
      <Shape key={i} index={i + 1} viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
        {colors.map((color, idx) => (
          <Polygon key={idx} num={idx} color={color} />
        ))}
      </Shape>
    );
  }

  return (
    <div style={{ backgroundColor: bgColor, height: '100vh', width: '100vw', position: 'relative', overflow: 'hidden' }}>
      <Overlay />
      <Container>{shapes}</Container>
      {children}
    </div>
  );
};

export default TrianglesBackground;