From 65898fce4baf6b90bdf4cd7e189e2f8c4d9b0757 Mon Sep 17 00:00:00 2001 From: Francesco Luzzana Date: Thu, 12 May 2022 13:39:37 +0200 Subject: [PATCH] svg animation --- contents.js | 3 +++ index.html | 11 ++++++++++- style.css | 16 ++++++++++++++++ 3 files changed, 29 insertions(+), 1 deletion(-) diff --git a/contents.js b/contents.js index 60c9a98..ee3a01b 100644 --- a/contents.js +++ b/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", diff --git a/index.html b/index.html index 015e5ad..de74c4b 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@ fill="none" xmlns="http://www.w3.org/2000/svg" > - + + + diff --git a/style.css b/style.css index 367231f..3ff6902 100644 --- a/style.css +++ b/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;