Τι είναι ένα SVG blob;

Ένα blob είναι ένα απαλό, οργανικό σχήμα χωρίς ευθείες ακμές, κάπου ανάμεσα σε κύκλο και πιτσιλιά. Τα blob είναι δημοφιλής διακοσμητική επιλογή στον σύγχρονο σχεδιασμό ιστοσελίδων: πίσω από hero εικόνες και εικονογραφήσεις, ως πλαίσια avatar, ως φόντα ενοτήτων ή ως παιχνιδιάρικα κουμπιά και σήματα. Επειδή είναι διανυσματικά γραφικά, παραμένουν καθαρά σε κάθε μέγεθος και έχουν μέγεθος μόλις μερικών εκατοντάδων byte.

Περιγραφή εργαλείου

Αυτό το εργαλείο δημιουργεί τυχαία σχήματα blob ως καθαρό κώδικα SVG στον browser σας. Πατήστε «Τυχαιοποίηση» μέχρι να σας αρέσει το σχήμα και, στη συνέχεια, ρυθμίστε με ακρίβεια πόσες προεξοχές έχει, πόσο ακανόνιστο είναι και πόσο στρογγυλές είναι οι καμπύλες του. Γεμίστε το με συμπαγές χρώμα ή διαβάθμιση, σχεδιάστε το ως περίγραμμα και, προαιρετικά, κάντε το να μεταμορφώνεται ομαλά μεταξύ σχημάτων σε αδιάκοπο βρόχο. Κατεβάστε το αποτέλεσμα ως SVG ή PNG ή αντιγράψτε το ως σήμανση SVG, φόντο CSS ή clip-path CSS.

Δυνατότητες

  • Τυχαία blob που μπορείτε να αναπαράγετε: το ίδιο seed και οι ίδιες ρυθμίσεις δίνουν πάντα το ίδιο σχήμα
  • Ρυθμιζόμενη πολυπλοκότητα, τυχαιότητα και ομαλότητα, από στρογγυλεμένα βότσαλα έως αιχμηρά αστέρια
  • Συμπαγές, διαβαθμισμένο γέμισμα ή περίγραμμα με οποιοδήποτε χρώμα
  • Κινούμενη μεταμόρφωση που επαναλαμβάνεται μεταξύ σχημάτων, ενσωματωμένη στο SVG χωρίς JavaScript
  • Λήψη ως SVG ή διαφανές PNG στο μέγεθος που επιλέγετε
  • Κώδικας SVG, φόντου CSS και clip-path CSS έτοιμος για αντιγραφή

Πώς λειτουργεί

Το εργαλείο τοποθετεί σημεία γύρω από έναν κύκλο, μετακινεί το καθένα προς τα μέσα κατά μια τυχαία απόσταση και σχεδιάζει μια ομαλή κλειστή καμπύλη που περνά από αυτά. Η καμπύλη μετριέται με ακρίβεια και κλιμακώνεται έτσι ώστε το blob να γεμίζει την εικόνα από άκρη σε άκρη. Μια γεννήτρια τυχαίων αριθμών με seed αποφασίζει τη θέση κάθε σημείου, επομένως ένας αριθμός ή μια λέξη ως seed επαναφέρει αργότερα το ίδιο blob. Για την κινούμενη εικόνα, πολλά blob με τον ίδιο αριθμό σημείων τοποθετούνται σε ένα στοιχείο SVG animate και ο browser κάνει ομαλή μετάβαση μεταξύ τους.

Συμβουλές

  • Πέντε έως οκτώ σημεία με μέτρια τυχαιότητα δημιουργούν κλασικά σχήματα blob· η χαμηλότερη τυχαιότητα δίνει πιο ήρεμο και επαγγελματικό αποτέλεσμα.
  • Μειώστε την ομαλότητα στο 0% για πολυγωνικά σχήματα που θυμίζουν κρύσταλλο ή πολύτιμο λίθο.
  • Χρησιμοποιήστε τον κώδικα clip-path CSS για να περικόψετε μια φωτογραφία ή ένα βίντεο στο σχήμα του blob.
  • Καταγράψτε το seed ή πληκτρολογήστε τη δική σας λέξη ως seed, ώστε να μπορείτε να αναδημιουργήσετε ακριβώς το ίδιο blob αργότερα.
  • Διατηρήστε την κινούμενη μεταμόρφωση αργή, περίπου 8 έως 15 δευτερόλεπτα ανά βρόχο, ώστε το αποτέλεσμα να παραμένει ήρεμο στο φόντο.