Add random shape positions and fun movements

components/ShapesBackground.module.css

@@ -0,0 +1,199 @@
+.shapesContainer {
+  position: absolute;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -10;
+}
+
+.shape {
+  --blue: invert(53%) sepia(80%) saturate(4689%) hue-rotate(189deg)
+    brightness(92%) contrast(93%);
+  --teal: invert(76%) sepia(39%) saturate(578%) hue-rotate(110deg)
+    brightness(91%) contrast(88%);
+
+  position: absolute;
+  filter: var(--blue);
+  opacity: 20%;
+
+  transition: 0.5s;
+}
+
+.homeDots {
+  top: calc(0.06 * (580rem / 0.65) / 16);
+  right: 90vw;
+  width: calc(168rem / 16);
+  height: calc(204rem / 16);
+  filter: var(--teal);
+  opacity: 25%;
+}
+
+.homeHash1 {
+  top: calc(0.32 * (580rem / 0.65) / 16);
+  left: 12vw;
+  width: calc(60rem / 16);
+  height: calc(60rem / 16);
+}
+
+.homeTriangle1 {
+  top: calc(0.05 * (580rem / 0.65) / 16);
+  left: 20vw;
+  width: calc(68rem / 16);
+  height: calc(68rem / 16);
+  transform: rotate(18deg);
+  filter: var(--teal);
+  opacity: 30%;
+}
+
+.homeWaves1 {
+  top: calc(0.5 * (580rem / 0.65) / 16);
+  left: 24vw;
+  width: calc(116rem / 16);
+  height: calc(58rem / 16);
+  filter: var(--teal);
+}
+
+.homeTriangle2 {
+  top: calc(0.02 * (580rem / 0.65) / 16);
+  right: 40vw;
+  width: calc(68rem / 16);
+  height: calc(68rem / 16);
+  transform: rotate(-26deg);
+}
+
+.homePlus {
+  top: calc(0.42 * (580rem / 0.65) / 16);
+  right: 22vw;
+  width: calc(48rem / 16);
+  height: calc(48rem / 16);
+}
+
+.homeWaves2 {
+  top: calc(0.1 * (580rem / 0.65) / 16);
+  right: 18vw;
+  width: calc(102rem / 16);
+  height: calc(50rem / 16);
+  filter: var(--teal);
+}
+
+.homeHash2 {
+  top: calc(0.25 * (580rem / 0.65) / 16);
+  right: 9vw;
+  width: calc(60rem / 16);
+  height: calc(60rem / 16);
+}
+
+@media only screen and (max-height: calc((580rem / 0.65) / 16)) {
+  .homeDots {
+    top: 6vh;
+  }
+  .homeHash1 {
+    top: 32vh;
+  }
+  .homeTriangle1 {
+    top: 5vh;
+  }
+  .homeWaves1 {
+    top: 50vh;
+  }
+  .homeTriangle2 {
+    top: 2vh;
+  }
+  .homePlus {
+    top: 42vh;
+  }
+  .homeWaves2 {
+    top: 10vh;
+  }
+  .homeHash2 {
+    top: 25vh;
+  }
+}
+
+@media only screen and (max-height: calc((420rem / 0.65) / 16)) {
+  .homeDots {
+    top: calc(0.06 * (420rem / 0.65) / 16);
+  }
+  .homeHash1 {
+    top: calc(0.32 * (420rem / 0.65) / 16);
+  }
+  .homeTriangle1 {
+    top: calc(0.05 * (420rem / 0.65) / 16);
+  }
+  .homeWaves1 {
+    top: calc(0.5 * (420rem / 0.65) / 16);
+  }
+  .homeTriangle2 {
+    top: calc(0.02 * (420rem / 0.65) / 16);
+  }
+  .homePlus {
+    top: calc(0.42 * (420rem / 0.65) / 16);
+  }
+  .homeWaves2 {
+    top: calc(0.1 * (420rem / 0.65) / 16);
+  }
+  .homeHash2 {
+    top: calc(0.25 * (420rem / 0.65) / 16);
+  }
+}
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  .homeDots {
+    top: 0;
+    right: 80vw;
+    width: calc(168rem / 16);
+    height: calc(152rem / 16);
+    filter: var(--blue);
+    opacity: 20%;
+  }
+
+  .homeHash1 {
+    top: calc(190rem / 16);
+    left: unset;
+    right: 87vw;
+    width: calc(60rem / 16);
+    height: calc(60rem / 16);
+  }
+
+  .homeTriangle1 {
+    top: calc(266rem / 16);
+    left: unset;
+    right: 78vw;
+    width: calc(45rem / 16);
+    height: calc(45rem / 16);
+    transform: rotate(-26deg);
+    filter: var(--blue);
+    opacity: 20%;
+  }
+
+  .homeWaves1 {
+    display: none;
+  }
+
+  .homeTriangle2 {
+    top: calc(4rem / 16);
+    right: 3vw;
+    width: calc(45rem / 16);
+    height: calc(45rem / 16);
+    transform: rotate(16deg);
+  }
+
+  .homePlus {
+    display: none;
+  }
+
+  .homeWaves2 {
+    top: calc(168rem / 16);
+    left: 86vw;
+    right: unset;
+    width: calc(102rem / 16);
+    height: calc(50rem / 16);
+    filter: var(--blue);
+  }
+
+  .homeHash2 {
+    display: none;
+  }
+}

