Skip to content
Snippets Groups Projects
Commit 80eb03c7 authored by tommy's avatar tommy
Browse files

Added 5 SVGs and 3 mp3 tracks

parent c823881d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 442 additions and 0 deletions
frontend/src/Components/Music.tsx 0 → 100644
+ 0
− 0
View file @ 80eb03c7
frontend/src/Media/bensound-energy.mp3 0 → 100644
+ 0
− 0
View file @ 80eb03c7
File added
frontend/src/Media/bensound-epic.mp3 0 → 100644
+ 0
− 0
View file @ 80eb03c7
File added
frontend/src/Media/bensound-thejazzpiano.mp3 0 → 100644
+ 0
− 0
View file @ 80eb03c7
File added
frontend/src/SVG/svg1.svg 0 → 100644
+ 115
− 0
View file @ 80eb03c7
<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
frontend/src/SVG/svg2.svg 0 → 100644
+ 68
− 0
View file @ 80eb03c7
<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
frontend/src/SVG/svg3.svg 0 → 100644
+ 168
− 0
View file @ 80eb03c7
<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
frontend/src/SVG/svg4.svg 0 → 100644
+ 43
− 0
View file @ 80eb03c7
<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
frontend/src/SVG/svg5.svg 0 → 100644
+ 48
− 0
View file @ 80eb03c7
<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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment