SVG Drawing Animation με CSS

Μερικές χρήσιμες συμβουλές, για να μπορέσουμε εύκολα να πετύχουμε το παρακάτω αποτέλεσμα, λεγόμενο ως SVG Drawing Animation.

Αρχικά, δημιούργησα με το γνωστό Pen tool, ένα σχέδιο και το αντέγραψα “ως SVG”.

Επικολλώντας το svg μέσα στο HTML είναι σημαντικό να δηλώσουμε ένα έξτρα attribute: pathLength=”1″, όπως το παράδειγμα:

<svg viewBox="0 0 706 130" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path
      pathLength="1"
      d="M1 49C4.31267 .........."
      stroke="black"
   />
</svg>

Το pathLenght=”1″ μας βοηθάει ώστε να παίξουμε με τις τιμές 0 και 1 στο dashoffset χωρίς να απαιτεί να γνωρίζουμε το αληθινό path length του svg μας.

Στο css, γράφουμε τον παρακάτω κώδικα, και είμαστε έτοιμοι:

path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: svg_drawing 3.5s linear alternate infinite;
}

@keyframes svg_drawing {
    from {
        stroke-dashoffset: 1;
    }
    to {
        stroke-dashoffset: 0;
    }
}

Σχετικό άρθρο με SVG Animation: SVG on Scroll Animation

Ο κώδικας του παραδείγματος είναι ανεβασμένος στο Github