svg animation

contents.js

@@ -94,6 +94,9 @@ function createIndexSection(contribution) {
 	}
 }
 
+var path = document.querySelector("#live-path");
+console.log(path.getTotalLength());
+
 const symbols = {
 	"stream_01.mp3": "i1",
 	"stream_02.mp3": "i2",

style.css

@@ -45,6 +45,7 @@ body, html{
 }
 
 .atlas {
+    position: relative;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -75,9 +76,24 @@ body, html{
 .atlas svg {
     padding: 32px;
     width: 100%;
+    overflow: visible;
+
+}
+
+.atlas svg #live-path {
+    color: currentColor;
+    stroke-dasharray: 18159;
+    stroke-dashoffset: 18159;
+    animation: dash 300s linear forwards;
+}
 
+@keyframes dash {
+    to{
+        stroke-dashoffset: 0;
+    }
 }
 
+
 path[data-link]{
     pointer-events: all;
     pointer-events:bounding-box;