components/ShapesBackground.tsx

@@ -0,0 +1,76 @@
+import React, { CSSProperties, useEffect, useState } from "react";
+
+import { Image } from "./Image";
+
+import styles from "./ShapesBackground.module.css";
+
+interface Props {
+  getConfig?: GetShapesConfig;
+}
+
+export function ShapesBackground({ getConfig }: Props) {
+  const [config, setConfig] = useState<ShapesConfig>({});
+
+  useEffect(() => {
+    setConfig(getConfig?.() ?? {});
+  }, [getConfig]);
+
+  return (
+    <div className={styles.shapesContainer}>
+      {Object.entries(config).map(([type, instances]) =>
+        instances.map((attributes, idx) => (
+          <Shape
+            key={idx.toString() + type}
+            type={type as ShapeType}
+            style={attributes}
+          />
+        ))
+      )}
+    </div>
+  );
+}
+
+export const shapeTypes = [
+  "asterisk",
+  "circle",
+  "cross",
+  "dots",
+  "hash",
+  "plus",
+  "ring",
+  "triangle",
+  "waves",
+] as const;
+
+export type ShapeType = typeof shapeTypes[number];
+
+export type ShapesConfig = {
+  [key in ShapeType]?: CSSProperties[];
+};
+
+export type GetShapesConfig = () => ShapesConfig;
+
+function Shape(props: { type: ShapeType; style: CSSProperties }) {
+  return (
+    <Image
+      src={`/images/shapes/${props.type}.svg`}
+      className={styles.shape}
+      style={props.style}
+    />
+  );
+}
+
+// function HomeShapes() {
+//   return (
+//     <>
+//       <Shape type="dots" className={styles.homeDots} />
+//       <Shape type="hash" className={styles.homeHash1} />
+//       <Shape type="triangle" className={styles.homeTriangle1} />
+//       <Shape type="waves" className={styles.homeWaves1} />
+//       <Shape type="triangle" className={styles.homeTriangle2} />
+//       <Shape type="plus" className={styles.homePlus} />
+//       <Shape type="waves" className={styles.homeWaves2} />
+//       <Shape type="hash" className={styles.homeHash2} />
+//     </>
+//   );
+// }

pages/_app.module.css

@@ -4,9 +4,9 @@
   min-height: 100vh;
 }
 
-/* This makes the footer stay at the bottom, even if there's not much content
- * on the screen.
- */
 .contentContainer {
+  position: relative;
+
+  /* This makes the footer stay at the bottom, even if there's not much content on the screen.*/
   flex-grow: 1;
 }

pages/_app.tsx

@@ -7,6 +7,10 @@ import { DefaultLayout } from "@/components/DefaultLayout";
 import { Footer } from "@/components/Footer";
 import { Link } from "@/components/Link";
 import { Navbar } from "@/components/Navbar";
+import {
+  GetShapesConfig,
+  ShapesBackground,
+} from "@/components/ShapesBackground";
 import { ThemeProvider } from "@/components/Theme";
 
 import styles from "./_app.module.css";
@@ -24,6 +28,9 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
           <Navbar />
           {/* Wrapping content with a div to allow for a display: block parent */}
           <div className={styles.contentContainer}>
