SVG animation vivus

[Matthias Scharwies]

Servus!

Hallo,

auf dieser Seite sind ein paar schöne SVG-Animationen als Beispiel für dieses Script.

Super Idee!

Leider verstehe ich das ganze Konzept nicht und probiere hier schon seit Stunden ohne Erfolg.

Ah verstanden:

Ich habe auf Vivus instant ein Bild hochgeladen (besteht aus mehreren Pfaden, "Selfhtml" besteht aus nur einem Pfad mit einigen m-Befehlen, müsste noch aufgetrennt werden.)

Den Pfaden werden Klassen zugeordnet, es gibt drunter ein umfangreiches ´<style data-made-with="vivus-instant"></style>`-Element:

<style data-made-with="vivus-instant">
.WtJRroxN_5{
  stroke-dasharray:1707 1709;
  stroke-dashoffset:1708;
  animation:
    WtJRroxN_draw_5 7200ms linear 0ms infinite, 
    WtJRroxN_fade 7200ms linear 0ms infinite;
}
@keyframes WtJRroxN_draw_5{
   25.405982905982903%{stroke-dashoffset: 1708}
   52.77777777777778%{ stroke-dashoffset: 0;}
  100%{ stroke-dashoffset: 0;}
}
</style>

Hatte lang das JavaScript oder die CDN-Einbindung gesucht, aber es ist ja „nur“ eine CSS-Animation! Genial!

Wenn ich mir das bei github anschaue und richtig verstehe, sollte es doch einfach sein, sein eigenes SVG animieren zu lassen. Nur gibts leider kein Clean-Beispiel, wo man nur die URL zum eigenen SVG austauscht, schon ein animiertes Ergebnis erhält, um sich danach langsam an die Parameter heran zu tasten.

Mal einen Kreis in SVG, speicher ihn und lad' ihn hier hoch. https://maxwellito.github.io/vivus-instant/

Hier gibt es weitere Infos: https://www.javascripting.com/view/vivus

Grundformen wie circle und rect werden mit "pathformer" in Pfade umgewandelt - ein Füllen ist nicht möglich

Stattdessen einige Nutzungsschnipsel, die aber bei mir nicht funktionieren(entweder gar kein Bild oder ohne Animation). Verstehe ich das ganze Konzept dort falsch oder wie würde minimalster Code aussehen um dieses Script mit einer externen SVG nutzen zu können?

Ich bin grad nicht zuhause, morgen bau ich die Grafik aus und aktualisiere das Wiki-Beispiel!

Herzliche Grüße

Matthias Scharwies