Μια δημοφιλής τεχνική μικρής SVG είναι η σχεδίαση διαδρομών. Εάν δεν μπορείτε να το φανταστείτε, εδώ είναι μια συλλογή από παραδείγματα zillion που έχω δημιουργήσει. Ουσιαστικά η διαδρομή γύρω από τα σχήματα SVG τραβάει την πάροδο του χρόνου.
Το άκουσα για πρώτη φορά από το άρθρο Κινούμενο γραμμικό σχέδιο του Jake Archibald στο SVG, το οποίο είναι καλό για την εξήγησή του, όπως μπορεί να υπάρχει. Φυσικά, προσπάθησα και τη δική μου εξήγηση και το αναφέρουμε σε αυτό το βίντεο.
Νομίζω ότι είναι πιο εύκολο να σκεφτεί κανείς να ξεκινήσει με CSS και πώς λειτουργούν οι ιδιότητες παύλας όπως εφαρμόζεται σε σχήμα SVG. Πώς μπορεί να πάρει περισσότερο, και ακόμη και αρκετά μεγάλο έως το σημείο που καλύπτει (ή δεν καλύπτει) ολόκληρο το σχήμα. Στη συνέχεια, αντισταθμίζοντάς τα όταν είναι τόσο μεγάλα είναι πώς λειτουργεί το σχέδιο.
Στη συνέχεια, μόλις το καταλάβετε, κατανοήστε ότι το JavaScript μπορεί να σας βοηθήσει να υπολογίσετε το μήκος των απαιτούμενων παύλων και των όφσετ και να το κάνετε σωστά.