+            <ShapesBackground
+              getConfig={Component.getShapesConfig ?? undefined}
+            />
             <Layout>
               <Component {...pageProps} />
             </Layout>
@@ -41,6 +48,7 @@ type PageComponent = NextComponentType<
   Record<string, unknown>
 > & {
   Layout?: ComponentType<{ children: ReactNode }>;
+  getShapesConfig?: GetShapesConfig;
 };
 
 type AppProps = DefaultAppProps & {

pages/get-involved.tsx

@@ -3,6 +3,11 @@ import React from "react";
 import { ConnectWithUs } from "@/components/ConnectWithUs";
 import { EmailSignup } from "@/components/EmailSignup";
 import { Image } from "@/components/Image";
+import {
+  GetShapesConfig,
+  ShapesConfig,
+  shapeTypes,
+} from "@/components/ShapesBackground";
 
 import Content from "../content/get-involved.mdx";
 
@@ -33,3 +38,18 @@ export default function GetInvolved() {
     </div>
   );
 }
+
+GetInvolved.getShapesConfig = (() => {
+  const config: ShapesConfig = {};
+
+  shapeTypes.forEach((shape) => {
+    const [top, left] = [
+      Math.trunc(Math.random() * (window.innerWidth <= 500 ? 50 : 90)),
+      Math.trunc(Math.random() * 100),
+    ];
+
+    config[shape] = [{ top: `${top}vh`, left: `${left}vw` }];
+  });
+
+  return config;
+}) as GetShapesConfig;

pages/index.module.css

@@ -110,7 +110,7 @@
   gap: 1rem;
 }
 
