diff --git a/frontend/src/Components/ArtPage.tsx b/frontend/src/Components/ArtPage.tsx
index 767204075d51843d29d3d778799b9a430ef09c1f..362e2de963f9b82acc594777360ef429dd7c71ef 100644
--- a/frontend/src/Components/ArtPage.tsx
+++ b/frontend/src/Components/ArtPage.tsx
@@ -4,6 +4,7 @@ import FavoriteButton from './FavoriteButton';
import DropDown from './DropDown';
import NavButton from './NavButton';
import '../Style/ArtPage.css';
+import Music from "./Music";
type props = {
@@ -84,4 +85,4 @@ class ArtPage extends React.Component<props, state> {
}
}
-export default ArtPage;
+export default ArtPage;
\ No newline at end of file
diff --git a/frontend/src/Components/Music.tsx b/frontend/src/Components/Music.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ed299f019340b01ccb6acb323f2c0172c93ad678
--- /dev/null
+++ b/frontend/src/Components/Music.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import sound from "../Media/bensound-energy.mp3";
+const Music = () => {
+ return (
+ <div>
+ <audio src={sound} autoPlay/>
+ </div>
+ );
+}
+
+export default Music;
diff --git a/frontend/src/Media/250-milliseconds-of-silence.mp3 b/frontend/src/Media/250-milliseconds-of-silence.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..482395f021ca95e262c57c8238a974c5ef909f50
Binary files /dev/null and b/frontend/src/Media/250-milliseconds-of-silence.mp3 differ
diff --git a/frontend/src/Media/bensound-energy.mp3 b/frontend/src/Media/bensound-energy.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..9a8f68471a98b659ae3e9e7983116708bbac26af
Binary files /dev/null and b/frontend/src/Media/bensound-energy.mp3 differ
diff --git a/frontend/src/Media/bensound-epic.mp3 b/frontend/src/Media/bensound-epic.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..0a2308eb71782084b2d8413efb82d26ff38c5386
Binary files /dev/null and b/frontend/src/Media/bensound-epic.mp3 differ
diff --git a/frontend/src/Media/bensound-thejazzpiano.mp3 b/frontend/src/Media/bensound-thejazzpiano.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..7dc446711789c44a40579a56c237fc23212ca765
Binary files /dev/null and b/frontend/src/Media/bensound-thejazzpiano.mp3 differ
diff --git a/frontend/src/SVG/svg1.svg b/frontend/src/SVG/svg1.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e7f7ca7887aa0d57db7d6c6c6dadcaba42e419cb
--- /dev/null
+++ b/frontend/src/SVG/svg1.svg
@@ -0,0 +1,115 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50">
+
+ <!-- Background -->
+ <circle r="24" cx="25" cy="25" style="stroke: blue; fill: lightgreen">
+ </circle>
+
+ <!-- Cells -->
+ <circle id="circle1" r="3" cx="15" cy="15" style="stroke: red; stroke-width: 0.5; fill: green">
+ <animate
+ xlink:href="#circle1"
+ attributeName="cx"
+ dur="3s"
+ values="15; 30; 23; 32; 15"
+ fill = "freeze"
+ repeatCount="indefinite"/>
+ <animate
+ xlink:href="#circle1"
+ attributeName="cy"
+ dur="3s"
+ values="15; 15; 27; 40; 15"
+ fill = "freeze"
+ repeatCount="indefinite"/>
+ </circle>
+ <circle id = "circle2" r="2" cx="30" cy="15" style="stroke: red; stroke-width: 0.5; fill: green">
+ <animate
+ xlink:href="#circle2"
+ attributeName="cx"
+ dur="3s"
+ values="30; 15; 40; 15; 30"
+ fill = "freeze"
+ repeatCount="indefinite"
+ />
+ <animate
+ xlink:href="#circle2"
+ attributeName="cy"
+ dur="3s"
+ values="15; 30; 32; 15; 15"
+ fill = "freeze"
+ repeatCount="indefinite"
+ />
+ </circle>
+ <circle id="circle3" r="1" cx="15" cy="30" style="stroke: red; stroke-width: 0.5; fill: green">
+ <animate
+ xlink:href="#circle3"
+ attributeName="cx"
+ dur="2s"
+ values="15; 23; 32; 30; 15"
+ fill = "freeze"
+ repeatCount="indefinite"
+ />
+ <animate
+ xlink:href="#circle3"
+ attributeName="cy"
+ dur="2s"
+ values="30; 27; 40; 15; 30"
+ fill = "freeze"
+ repeatCount="indefinite"
+ />
+ </circle>
+ <circle id="circle4" r="3" cx="23" cy="27" style="stroke: red; stroke-width: 0.5; fill: green">
+ <animate
+ xlink:href="#circle4"
+ attributeName="cx"
+ dur="4s"
+ values="23; 40; 15; 15; 23"
+ fill = "freeze"
+ repeatCount="indefinite"
+ />
+ <animate
+ xlink:href="#circle4"
+ attributeName="cy"
+ dur="4s"
+ values="27; 32; 15; 30; 27"
+ fill = "freeze"
+ repeatCount="indefinite"
+ />
+ </circle>
+ <circle id="circle5" r="2.5" cx="40" cy="32" style="stroke: red; stroke-width: 0.5; fill: green">
+ <animate
+ xlink:href="#circle5"
+ attributeName="cx"
+ dur="4s"
+ values="40; 32; 30; 23; 40"
+ fill = "freeze"
+ repeatCount="indefinite"
+ />
+ <animate
+ xlink:href="#circle5"
+ attributeName="cy"
+ dur="4s"
+ values="32; 40; 15; 27; 32"
+ fill = "freeze"
+ repeatCount="indefinite"
+ />
+ </circle>
+ <circle id="circle6" r="1.5" cx="32" cy="40" style="stroke: red; stroke-width: 0.5; fill: green">
+ <animate
+ xlink:href="#circle6"
+ attributeName="cx"
+ dur="3s"
+ values="32; 15; 15; 40; 32"
+ fill = "freeze"
+ repeatCount="indefinite"
+ />
+ <animate
+ xlink:href="#circle6"
+ attributeName="cy"
+ dur="3s"
+ values="40; 15; 30; 32; 40"
+ fill = "freeze"
+ repeatCount="indefinite"
+ />
+ </circle>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/SVG/svg2.svg b/frontend/src/SVG/svg2.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fc5fa30aad51f193b883df2a5eddece211a4cd85
--- /dev/null
+++ b/frontend/src/SVG/svg2.svg
@@ -0,0 +1,68 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" style="background-color: black">
+
+ <!-- Upper left -->
+ <polygon fill="gold"
+ points="50,50 60,10 70,50 110,50 75,70 85,110 60,85 35,110 45,70 10,50">
+ <animate id="animation1"
+ attributeName="opacity"
+ from="0" to="1" dur="2s"
+ begin="animation2.end" />
+ <animate id="animation2"
+ attributeName="opacity"
+ from="1" to="0" dur="3s"
+ begin="0s;animation1.end" />
+ </polygon>
+
+ <!-- Middle -->
+ <polygon fill="gold"
+ points="183.75,183.75 191.25,153.75 198.75,183.75 228.75,183.75 202.5,198.75 210,228.75 191.25,210 172.5,228.75 180,198.75 153.75,183.75">
+ <animate id="animation3"
+ attributeName="opacity"
+ from="0" to="1" dur="2s"
+ begin="animation4.end" />
+ <animate id="animation4"
+ attributeName="opacity"
+ from="1" to="0" dur="2s"
+ begin="1s;animation3.end" />
+ </polygon>
+
+ <!-- Upper right -->
+ <polygon fill="gold"
+ points="330,50 340,10 350,50 390,50 355,70 365,110 340,85 315,110 325,70 290,50">
+ <animate id="animation5"
+ attributeName="opacity"
+ from="0" to="1" dur="2s"
+ begin="animation6.end" />
+ <animate id="animation6"
+ attributeName="opacity"
+ from="1" to="0" dur="2s"
+ begin="3s;animation5.end" />
+ </polygon>
+
+ <!-- Bottom right -->
+ <polygon fill="gold"
+ points="330,330 340,290 350,330 390,330 355,350 365,390 340,360 315,390 325,350 290,330">
+ <animate id="animation7"
+ attributeName="opacity"
+ from="0" to="1" dur="2s"
+ begin="animation8.end" />
+ <animate id="animation8"
+ attributeName="opacity"
+ from="1" to="0" dur="2s"
+ begin="2s;animation7.end" />
+ </polygon>
+
+ <!-- Bottom left -->
+ <polygon fill="gold"
+ points="50,330 60,290 70,330 110,330 75,350 85,390 60,365 35,390 45,350 10,330">
+ <animate id="animation9"
+ attributeName="opacity"
+ from="0" to="1" dur="3s"
+ begin="animation10.end" />
+ <animate id="animation10"
+ attributeName="opacity"
+ from="1" to="0" dur="2s"
+ begin="4s;animation9.end" />
+ </polygon>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/SVG/svg3.svg b/frontend/src/SVG/svg3.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7683aefbf0dffbf0e2de494a6ffda56c9ff7d837
--- /dev/null
+++ b/frontend/src/SVG/svg3.svg
@@ -0,0 +1,168 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400">
+
+ <!-- Background -->
+ <rect width="400" height="400" style="fill: black" opacity="0">
+ <animate
+ id ="animation3"
+ attributeName="opacity"
+ from="0"
+ to="1"
+ dur="5s"
+ begin="0s;animation4.end"/>
+
+ <animate
+ id ="animation4"
+ attributeName="opacity"
+ from="1"
+ to="0"
+ dur="5s"
+ begin="animation3.end"/>
+ </rect>
+
+ <!-- Ground -->
+ <rect x="-10" y="310" width="420" height="100" style="fill: greenyellow; stroke: black; stroke-width: 2">
+ </rect>
+
+ <!-- Sun -->
+ <circle r="100" cx="5" cy="5" style="fill: yellow; stroke: black; stroke-width: 2">
+ <animate
+ id ="animation1"
+ attributeName="opacity"
+ from="1"
+ to="0"
+ dur="5s"
+ begin="0s;animation2.end"/>
+
+ <animate
+ id ="animation2"
+ attributeName="opacity"
+ from="0"
+ to="1"
+ dur="5s"
+ begin="animation1.end"/>
+ </circle>
+
+ <!-- Sunshine -->
+ <line x1="115" y1="30" x2="175" y2="60" style="stroke: yellow; stroke-width: 3">
+ <animate
+ id ="animation1"
+ attributeName="opacity"
+ from="1"
+ to="0"
+ dur="5s"
+ begin="0s;animation2.end"/>
+
+ <animate
+ id ="animation2"
+ attributeName="opacity"
+ from="0"
+ to="1"
+ dur="5s"
+ begin="animation1.end"/>
+ </line>
+ <line x1="100" y1="70" x2="155" y2="105" style="stroke: yellow; stroke-width: 3">
+ <animate
+ id ="animation1"
+ attributeName="opacity"
+ from="1"
+ to="0"
+ dur="5s"
+ begin="0s;animation2.end"/>
+
+ <animate
+ id ="animation2"
+ attributeName="opacity"
+ from="0"
+ to="1"
+ dur="5s"
+ begin="animation1.end"/>
+ </line>
+ <line x1="70" y1="100" x2="120" y2="140" style="stroke: yellow; stroke-width: 3">
+ <animate
+ id ="animation1"
+ attributeName="opacity"
+ from="1"
+ to="0"
+ dur="5s"
+ begin="0s;animation2.end"/>
+
+ <animate
+ id ="animation2"
+ attributeName="opacity"
+ from="0"
+ to="1"
+ dur="5s"
+ begin="animation1.end"/>
+ </line>
+
+ <!-- Moon -->
+ <circle r="100" cx="395" cy="5" style="fill: lightgoldenrodyellow; stroke: black; stroke-width: 2">
+ <animate
+ id ="animation3"
+ attributeName="opacity"
+ from="0"
+ to="1"
+ dur="5s"
+ begin="0s;animation4.end"/>
+
+ <animate
+ id ="animation4"
+ attributeName="opacity"
+ from="1"
+ to="0"
+ dur="5s"
+ begin="animation3.end"/>
+ </circle>
+ <circle r="15" cx="340" cy="25" style="stroke: goldenrod; stroke-width: 3; fill: #fced9f">
+ <animate
+ id ="animation3"
+ attributeName="opacity"
+ from="0"
+ to="1"
+ dur="5s"
+ begin="0s;animation4.end"/>
+
+ <animate
+ id ="animation4"
+ attributeName="opacity"
+ from="1"
+ to="0"
+ dur="5s"
+ begin="animation3.end"/>
+ </circle>
+ <circle r="10" cx="385" cy="45" style="stroke: goldenrod; stroke-width: 3; fill: #fced9f">
+ <animate
+ id ="animation3"
+ attributeName="opacity"
+ from="0"
+ to="1"
+ dur="5s"
+ begin="0s;animation4.end"/>
+
+ <animate
+ id ="animation4"
+ attributeName="opacity"
+ from="1"
+ to="0"
+ dur="5s"
+ begin="animation3.end"/>
+ </circle>
+ <circle r="12" cx="350" cy="65" style="stroke: goldenrod; stroke-width: 3; fill: #fced9f">
+ <animate
+ id ="animation3"
+ attributeName="opacity"
+ from="0"
+ to="1"
+ dur="5s"
+ begin="0s;animation4.end"/>
+
+ <animate
+ id ="animation4"
+ attributeName="opacity"
+ from="1"
+ to="0"
+ dur="5s"
+ begin="animation3.end"/>
+ </circle>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/SVG/svg4.svg b/frontend/src/SVG/svg4.svg
new file mode 100644
index 0000000000000000000000000000000000000000..780b2e3d8c13ee5b9ba4fb93e73e98fc8b0ccc9e
--- /dev/null
+++ b/frontend/src/SVG/svg4.svg
@@ -0,0 +1,43 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" style="background-color: black">
+
+ <!-- Dial -->
+ <circle r="175" cx="200" cy="200" fill="white">
+ <animate
+ attributeName="fill"
+ begin="5s"
+ dur="20s"
+ values ="white; skyblue; orange; crimson; goldenrod; white"
+ repeatCount="indefinite"
+ />
+ </circle>
+
+ <!-- Minute hand -->
+ <line x1="200" x2="200" y1="75" y2="200" stroke="black" stroke-width="3">
+ <animateTransform attributeName="transform"
+ type="rotate"
+ from="0 200 200" to="360 200 200"
+ begin="0s" dur="5s"
+ repeatCount="indefinite"
+ />
+ </line>
+
+ <!-- Hour hand -->
+ <line x1="200" x2="300" y1="200" y2="200" stroke="black" stroke-width="3">
+ <animateTransform attributeName="transform"
+ type="rotate"
+ from="0 200 200" to="360 200 200"
+ begin="0s" dur="60s"
+ repeatCount="indefinite"
+ />
+ </line>
+
+ <!-- Notches -->
+ <line x1 ="200" x2="200" y1="40" y2="55" stroke="black" stroke-width="2"></line>
+ <line x1 ="345" x2="360" y1="200" y2="200" stroke="black" stroke-width="2"></line>
+ <line x1 ="200" x2="200" y1="345" y2="360" stroke="black" stroke-width="2"></line>
+ <line x1 ="40" x2="55" y1="200" y2="200" stroke="black" stroke-width="2"></line>
+
+ <!-- Center circle -->
+ <circle r="5" cx="200" cy="200" fill="black"></circle>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/SVG/svg5.svg b/frontend/src/SVG/svg5.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8ba51cef54fff2ec3e049a952a3a615e6444fde3
--- /dev/null
+++ b/frontend/src/SVG/svg5.svg
@@ -0,0 +1,48 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400">
+
+ <!-- Background -->
+ <rect width="400" height="400" fill="goldenrod"></rect>
+
+ <!-- Inner squares -->
+ <rect width="200" height="200" x="100" y="100" stroke="gray" stroke-width="3" fill="black">
+ <animateTransform attributeName="transform"
+ type="rotate"
+ from="0 200 200" to="360 200 200"
+ begin="0s" dur="5s"
+ repeatCount="indefinite"
+ />
+ </rect>
+ <rect width="100" height="100" x="150" y="150" stroke="white" stroke-width="3" fill="goldenrod">
+ <animateTransform attributeName="transform"
+ type="rotate"
+ from="360 200 200" to="0 200 200"
+ begin="0s" dur="5s"
+ repeatCount="indefinite"
+ />
+ </rect>
+ <rect width="50" height="50" x="175" y="175" stroke="gray" stroke-width="2" fill="black">
+ <animateTransform attributeName="transform"
+ type="rotate"
+ from="0 200 200" to="360 200 200"
+ begin="0s" dur="5s"
+ repeatCount="indefinite"
+ />
+ </rect>
+ <rect width="25" height="25" x="187.5" y="187.5" stroke="white" stroke-width="2" fill="goldenrod">
+ <animateTransform attributeName="transform"
+ type="rotate"
+ from="360 200 200" to="0 200 200"
+ begin="0s" dur="5s"
+ repeatCount="indefinite"
+ />
+ </rect>
+ <rect width="12.5" height="12.5" x="193.75" y="193.75" stroke="gray" stroke-width="1" fill="black">
+ <animateTransform attributeName="transform"
+ type="rotate"
+ from="0 200 200" to="360 200 200"
+ begin="0s" dur="5s"
+ repeatCount="indefinite"
+ />
+ </rect>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/SVG/svg6.svg b/frontend/src/SVG/svg6.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b16afb261ae4f52b30d9df44a915d578949835ba
--- /dev/null
+++ b/frontend/src/SVG/svg6.svg
@@ -0,0 +1,70 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400">
+
+ <!-- Gradient for background -->
+ <defs>
+ <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+ <stop offset="0%" style="stop-color:lime;stop-opacity:1" />
+ <stop offset="100%" style="stop-color:gold;stop-opacity:1" />
+ </linearGradient>
+ </defs>
+
+ <!-- Background -->
+ <rect width="400" height="400" x="0" y="0" fill="url(#grad1)" style="stroke: black; stroke-width: 4"/>
+
+ <!-- Lines to illustrate center -->
+ <line x1="200" x2="200" y1="0" y2="400" stroke="gray" stroke-dasharray="10 5"/>
+ <line x1="0" x2="400" y1="200" y2="200" stroke="gray" stroke-dasharray="10 5"/>
+
+ <!-- Circle -->
+ <circle id ="circle1" r="50" cx="95" cy="95" style="stroke: black; stroke-width: 2; fill: blue">
+ <animateTransform attributeName="transform"
+ type="rotate"
+ from="0 200 200" to="360 200 200"
+ begin="0s" dur="3s"
+ repeatCount="indefinite"
+ />
+ <animate
+ xlink:href="#circle1"
+ attributeName="r"
+ dur="9s"
+ from="50"
+ to="0"
+ repeatCount="indefinite"/>
+ <animate
+ xlink:href="#circle1"
+ attributeName="cx"
+ dur="9s"
+ from="95"
+ to="200"
+ repeatCount="indefinite"
+ />
+ <animate
+ xlink:href="#circle1"
+ attributeName="cy"
+ dur="9s"
+ from="95"
+ to="200"
+ repeatCount="indefinite"
+ />
+ <animate
+ id="animation1"
+ attributeName="fill"
+ begin="8.9s;animation1.end+18s"
+ dur="0.001s"
+ from="blue"
+ to="red"
+ fill="freeze"
+ />
+ <animate
+ id="animation2"
+ attributeName="fill"
+ begin="17.9s;animation2.end+18s"
+ dur="0.001s"
+ from="red"
+ to="blue"
+ fill="freeze"
+ />
+ </circle>
+
+</svg>
\ No newline at end of file
diff --git a/frontend/src/SVG/svg7.svg b/frontend/src/SVG/svg7.svg
new file mode 100644
index 0000000000000000000000000000000000000000..bd3d001aa43cd3eb66c1834a788ffc516aba2143
--- /dev/null
+++ b/frontend/src/SVG/svg7.svg
@@ -0,0 +1,279 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400">
+
+ <!-- Background -->
+ <rect width="400" height="400" x="0" y="0">
+ <animate
+ attributeName="fill"
+ dur="20s"
+ values ="black; skyblue; white; lime; black"
+ repeatCount="indefinite"
+ />
+ </rect>
+
+ <!-- Big circles -->
+ <circle id="circle1" r="50" cx="50" cy="300" fill="goldenrod" stroke="black" stroke-width="1">
+ <animate
+ xlink:href="#circle1"
+ id="animation1"
+ attributeName="r"
+ dur="3s"
+ from="10"
+ to="50"
+ repeatCount="indefinite"/>
+ <animate
+ xlink:href="#circle1"
+ attributeName="cy"
+ dur="3s"
+ from="300"
+ to="50"
+ repeatCount="indefinite"
+ />
+ <animate
+ xlink:href="#circle1"
+ attributeName="cx"
+ dur="10s"
+ values="50; 350; 50"
+ repeatCount="indefinite"
+ />
+ </circle>
+
+ <circle id="circle2" r="50" cx="350" cy="50" fill="crimson" stroke="black" stroke-width="1">
+ <animate
+ xlink:href="#circle2"
+ id="animation1"
+ attributeName="r"
+ dur="3s"
+ from="10"
+ to="50"
+ repeatCount="indefinite"/>
+ <animate
+ xlink:href="#circle2"
+ attributeName="cy"
+ dur="3s"
+ from="50"
+ to="300"
+ repeatCount="indefinite"
+ />
+ <animate
+ xlink:href="#circle2"
+ attributeName="cx"
+ dur="10s"
+ values="350; 50; 350"
+ repeatCount="indefinite"
+ />
+ </circle>
+
+ <!-- Smaller circles -->
+ <circle id="circle3" r="5" cx="250" cy="300" fill="goldenrod" stroke="black" stroke-width="1">
+ <animate
+ xlink:href="#circle3"
+ id="animation1"
+ attributeName="r"
+ dur="2s"
+ from="5"
+ to="25"
+ repeatCount="indefinite"/>
+ <animate
+ xlink:href="#circle3"
+ attributeName="cy"
+ dur="2s"
+ from="300"
+ to="50"
+ repeatCount="indefinite"
+ />
+ <animate
+ xlink:href="#circle3"
+ attributeName="cx"
+ dur="10s"
+ values="250; 150; 250"
+ repeatCount="indefinite"
+ />
+ </circle>
+
+ <circle id="circle4" r="5" cx="150" cy="300" fill="crimson" stroke="black" stroke-width="1">
+ <animate
+ xlink:href="#circle4"
+ id="animation1"
+ attributeName="r"
+ dur="2s"
+ from="5"
+ to="25"
+ repeatCount="indefinite"/>
+ <animate
+ xlink:href="#circle4"
+ attributeName="cy"
+ dur="2s"
+ from="300"
+ to="50"
+ repeatCount="indefinite"
+ />
+ <animate
+ xlink:href="#circle4"
+ attributeName="cx"
+ dur="10s"
+ values="150; 250; 150"
+ repeatCount="indefinite"
+ />
+ </circle>
+
+
+ <!-- Smallest circles -->
+ <circle id="circle5" r="0" cx="225" cy="300" fill="crimson" stroke="black" stroke-width="1">
+ <animate
+ xlink:href="#circle5"
+ id="animation1"
+ attributeName="r"
+ dur="1s"
+ from="0"
+ to="15"
+ repeatCount="indefinite"/>
+ <animate
+ xlink:href="#circle5"
+ attributeName="cy"
+ dur="1s"
+ from="300"
+ to="50"
+ repeatCount="indefinite"
+ />
+ <animate
+ xlink:href="#circle5"
+ attributeName="cx"
+ dur="10s"
+ values="225; 175; 225"
+ repeatCount="indefinite"
+ />
+ </circle>
+
+ <circle id="circle6" r="0" cx="175" cy="300" fill="crimson" stroke="black" stroke-width="1">
+ <animate
+ xlink:href="#circle6"
+ id="animation1"
+ attributeName="r"
+ dur="1s"
+ from="0"
+ to="15"
+ repeatCount="indefinite"/>
+ <animate
+ xlink:href="#circle6"
+ attributeName="cy"
+ dur="1s"
+ from="300"
+ to="50"
+ repeatCount="indefinite"
+ />
+ <animate
+ xlink:href="#circle6"
+ attributeName="cx"
+ dur="10s"
+ values="175; 225; 175"
+ repeatCount="indefinite"
+ />
+ </circle>
+
+ <!-- Smallest circles, but from the top -->
+ <circle id="circle7" r="0" cx="225" cy="50" fill="goldenrod" stroke="black" stroke-width="1">
+ <animate
+ xlink:href="#circle7"
+ id="animation1"
+ attributeName="r"
+ dur="1s"
+ from="0"
+ to="15"
+ repeatCount="indefinite"/>
+ <animate
+ xlink:href="#circle7"
+ attributeName="cy"
+ dur="1s"
+ from="50"
+ to="300"
+ repeatCount="indefinite"
+ />
+ <animate
+ xlink:href="#circle7"
+ attributeName="cx"
+ dur="10s"
+ values="225; 175; 225"
+ repeatCount="indefinite"
+ />
+ </circle>
+
+ <circle id="circle8" r="0" cx="175" cy="50" fill="goldenrod" stroke="black" stroke-width="1">
+ <animate
+ xlink:href="#circle8"
+ id="animation1"
+ attributeName="r"
+ dur="1s"
+ from="0"
+ to="15"
+ repeatCount="indefinite"/>
+ <animate
+ xlink:href="#circle8"
+ attributeName="cy"
+ dur="1s"
+ from="50"
+ to="300"
+ repeatCount="indefinite"
+ />
+ <animate
+ xlink:href="#circle8"
+ attributeName="cx"
+ dur="10s"
+ values="175; 225; 175"
+ repeatCount="indefinite"
+ />
+ </circle>
+
+ <!-- Smaller circles again -->
+ <circle id="circle9" r="5" cx="250" cy="50" fill="goldenrod" stroke="black" stroke-width="1">
+ <animate
+ xlink:href="#circle9"
+ id="animation1"
+ attributeName="r"
+ dur="2s"
+ from="5"
+ to="25"
+ repeatCount="indefinite"/>
+ <animate
+ xlink:href="#circle9"
+ attributeName="cy"
+ dur="2s"
+ from="50"
+ to="300"
+ repeatCount="indefinite"
+ />
+ <animate
+ xlink:href="#circle9"
+ attributeName="cx"
+ dur="10s"
+ values="250; 150; 250"
+ repeatCount="indefinite"
+ />
+ </circle>
+
+ <circle id="circle10" r="5" cx="150" cy="50" fill="crimson" stroke="black" stroke-width="1">
+ <animate
+ xlink:href="#circle10"
+ id="animation1"
+ attributeName="r"
+ dur="2s"
+ from="5"
+ to="25"
+ repeatCount="indefinite"/>
+ <animate
+ xlink:href="#circle10"
+ attributeName="cy"
+ dur="2s"
+ from="50"
+ to="300"
+ repeatCount="indefinite"
+ />
+ <animate
+ xlink:href="#circle10"
+ attributeName="cx"
+ dur="10s"
+ values="150; 250; 150"
+ repeatCount="indefinite"
+ />
+ </circle>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/SVGs.tsx b/frontend/src/SVGs.tsx
index 696d089f83b756234810412ddd098ed3d4e49b0f..0832b241b3816051cd66bb7225f475e1217382d6 100644
--- a/frontend/src/SVGs.tsx
+++ b/frontend/src/SVGs.tsx
@@ -32,4 +32,4 @@ export default [ // Collection of Artworks that will be displayed
<rect width={"200"} height={80} fill={"teal"} />
</svg>,
// TODO: ADD SVGS IN HERE
-];
\ No newline at end of file
+];
diff --git a/frontend/src/react-app-env.d.ts b/frontend/src/react-app-env.d.ts
index 6431bc5fc6b2c932dfe5d0418fc667b86c18b9fc..fe3e4debcb767c7f738dd2bdfc87a86cc865c171 100644
--- a/frontend/src/react-app-env.d.ts
+++ b/frontend/src/react-app-env.d.ts
@@ -1 +1,5 @@
/// <reference types="react-scripts" />
+declare module '*.mp3' {
+ const src: string;
+ export default src;
+}
\ No newline at end of file