leumas-private-shared/src/Components/Backgrounds/IceCream.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 animateFx = keyframes`
  0% { fx: 0%; }
  50% { fx: 3%; }
  100% { fx: 0%; }
`;

const animateX = keyframes`
  0% { x: 25%; }
  50% { x: 0%; }
  100% { x: 25%; }
`;

const animateY = keyframes`
  0% { y: 0%; }
  50% { y: 25%; }
  100% { y: 0%; }
`;

const animateRotate = keyframes`
  0% { transform: rotate(0 50 50); }
  100% { transform: rotate(360 50 50); }
`;

const BackgroundWrap = styled('div')`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
`;

const SVG = styled('svg')`
  width: 100%;
  height: 100%;
`;

const GradientRect = styled('rect')`
  animation: ${animateX} 20s infinite, ${animateY} 21s infinite, ${animateRotate} 7s infinite;
  &:nth-of-type(2) {
    animation-duration: 23s, 24s, 12s;
  }
  &:nth-of-type(3) {
    animation-duration: 25s, 12s, 9s;
  }
`;

const IceCreamBackground = ({ children }) => {
  return (
    <BackgroundWrap>
      <SVG viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
        <defs>
          <radialGradient id="Gradient1" cx="50%" cy="50%" fx="0.441602%" fy="50%" r=".5">
            <animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite" />
            <stop offset="0%" stopColor="rgba(255, 0, 255, 1)" />
            <stop offset="100%" stopColor="rgba(255, 0, 255, 0)" />
          </radialGradient>
          <radialGradient id="Gradient2" cx="50%" cy="50%" fx="2.68147%" fy="50%" r=".5">
            <animate attributeName="fx" dur="23.5s" values="0%;3%;0%" repeatCount="indefinite" />
            <stop offset="0%" stopColor="rgba(255, 255, 0, 1)" />
            <stop offset="100%" stopColor="rgba(255, 255, 0, 0)" />
          </radialGradient>
          <radialGradient id="Gradient3" cx="50%" cy="50%" fx="0.836536%" fy="50%" r=".5">
            <animate attributeName="fx" dur="21.5s" values="0%;3%;0%" repeatCount="indefinite" />
            <stop offset="0%" stopColor="rgba(0, 255, 255, 1)" />
            <stop offset="100%" stopColor="rgba(0, 255, 255, 0)" />
          </radialGradient>
          <radialGradient id="Gradient4" cx="50%" cy="50%" fx="4.56417%" fy="50%" r=".5">
            <animate attributeName="fx" dur="23s" values="0%;5%;0%" repeatCount="indefinite" />
            <stop offset="0%" stopColor="rgba(0, 255, 0, 1)" />
            <stop offset="100%" stopColor="rgba(0, 255, 0, 0)" />
          </radialGradient>
          <radialGradient id="Gradient5" cx="50%" cy="50%" fx="2.65405%" fy="50%" r=".5">
            <animate attributeName="fx" dur="24.5s" values="0%;5%;0%" repeatCount="indefinite" />
            <stop offset="0%" stopColor="rgba(0,0,255, 1)" />
            <stop offset="100%" stopColor="rgba(0,0,255, 0)" />
          </radialGradient>
          <radialGradient id="Gradient6" cx="50%" cy="50%" fx="0.981338%" fy="50%" r=".5">
            <animate attributeName="fx" dur="25.5s" values="0%;5%;0%" repeatCount="indefinite" />
            <stop offset="0%" stopColor="rgba(255,0,0, 1)" />
            <stop offset="100%" stopColor="rgba(255,0,0, 0)" />
          </radialGradient>
        </defs>
        <GradientRect x="13.744%" y="1.18473%" width="100%" height="100%" fill="url(#Gradient1)" transform="rotate(334.41 50 50)" />
        <GradientRect x="-2.17916%" y="35.4267%" width="100%" height="100%" fill="url(#Gradient2)" transform="rotate(255.072 50 50)" />
        <GradientRect x="9.00483%" y="14.5733%" width="100%" height="100%" fill="url(#Gradient3)" transform="rotate(139.903 50 50)" />
      </SVG>
      {children}
    </BackgroundWrap>
  );
};

export default IceCreamBackground;