-/* On a smaller desktop screen, make the events/new flow vertically */
+/* On a smaller desktop screen, make the events/news flow vertically */
 @media only screen and (max-width: calc(1100rem / 16)) {
   .cards {
     flex-direction: column;

pages/index.tsx

@@ -6,6 +6,11 @@ import { EmailSignup } from "@/components/EmailSignup";
 import { EventDescriptionCard } from "@/components/EventDescriptionCard";
 import { Image } from "@/components/Image";
 import { NewsCard } from "@/components/NewsCard";
+import {
+  GetShapesConfig,
+  ShapesConfig,
+  shapeTypes,
+} from "@/components/ShapesBackground";
 import { SocialLinks } from "@/components/SocialLinks";
 
 import AltTab, {
@@ -92,3 +97,18 @@ export default function Home() {
 Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
   return <div className={styles.page}>{props.children}</div>;
 };
+
+Home.getShapesConfig = (() => {
+  const config: ShapesConfig = {};
+
+  shapeTypes.forEach((shape) => {
+    const [top, left] = [
+      Math.trunc(Math.random() * (window.innerWidth <= 500 ? 50 : 90)),
+      Math.trunc(Math.random() * 100),
+    ];
+
+    config[shape] = [{ top: `${top}vh`, left: `${left}vw` }];
+  });
+
+  return config;
+}) as GetShapesConfig;

public/images/shapes/asterisk.svg

@@ -0,0 +1,12 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="120" height="120">
+<circle cx="59.9683" cy="59.9683" r="54.9683" fill="black" stroke="#1482E3" stroke-width="10"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M-8.36816 60.9453H129.559" stroke="black" stroke-width="10" stroke-miterlimit="10"/>
+<path d="M4.60156 100.83L116.17 19.8027" stroke="black" stroke-width="10" stroke-miterlimit="10"/>
+<path d="M38.4902 125.515L81.1653 -5.57812" stroke="black" stroke-width="10" stroke-miterlimit="10"/>
+<path d="M80.4682 125.515L37.9326 -5.57812" stroke="black" stroke-width="10" stroke-miterlimit="10"/>
+<path d="M114.498 100.83L2.92871 19.8027" stroke="black" stroke-width="10" stroke-miterlimit="10"/>
+</g>
+</svg>

public/images/shapes/circle.svg

@@ -0,0 +1,9 @@
+<svg width="132" height="132" viewBox="0 0 132 132" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="66" cy="66.2598" rx="66" ry="65.5" fill="url(#paint0_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="30.0022" y1="-0.302145" x2="121.576" y2="91.9712" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0.996875"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

public/images/shapes/cross.svg

@@ -0,0 +1,34 @@
+<svg width="130" height="130" viewBox="0 0 130 130" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 16.1855H29.3959" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.1846 29.3959V3" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M35.5347 16.1855H61.9306" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M48.7192 29.3959V3" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M68.0684 16.1855H94.4643" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M81.2529 29.3959V3" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M100.604 16.1855H127" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M113.789 29.3959V3" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 48.7207H29.3959" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.1846 61.9311V35.5352" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M35.5347 48.7207H61.9306" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M48.7192 61.9311V35.5352" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M68.0684 48.7207H94.4643" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M81.2529 61.9311V35.5352" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M100.604 48.7207H127" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M113.789 61.9311V35.5352" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 81.2539H29.3959" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.1846 94.4643V68.0684" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M35.5347 81.2539H61.9306" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M48.7192 94.4643V68.0684" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M68.0684 81.2539H94.4643" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M81.2529 94.4643V68.0684" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M100.604 81.2539H127" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M113.789 94.4643V68.0684" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 113.789H29.3959" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.1846 126.999V100.604" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M35.5347 113.789H61.9306" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M48.7192 126.999V100.604" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M68.0684 113.789H94.4643" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M81.2529 126.999V100.604" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M100.604 113.789H127" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M113.789 126.999V100.604" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/images/shapes/dots.svg

@@ -0,0 +1,75 @@
+<svg width="153" height="165" viewBox="0 0 153 165" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.5" r="2.47581" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 94.7004 162.165)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 106.46 16.7117)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 77.3694 153.499)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 108.935 153.499)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 125.029 153.499)" fill="black"/>
+<ellipse opacity="0.5" rx="3.40424" ry="3.71372" transform="matrix(4.37114e-08 1 1 -4.37114e-08 27.8529 138.955)" fill="black"/>
+<ellipse opacity="0.5" rx="3.40424" ry="3.71372" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 125.338 139.265)" fill="black"/>
+<ellipse opacity="0.5" rx="3.40424" ry="3.71372" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 108.626 139.265)" fill="black"/>
+<circle opacity="0.5" r="3.71372" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 94.6996 139.265)" fill="black"/>
+<circle opacity="0.5" r="3.71372" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 77.3685 139.265)" fill="black"/>
+<circle opacity="0.5" r="3.71372" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 60.0379 139.265)" fill="black"/>
+<circle opacity="0.5" r="3.71372" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 42.7074 139.265)" fill="black"/>
+<circle opacity="0.5" r="3.71372" transform="matrix(4.37114e-08 1 1 -4.37114e-08 27.8529 30.327)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 42.6819 30.2268)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 58.845 30.2268)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 75.0144 30.2268)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 91.177 30.2268)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 108.834 30.2268)" fill="black"/>
+<circle opacity="0.5" r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 125.546 30.2268)" fill="black"/>
+<circle opacity="0.5" r="3.71372" transform="matrix(4.37114e-08 1 1 -4.37114e-08 27.8529 46.4207)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(-0.258819 0.965926 0.965926 0.258819 14.7927 46.3584)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(-0.258819 0.965926 0.965926 0.258819 138.583 46.3584)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 42.6819 46.3186)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 58.845 46.3186)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 75.0144 46.3186)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 91.177 46.3186)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 108.834 46.3186)" fill="black"/>
+<circle opacity="0.5" r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 125.546 46.3186)" fill="black"/>
+<ellipse opacity="0.5" rx="3.40424" ry="3.71372" transform="matrix(4.37114e-08 1 1 -4.37114e-08 27.8529 64.6796)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(-0.258819 0.965926 0.965926 0.258819 14.7927 64.3076)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(-0.258819 0.965926 0.965926 0.258819 138.583 64.3076)" fill="black"/>
+<ellipse opacity="0.5" rx="1.85686" ry="1.85686" transform="matrix(1.31134e-07 1 1 -1.31134e-07 150.406 64.3705)" fill="black"/>
+<ellipse opacity="0.5" rx="1.85686" ry="1.85686" transform="matrix(1.31134e-07 1 1 -1.31134e-07 1.85686 64.3705)" fill="black"/>
+<circle opacity="0.5" r="2.16633" transform="matrix(1.31134e-07 1 1 -1.31134e-07 90.6766 2.16633)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 42.6819 64.2679)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 58.845 64.2679)" fill="black"/>
+<circle r="3.71372" transform="matrix(4.37114e-08 1 1 -4.37114e-08 76.1317 64.9891)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 91.177 64.2679)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 108.834 64.2679)" fill="black"/>
+<circle opacity="0.5" r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 125.546 64.2679)" fill="black"/>
+<ellipse opacity="0.5" rx="3.40424" ry="3.71372" transform="matrix(4.37114e-08 1 1 -4.37114e-08 27.8529 79.5351)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(-0.258819 0.965926 0.965926 0.258819 14.7927 79.1631)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(-0.258819 0.965926 0.965926 0.258819 138.583 79.1631)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 42.6819 79.1233)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 58.845 79.1233)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 75.0144 79.1233)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 91.177 79.1233)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 108.834 79.1233)" fill="black"/>
+<circle r="2.78529" transform="matrix(4.37114e-08 1 1 -4.37114e-08 125.338 79.5333)" fill="black"/>
+<ellipse opacity="0.5" rx="3.40424" ry="3.71372" transform="matrix(4.37114e-08 1 1 -4.37114e-08 27.8529 95.0078)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(-0.258819 0.965926 0.965926 0.258819 14.7927 94.6358)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(-0.258819 0.965926 0.965926 0.258819 138.583 94.6358)" fill="black"/>
+<circle opacity="0.5" r="2.47581" transform="matrix(-0.258819 0.965926 0.965926 0.258819 74.8307 16.7744)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 42.6819 94.5979)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 58.845 94.5979)" fill="black"/>
+<circle r="3.09476" transform="matrix(4.37114e-08 1 1 -4.37114e-08 76.7495 94.6983)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 91.177 94.5979)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 108.834 94.5979)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 125.546 94.5979)" fill="black"/>
+<ellipse opacity="0.5" rx="3.40424" ry="3.71372" transform="matrix(4.37114e-08 1 1 -4.37114e-08 27.8529 108.625)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 42.6819 108.834)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 58.845 108.834)" fill="black"/>
+<circle opacity="0.75" r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 75.0144 108.834)" fill="black"/>
+<circle opacity="0.75" r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 91.177 108.834)" fill="black"/>
+<circle opacity="0.75" r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 108.834 108.834)" fill="black"/>
+<circle opacity="0.75" r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 125.546 108.834)" fill="black"/>
+<ellipse opacity="0.5" rx="3.40424" ry="3.71372" transform="matrix(4.37114e-08 1 1 -4.37114e-08 27.8529 123.48)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 42.6819 123.069)" fill="black"/>
+<circle r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 58.845 123.069)" fill="black"/>
+<circle opacity="0.75" r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 75.0144 123.069)" fill="black"/>
+<circle opacity="0.75" r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 91.177 123.069)" fill="black"/>
+<circle opacity="0.75" r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 108.834 123.069)" fill="black"/>
+<circle opacity="0.75" r="4.84989" transform="matrix(4.37114e-08 1 1 -4.37114e-08 125.546 123.069)" fill="black"/>
+</svg>

