From cbc576e0669ecb4298014de7c4f31020249d543c Mon Sep 17 00:00:00 2001
From: tommy <tommyew7@gmail.com>
Date: Tue, 22 Sep 2020 21:17:16 +0200
Subject: [PATCH] Added 2 more SVGs
---
frontend/src/Components/Music.tsx | 7 +-
frontend/src/SVG/svg6.svg | 70 ++++++++
frontend/src/SVG/svg7.svg | 279 ++++++++++++++++++++++++++++++
frontend/src/SVGs.tsx | 7 +-
4 files changed, 355 insertions(+), 8 deletions(-)
create mode 100644 frontend/src/SVG/svg6.svg
create mode 100644 frontend/src/SVG/svg7.svg
diff --git a/frontend/src/Components/Music.tsx b/frontend/src/Components/Music.tsx
index 9be0109..ed299f0 100644
--- a/frontend/src/Components/Music.tsx
+++ b/frontend/src/Components/Music.tsx
@@ -1,12 +1,9 @@
import React from "react";
-import sound from "../Media/bensound-energy.mp3"
+import sound from "../Media/bensound-energy.mp3";
const Music = () => {
return (
<div>
- {/** Option for autoplay in Chrome
- <iframe src={require('../Media/250-milliseconds-of-silence.mp3')} allow="autoplay" id="audio"/>
- **/}
- <audio src={require('../Media/bensound-energy.mp3')} controls autoPlay/>
+ <audio src={sound} autoPlay/>
</div>
);
}
diff --git a/frontend/src/SVG/svg6.svg b/frontend/src/SVG/svg6.svg
new file mode 100644
index 0000000..b16afb2
--- /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 0000000..bd3d001
--- /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 34324a5..0832b24 100644
--- a/frontend/src/SVGs.tsx
+++ b/frontend/src/SVGs.tsx
@@ -1,8 +1,9 @@
import React from "react";
-import SVG1 from "./SVG/svg1.svg";
export default [ // Collection of Artworks that will be displayed
- SVG1,
+ <svg viewBox={"0 0 200 80"}>
+ <rect width={"200"} height={80} fill={"blue"} />
+ </svg>,
<svg viewBox={"0 0 200 80"}>
<rect width={"200"} height={80} fill={"red"} />
</svg>,
@@ -31,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
+];
--
GitLab