sentry/static/app/views/discover/backgroundSpace.tsx

import {keyframes} from '@emotion/react';
import styled from '@emotion/styled';

const twinkles = keyframes`
  0% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 1;}
`;

const hover = keyframes`
  0% {transform: translateY(0) translateX(0);}
  25% {transform: translateY(4px) translateX(-4px);}
  50% {transform: translateY(0) translateX(0);}
  75% {transform: translateY(4px) translateX(-4px);}
  100% {transform: translateY(0) translate(0);}
`;

const Twinkles = styled('path')`
  fill: #d35bab;
  animation: ${twinkles} 2s infinite;
`;

const TwinklesDelay = styled('path')`
  animation: ${twinkles} 2s infinite;
  animation-delay: 1s;
  fill: #ce5d9e;
`;

const Planet = styled('g')`
  animation: ${hover} 10s infinite;
`;

export default function BackgroundSpace() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 1160.08 280.01"
      preserveAspectRatio="xMinYMin slice"
      height="100%"
      width="100%"
    >
      <defs>
        <linearGradient
          id="linear-gradient"
          x1="580"
          y1="-163.62"
          x2="580"
          y2="289.19"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0.19" stopColor="#7a2878" />
          <stop offset="0.41" stopColor="#612765" />
          <stop offset="0.56" stopColor="#54275c" />
        </linearGradient>
        <linearGradient
          id="linear-gradient-2"
          x1="438.93"
          y1="-375.6"
          x2="619.69"
          y2="374.54"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0.2" stopColor="#8b3087" />
          <stop offset="0.76" stopColor="#aa4689" />
          <stop offset="1" stopColor="#a33f79" />
        </linearGradient>
        <linearGradient
          id="linear-gradient-3"
          x1="114.15"
          y1="-573.81"
          x2="340.44"
          y2="365.28"
          xlinkHref="#linear-gradient-2"
        />
        <linearGradient
          id="linear-gradient-4"
          x1="1494.33"
          y1="259.61"
          x2="1494.83"
          y2="259.61"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0.2" stopColor="#ff6668" />
          <stop offset="0.72" stopColor="#b44968" />
        </linearGradient>
        <linearGradient
          id="linear-gradient-5"
          x1="536.86"
          y1="213.35"
          x2="534.35"
          y2="381.73"
          xlinkHref="#linear-gradient-4"
        />
        <radialGradient
          id="radial-gradient"
          cx="134.5"
          cy="307.77"
          fx="98.57685568341846"
          fy="320.2801558841244"
          r="380.71"
          gradientTransform="matrix(0.88, 0.47, -0.33, 0.61, 117.41, 55.32)"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0.2" stopColor="#ff7d7f" stopOpacity="0" />
          <stop offset="0.28" stopColor="#ff7d7f" stopOpacity="0.02" />
          <stop offset="0.38" stopColor="#ff7d7f" stopOpacity="0.08" />
          <stop offset="0.49" stopColor="#ff7d7f" stopOpacity="0.19" />
          <stop offset="0.61" stopColor="#ff7d7f" stopOpacity="0.33" />
          <stop offset="0.73" stopColor="#ff7d7f" stopOpacity="0.51" />
          <stop offset="0.87" stopColor="#ff7d7f" stopOpacity="0.74" />
          <stop offset="1" stopColor="#ff7d7f" />
        </radialGradient>
      </defs>
      <g id="background">
        <rect fill="url(#linear-gradient)" width="1160" height="280" />
      </g>
      <g id="streaks">
        <g>
          <path
            fill="#662665"
            d="M448.36,280c-4.4-31.92-8.18-68.42-8.77-102.41-1.12-64.44.22-121.22,45.16-177.59H422c-22.16,26.8-35.31,46.33-35.31,46.33S391.52,26.59,403.26,0H378.89a279,279,0,0,0-11.77,49.37C357.57,115.58,373,215.74,385.47,280Z"
          />
          <path
            fill="#662665"
            d="M722.56,137.09c-34.63,39.36-58.79,90.55-58.79,90.55l-12.16-13.52s27.36-62,80.07-96.63S853.82,70.87,853.82,70.87,757.19,97.73,722.56,137.09ZM690.63,280c7.71-43.77,25.77-103.7,68.08-144.26,73.82-70.78,163-64.87,236.84-69.43,58.57-3.62,135.31-11.92,164.53-15.19V0h-102.8A1046.22,1046.22,0,0,1,944.37,21C853.82,33,743.84,63.27,710.56,87.42c0,0,79.91-60.47,147.82-72.47S1004.5,6,1036.26,1.44q4.88-.7,9.44-1.44H872.77c-78.13,11.4-130.26,42.76-189.4,93.34C616.45,150.56,588,263.49,584.16,280Z"
          />
          <g>
            <path
              fill="url(#linear-gradient-2)"
              d="M210.14,0c1.4,18.35,15.06,27.51,23.7,28.47,9.12,1,9.8-5.92,5.58-10.14-3-3-10.8-6.23-14.69-18.33ZM164.88,0a66.31,66.31,0,0,0,10.85,39.11S149.33,23.48,144.78,0H45.53a182.28,182.28,0,0,0,2,61.75c9,44.59,49,92.74,49,92.74l-37.67,6.08s-26.36-52-29.4-104.06c-1.24-21.3,3-40.85,8.34-56.51H0V280H1160V235.51c-31.07-3.31-115.41-12.26-150.09-15.81C967,215.31,908,206.18,908,206.18s78.05-13.51,146-11.32c42.37,1.37,82.1,4.59,106,6.81l.08-61.67c-19.59,4.72-77.35,18.33-143.41,31.05C935.07,186.76,778,210.74,650.09,179s-157.28-52-157.28-52C428.28,99.76,387.57,93,305.13,84.05S193,37.59,188.57,3.63c-.16-1.21-.26-2.43-.3-3.63ZM408,121.38c-34-9.12-89-26.52-89-26.52s65,6.75,98.15,15.88,91.22,34,91.22,34S442,130.5,408,121.38Z"
            />
            <path
              fill="url(#linear-gradient-3)"
              d="M251.92,34.72s-6.42,6.92,2.7,13.68S274.38,59,277.26,55.67s-2.88-4.57-8.45-11.32S258.17,30.66,251.92,34.72Z"
            />
          </g>
        </g>
      </g>
      <Planet id="planet">
        <g>
          <path
            fill="url(#linear-gradient-4)"
            d="M578.57,280c17-12.64,20.48-23.05,9.35-31.25-12.84-9.46-51.69-10.47-77.71-8.95-10.63.62-30.38,3.21-48.62,5.82l15,12.26s46.8-9.8,78.56-6.76,18.07,14.36-.85,24.83c-2.4,1.33-4.82,2.69-7.2,4.05Z"
          />
          <path
            fill="url(#linear-gradient-5)"
            d="M644.87,280l1.5-1.85c18.08-22,23.65-45.78-39.87-62.34C516.1,192.25,417.13,208,417.13,208l-2.36-.67L433.89,223c19.47-3.8,54.48-8.82,93.22-5.83,58.95,4.56,82.18,25.68,86.83,40.38,2.6,8.23-1.23,15.63-7.58,22.46Z"
          />
          <path
            fill="#ff9371"
            d="M644.87,280l1.5-1.85c18.08-22,23.65-45.78-39.87-62.34-40.85-10.65-83.46-13.26-117.89-12.92l-41.86,1.88-2.51.21c20.12-.33,115.29-1,164.37,15.14,55.08,18.08,46.12,39.19,37,50.51-2,2.45-4.72,5.69-7.65,9.37Z"
          />
          <path
            fill="#ff9371"
            d="M576.52,218.6s39.7,10.14,54.39,22.64,3.38,23.82,3.38,23.82,19.26-14.7,3.38-26S576.52,218.6,576.52,218.6Z"
          />
          <path
            fill="#ff9371"
            d="M578.57,280c17-12.64,20.48-23.05,9.35-31.25-12.84-9.46-51.69-10.47-77.71-8.95-8.71.51-23.53,2.34-38.63,4.42,9.12-.58,80.16-4.84,97.85.06,18.91,5.23,20.05,9.61,18.91,18.07-1,7.21-7.14,13.81-11.5,17.65Z"
          />
        </g>
        <g>
          <path
            fill="#582163"
            d="M509.8,280c-120.75-123.12-289-199.5-475-199.5q-17.49,0-34.76.89V280Z"
          />
          <path
            fill="#6b2775"
            d="M44.2,280,280.72,127.44A661,661,0,0,0,110.17,84.73C83.15,106.24,28.11,150.16,0,173.38V280Z"
          />
          <path
            fill="#6b2775"
            d="M483.75,280l17.43-8.63a670.42,670.42,0,0,0-69.4-59.48L312,280Z"
          />
          <path
            fill="#ff7d7f"
            d="M509.8,280c-120.75-123.12-289-199.5-475-199.5q-17.49,0-34.76.89v4.29C179.75,74.76,363.75,157,494.5,280Z"
          />
          <path
            fill="url(#radial-gradient)"
            d="M509.8,280c-120.74-123.12-289-199.5-475-199.5q-17.49,0-34.76.89V280Z"
          />
        </g>
      </Planet>
      <g id="stars-static">
        <path
          fill="#d35bab"
          d="M1121.59,268.29c1.28,1.1,4.29,1.4,4.29,1.4s-2.85,0-4.29,1.39c-1.25,1.25-1.4,4.3-1.4,4.3s-.14-3-1.4-4.3c-1-1-4.29-1.39-4.29-1.39s3-.25,4.29-1.4,1.4-4.3,1.4-4.3S1120.14,267.05,1121.59,268.29Z"
        />
        <path
          fill="#d35bab"
          d="M104.51,15.9C106.46,17.56,111,18,111,18s-4.33-.06-6.51,2.12c-1.89,1.88-2.12,6.51-2.12,6.51s-.21-4.57-2.12-6.51C98.73,18.57,93.76,18,93.76,18s4.59-.38,6.51-2.12c1.71-1.56,2.12-6.51,2.12-6.51S102.31,14,104.51,15.9Z"
        />
        <path
          fill="#d35bab"
          d="M196.69,68.5c2.53,2.16,8.44,2.75,8.44,2.75s-5.61-.08-8.44,2.74c-2.45,2.45-2.74,8.44-2.74,8.44s-.27-5.92-2.75-8.44c-2-2-8.43-2.74-8.43-2.74s5.95-.49,8.43-2.75c2.22-2,2.75-8.43,2.75-8.43S193.85,66.07,196.69,68.5Z"
        />
        <path
          fill="#d35bab"
          d="M473,188.45c1.31,1.12,4.38,1.43,4.38,1.43s-2.91,0-4.38,1.43c-1.27,1.27-1.43,4.38-1.43,4.38s-.14-3.07-1.42-4.38c-1-1.06-4.39-1.43-4.39-1.43s3.1-.25,4.39-1.43,1.42-4.38,1.42-4.38S471.53,187.19,473,188.45Z"
        />
        <path
          fill="#ce5d9e"
          d="M693.5,263.34c2.77,2.37,9.28,3,9.28,3s-6.18-.08-9.28,3c-2.7,2.69-3,9.28-3,9.28s-.3-6.5-3-9.28c-2.19-2.24-9.28-3-9.28-3s6.55-.53,9.28-3c2.44-2.23,3-9.28,3-9.28S690.37,260.67,693.5,263.34Z"
        />
        <path
          fill="#ce5d9e"
          d="M752.05,219.29c3.48,3,11.63,3.79,11.63,3.79s-7.73-.11-11.63,3.78c-3.38,3.38-3.78,11.64-3.78,11.64s-.38-8.16-3.79-11.64c-2.75-2.8-11.63-3.78-11.63-3.78s8.21-.67,11.63-3.79c3.06-2.79,3.79-11.63,3.79-11.63S748.13,215.94,752.05,219.29Z"
        />
        <path
          fill="#ce5d9e"
          d="M834.09,219.21c1.85,1.58,6.17,2,6.17,2s-4.1-.06-6.17,2c-1.79,1.79-2,6.17-2,6.17s-.2-4.33-2-6.17c-1.45-1.49-6.17-2-6.17-2s4.36-.35,6.17-2c1.63-1.48,2-6.17,2-6.17S832,217.43,834.09,219.21Z"
        />
        <path
          fill="#d35bab"
          d="M1136.67,159.66c1.81,1.55,6,2,6,2s-4-.06-6,2c-1.75,1.75-2,11.15-2,11.15s-.19-9.35-2-11.15c-1.43-1.45-6-2-6-2s4.25-.35,6-2c1.58-1.44,2-12.06,2-12.06S1134.64,157.93,1136.67,159.66Z"
        />
        <path
          fill="#d35bab"
          d="M482.41,157.12c1.94,1.67,6.51,2.12,6.51,2.12s-4.33-.06-6.51,2.12c-1.89,1.89-2.12,6.51-2.12,6.51s-.21-4.56-2.12-6.51c-1.54-1.57-6.51-2.12-6.51-2.12s4.59-.37,6.51-2.12c1.71-1.56,2.12-6.51,2.12-6.51S480.21,155.25,482.41,157.12Z"
        />
        <path
          fill="#d35bab"
          d="M24.94,36.75c2.84,2.42,9.48,3.08,9.48,3.08s-6.3-.09-9.48,3.09c-2.75,2.75-3.08,17.51-3.08,17.51s-.31-14.68-3.08-17.51c-2.24-2.29-9.48-3.09-9.48-3.09s6.69-.54,9.48-3.08c2.49-2.28,3.08-19,3.08-19S21.75,34,24.94,36.75Z"
        />
      </g>
      <g id="stars-twinkle">
        <Twinkles d="M300.17,85.94c3.37,2.89,11.28,3.67,11.28,3.67s-7.5-.1-11.28,3.67c-3.28,3.28-3.67,20.85-3.67,20.85s-.37-17.47-3.67-20.85c-2.67-2.71-11.29-3.67-11.29-3.67s8-.64,11.29-3.67c3-2.7,3.67-22.56,3.67-22.56S296.36,82.69,300.17,85.94Z" />
        <TwinklesDelay
          fill="#ce5d9e"
          d="M971.51,236.58C976.44,240.79,988,242,988,242s-11-.15-16.49,5.36c-4.79,4.79-5.37,30.48-5.37,30.48s-.53-25.54-5.37-30.48c-3.89-4-16.49-5.36-16.49-5.36s11.64-.95,16.49-5.37c4.34-4,5.37-33,5.37-33S965.94,231.82,971.51,236.58Z"
        />
      </g>
    </svg>
  );
}