public/images/shapes/hash.svg

@@ -0,0 +1,6 @@
+<svg width="106" height="106" viewBox="0 0 106 106" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="33.1655" y1="101" x2="33.1655" y2="5" stroke="black" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="72.0322" y1="101" x2="72.0322" y2="5" stroke="black" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="101" y1="71.4316" x2="5" y2="71.4316" stroke="black" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="101" y1="32.5664" x2="5" y2="32.5664" stroke="black" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/images/shapes/plus.svg

@@ -0,0 +1,4 @@
+<svg width="82" height="82" viewBox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 40.9141H76.9" stroke="black" stroke-width="10" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M40.9136 76.9V5" stroke="black" stroke-width="10" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/images/shapes/ring.svg

@@ -0,0 +1,3 @@
+<svg width="186" height="186" viewBox="0 0 186 186" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="92.8184" cy="92.8185" r="60.6326" transform="rotate(45 92.8184 92.8185)" stroke="black" stroke-width="10"/>
+</svg>

public/images/shapes/triangle.svg

@@ -0,0 +1,3 @@
+<svg width="118" height="102" viewBox="0 0 118 102" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.77052 97L59 10L109.229 97H8.77052Z" stroke="black" stroke-width="10"/>
+</svg>

public/images/shapes/waves.svg

@@ -0,0 +1,4 @@
+<svg width="164" height="76" viewBox="0 0 164 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M123.404 17.0056C125.205 18.9565 128.246 19.0782 130.197 17.2774C132.148 15.4766 132.27 12.4352 130.469 10.4843L123.404 17.0056ZM80.0893 16.0374L76.2919 18.9852L80.0893 16.0374ZM79.4289 15.1867L75.6315 18.1345L79.4289 15.1867ZM54.0979 16.2242L57.7885 19.3048L54.0979 16.2242ZM23.5426 17.4409L24.5319 18.7154L32.1268 12.8198L31.1375 11.5453L23.5426 17.4409ZM57.7885 19.3048L59.0112 17.8399L51.6299 11.6789L50.4073 13.1437L57.7885 19.3048ZM75.6315 18.1345L76.2919 18.9852L83.8868 13.0896L83.2264 12.2389L75.6315 18.1345ZM123.261 16.8509L123.404 17.0056L130.469 10.4843L130.326 10.3296L123.261 16.8509ZM107.821 17.9959C111.4 12.7347 118.945 12.1752 123.261 16.8509L130.326 10.3296C121.813 1.10695 106.931 2.21053 99.8717 12.588L107.821 17.9959ZM76.2919 18.9852C84.4118 29.4455 100.373 28.9447 107.821 17.9959L99.8717 12.588C96.0956 18.1389 88.0035 18.3928 83.8868 13.0896L76.2919 18.9852ZM59.0112 17.8399C63.3756 12.6112 71.4551 12.7543 75.6315 18.1345L83.2264 12.2389C75.2868 2.01084 59.927 1.73863 51.6299 11.6789L59.0112 17.8399ZM24.5319 18.7154C32.8887 29.4808 49.0555 29.7673 57.7885 19.3048L50.4073 13.1437C45.6069 18.8948 36.7204 18.7373 32.1268 12.8198L24.5319 18.7154ZM31.1375 11.5453C23.4468 1.63788 8.64288 1.16467 0.335104 10.5606L7.53794 16.9293C11.8546 12.0472 19.5466 12.2931 23.5426 17.4409L31.1375 11.5453Z" fill="black"/>
+<path d="M155.404 61.0056C157.205 62.9565 160.246 63.0782 162.197 61.2774C164.148 59.4766 164.27 56.4352 162.469 54.4843L155.404 61.0056ZM112.089 60.0374L108.292 62.9852L112.089 60.0374ZM111.429 59.1867L107.632 62.1345L111.429 59.1867ZM86.0979 60.2242L89.7885 63.3048L86.0979 60.2242ZM55.5426 61.4409L56.5319 62.7154L64.1268 56.8198L63.1375 55.5453L55.5426 61.4409ZM89.7885 63.3048L91.0112 61.8399L83.6299 55.6789L82.4073 57.1437L89.7885 63.3048ZM107.632 62.1345L108.292 62.9852L115.887 57.0896L115.226 56.2389L107.632 62.1345ZM155.261 60.8509L155.404 61.0056L162.469 54.4843L162.326 54.3296L155.261 60.8509ZM139.821 61.9959C143.4 56.7347 150.945 56.1752 155.261 60.8509L162.326 54.3296C153.813 45.1069 138.931 46.2105 131.872 56.588L139.821 61.9959ZM108.292 62.9852C116.412 73.4455 132.373 72.9447 139.821 61.9959L131.872 56.588C128.096 62.1389 120.003 62.3928 115.887 57.0896L108.292 62.9852ZM91.0112 61.8399C95.3756 56.6112 103.455 56.7543 107.632 62.1345L115.226 56.2389C107.287 46.0108 91.927 45.7386 83.6299 55.6789L91.0112 61.8399ZM56.5319 62.7154C64.8887 73.4808 81.0555 73.7673 89.7885 63.3048L82.4073 57.1437C77.6069 62.8948 68.7204 62.7373 64.1268 56.8198L56.5319 62.7154ZM63.1375 55.5453C55.4468 45.6379 40.6429 45.1647 32.3351 54.5606L39.5379 60.9293C43.8546 56.0472 51.5466 56.2931 55.5426 61.4409L63.1375 55.5453Z" fill="black"/>
+</svg>