svg animation

main
km0 3 years ago
parent e1080239f5
commit 65898fce4b

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

File diff suppressed because one or more lines are too long

@ -45,6 +45,7 @@ body, html{
} }
.atlas { .atlas {
position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@ -75,8 +76,23 @@ body, html{
.atlas svg { .atlas svg {
padding: 32px; padding: 32px;
width: 100%; 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]{ path[data-link]{
pointer-events: all; pointer-events: all;

Loading…
Cancel
Save