diff --git a/perspective.svg b/perspective.svg
new file mode 100644
index 0000000..a61be9a
--- /dev/null
+++ b/perspective.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" fill="none" style="background: black;">
+  <defs>
+    <circle id="circle" cx="500" cy="500" r="45" stroke-width="5" />
+  </defs>
+
+  <rect width="1000" height="1000" fill="black"/>
+
+  <ellipse cx="320" cy="500" rx="2" ry="45" stroke-width="5" stroke="white">
+    <animate attributeName="rx" values="45;0;45" dur="10s" begin="-5s" repeatCount="indefinite" />
+  </ellipse>
+
+  <ellipse cx="500" cy="500" rx="2" ry="45" stroke-width="5" stroke="white">
+    <animate attributeName="rx" values="45;0;45" dur="10s" begin="-2.5s" repeatCount="indefinite" />
+  </ellipse>
+
+  <ellipse cx="680" cy="500" rx="2" ry="45" stroke-width="5" stroke="white">
+    <animate attributeName="rx" values="45;0;45" dur="10s" repeatCount="indefinite" />
+  </ellipse>
+</svg>
diff --git a/presence.svg b/presence.svg
new file mode 100644
index 0000000..9eb9078
--- /dev/null
+++ b/presence.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" fill="none" style="background: black;">
+  <defs>
+    <circle id="circle" cx="500" cy="500" r="45" stroke-width="5" />
+
+    <filter id="blur">
+      <feGaussianBlur>
+        <animate id="blur_start" begin="0s;blur_end.end+3s" attributeName="stdDeviation" from="0 0" to="50 0 " dur="8s" fill="freeze" />
+        <animate id="blur_hover" begin="blur_start.end" attributeName="stdDeviation" values="50 0; 39 0; 50 0" dur="8s" />
+        <animate id="blur_end" begin="blur_hover.end" attributeName="stdDeviation" from="50 0" to="0 0 " dur="8s" fill="freeze" />
+      </feGaussianBlur>
+    </filter>
+  </defs>
+
+  <rect width="1000" height="1000" fill="black"/>
+
+  <!-- CENTER -->
+  <use href="#circle" stroke="white" />
+
+  <!-- LEFT & RIGHT -->
+  <g filter="url(#blur)">
+    <use href="#circle" transform="translate(-180)" stroke="white" />
+    <use href="#circle" transform="translate(180)" stroke="white" />
+  </g>
+</svg>
diff --git a/time.svg b/time.svg
new file mode 100644
index 0000000..2d21490
--- /dev/null
+++ b/time.svg
@@ -0,0 +1,50 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" fill="none" style="background: black;">
+  <defs>
+    <circle id="circle" cx="500" cy="500" r="45" stroke-width="5" />
+  </defs>
+
+  <rect width="1000" height="1000" fill="black"/>
+
+  <use href="#circle" transform="translate(-180)" stroke="hsl(0, 0%, 20%)" />
+  <use
+    href="#circle"
+    stroke="hsl(0, 0%, 100%)"
+    stroke-dasharray="283"
+    stroke-dashoffset="0"
+    transform="translate(-180) rotate(-90 500 500)"
+  >
+    <animate id="third_0" begin="third_2.end" attributeName="stroke-dashoffset" from="283" to="566" dur="0.1s" fill="freeze" />
+    <animate id="third_1" begin="third_0.end" attributeName="opacity" from="0" to="1" dur="5s" fill="freeze" />
+    <animate id="third_2" begin="second_2.end" attributeName="stroke-dashoffset" from="566" to="283" dur="10s" fill="freeze" />
+    <animate begin="second_2.end+5s" attributeName="opacity" from="1" to="0" dur="5s" fill="freeze" />
+  </use>
+
+  <use href="#circle" stroke="hsl(0, 0%, 20%)" />
+  <use
+    href="#circle"
+    stroke="hsl(0, 0%, 100%)"
+    stroke-dasharray="283"
+    stroke-dashoffset="0"
+    transform="rotate(-90 500 500)"
+  >
+    <animate id="second_0" begin="third_2.end" attributeName="stroke-dashoffset" from="283" to="566" dur="0.1s" fill="freeze" />
+    <animate id="second_1" begin="second_0.end" attributeName="opacity" from="0" to="1" dur="5s" fill="freeze" />
+    <animate id="second_2" begin="first_2.end" attributeName="stroke-dashoffset" from="566" to="283" dur="10s" fill="freeze" />
+    <animate begin="first_2.end+5s" attributeName="opacity" from="1" to="0" dur="5s" fill="freeze" />
+  </use>
+
+
+  <use href="#circle" transform="translate(180)" stroke="hsl(0, 0%, 20%)" />
+  <use
+    href="#circle"
+    stroke="hsl(0, 0%, 100%)"
+    stroke-dasharray="283"
+    stroke-dashoffset="0"
+    transform="translate(180) rotate(-90 500 500)"
+  >
+    <animate id="first_0" begin="third_2.end" attributeName="stroke-dashoffset" from="283" to="566" dur="0.1s" fill="freeze" />
+    <animate id="first_1" begin="first_0.end" attributeName="opacity" from="0" to="1" dur="5s" fill="freeze" />
+    <animate id="first_2" begin="0s;first_1.end" attributeName="stroke-dashoffset" from="566" to="283" dur="10s" fill="freeze" />
+    <animate begin="5s;first_1.end+5s" attributeName="opacity" from="1" to="0" dur="5s" fill="freeze" />
+  </use>
+</svg>