Γεννήτρια Φόντου με Μοτίβα CSS

Τα περισσότερα εργαλεία «γεννήτριας μοτίβων» επαναχρησιμοποιούν ήσυχα τον ίδιο τύπο repeating-linear-gradient για κάθε επιλογή και απλώς αλλάζουν τους αριθμούς. Αυτό εδώ δεν το κάνει: καθένας από τους έξι τύπους μοτίβων εδώ δημιουργείται με τη συγκεκριμένη τεχνική CSS που παράγει πραγματικά αυτό το σχήμα. Οι λωρίδες χρησιμοποιούν ένα μόνο repeating-linear-gradient με δύο χρωματικές ζώνες. Οι κουκκίδες χρησιμοποιούν ένα radial-gradient που παρατίθεται αποκλειστικά μέσω του background-size — το κλασικό κόλπο των κουκκίδων σε CSS — αντί για ένα repeating-radial-gradient, το οποίο δεν μπορεί να παραθέσει μια κυκλική κουκκίδα καθαρά σε ορθογώνιο πλέγμα. Το καρό χρησιμοποιεί τον πραγματικό τύπο conic-gradient τεσσάρων τεταρτημορίων: ένα κωνικό gradient με κέντρο σε ένα τετράγωνο πλακίδιο χωρίζεται φυσικά σε τέσσερα τεταρτημοριακά τετράγωνα σε όρια 90 μοιρών και η εναλλαγή δύο χρωμάτων σε αυτά τα τεταρτημόρια παραθέτει ένα γνήσιο καρό, όχι μια προσέγγιση.

Το πλέγμα και η διαγώνια διασταύρωση επιστρώνουν και τα δύο δύο repeating-linear-gradients ως ξεχωριστές καταχωρίσεις background-image αντί να προσποιούνται τη δεύτερη κατεύθυνση με τεχνάσματα περιγράμματος. Το πλέγμα συνδυάζει ένα επαναλαμβανόμενο gradient «προς τα δεξιά» και ένα «προς τα κάτω» για ευκρινείς οριζόντιες και κάθετες γραμμές καννάβου. Η διασταύρωση επιστρώνει ένα επαναλαμβανόμενο gradient +45 μοιρών και ένα -45 μοιρών για μια διαγώνια πλέξη τύπου ψάθας — αξίζει να είμαστε ακριβείς: πρόκειται για μια ειλικρινή διασταύρωση, όχι για γνήσια γεωμετρία ψαροκόκαλου, και το εργαλείο την επισημαίνει έτσι αντί να υπερβάλλει. Τα τρίγωνα επαναχρησιμοποιούν την τεχνική conic-gradient τεσσάρων σφηνών του καρό, αλλά ξεκινούν το gradient περιστραμμένο κατά 45 μοίρες, γεγονός που μετατοπίζει τα όρια των σφηνών από τα μέσα των άκρων του πλακιδίου στις γωνίες του και μετατρέπει τις ίδιες τέσσερις σφήνες σε τέσσερα τρίγωνα από γωνία σε γωνία αντί για τέσσερα τεταρτημοριακά τετράγωνα.

Κάθε τύπος μοτίβου εμφανίζει μόνο τα χειριστήρια που πραγματικά ισχύουν για αυτόν — εμφανίζεται ένα ρυθμιστικό γωνίας για τις λωρίδες, ακτίνα κουκκίδας και απόσταση για τις κουκκίδες, πάχος γραμμής για το πλέγμα και τη διασταύρωση — και το μεγάλο παράθυρο παραθέσιμης προεπισκόπησης ανανεώνεται σε κάθε αλλαγή, ώστε να μπορείτε να δείτε πολλές πλήρεις επαναλήψεις πριν δεσμευτείτε σε μια τιμή. Αλλάξτε τη λειτουργία εξόδου σε SVG και το ίδιο μοτίβο επανεμφανίζεται ως ένα στοιχείο <pattern> που δημιουργείται από απλά πρωτογενή rect, circle, path ή polygon, έτοιμο να επικολληθεί μέσα σε οποιοδήποτε <defs> εγγράφου SVG, με λήψη με ένα κλικ για ένα αυτόνομο αρχείο .svg.

Όλα εκτελούνται τοπικά στον browser σας: καμία μεταφόρτωση εικόνας, καμία επικοινωνία με server, κανένας λογαριασμός. Για συμπαγή ή gradient γεμίσματα χωρίς επανάληψη, η γεννήτρια CSS gradient σε αυτόν τον ιστότοπο είναι το κατάλληλο εργαλείο· αυτό εδώ προορίζεται ειδικά για παραθέσιμα γεωμετρικά φόντα που δημιουργούνται από μηδενικά περιουσιακά στοιχεία εικόνας.