Το στοιχείο SVG μας επιτρέπει να ορίσουμε μοτίβα μέσα στη σήμανση SVG και να χρησιμοποιήσουμε αυτά τα μοτίβα ως fill. Η βασική διαδικασία για μοτίβα μοιάζει με:
- Ορίστε ένα
εσωτερικό του SVG - Ορίστε τα σχήματα στο εσωτερικό του μοτίβου
- Χρησιμοποιήστε τα σχήματα
- Δημιουργήστε ένα νέο σχήμα και γεμίστε το με το μοτίβο
Πρόκειται για μια συλλογή απλών σχημάτων SVG που χρησιμοποιούνται ως μοτίβα. Αυτή η λίστα μπορεί να αναπτυχθεί με την πάροδο του χρόνου, αλλά η ιδέα είναι λιγότερο να έχουμε μια ολοκληρωμένη συλλογή από το να είναι η σύνταξη εύχρηστη ως σημείο εκκίνησης για τη δημιουργία νέων και συναρπαστικών προτύπων.
Διατηρούμε επίσης μια συλλογή από αυτά στο CodePen.
Σχέδιο κύκλου
Μοτίβο σκακιέρας
Εξάγωνο μοτίβο
Σχέδιο κύβου
Σχέδιο Chevron
Εάν θέλετε να παίξετε σε πραγματικό χρόνο με τα διαφορετικά χαρακτηριστικά ενός μοτίβου για να αποκτήσετε μια αίσθηση για το πώς λειτουργεί το μοτίβο, δοκιμάστε αυτό: