Generatore di Blob: Blob SVG Casuali e Animazione Blob CSS | We.Inc
Genera forme blob organiche casuali come path SVG, oppure come blob in puro CSS con border-radius che può trasformarsi con @keyframes da copiare. Con seed, così puoi riottenere lo stesso blob.
Un blob è una forma chiusa morbida e irregolare usata dietro foto, icone e testi hero. Questo generatore li crea in due modi: come path SVG tracciato attraverso punti spostati a caso attorno a un cerchio, oppure come semplice CSS con otto percentuali di border-radius. La versione CSS può trasformarsi da una forma all'altra con una breve animazione @keyframes da copiare.
Blob SVG o blob CSS?
Blob con path SVG
Blob CSS con border-radius
Varietà di forme
Qualsiasi numero di sporgenze, molto irregolari
Forme a uovo e a ciottolo con quattro lati morbidi
Può contenere elementi
Come immagine di sfondo o maschera
Sì, è un normale box con testo o un'immagine all'interno
Animazione di trasformazione
Richiede JavaScript o SMIL
@keyframes su border-radius
Output
Un elemento svg o un file .svg
Poche righe di CSS
I blob ammorbidiscono i layout a griglia rigidi e danno a un brand una forma tutta sua. Ogni blob qui nasce da un numero seed, quindi le stesse impostazioni e lo stesso seed ricostruiscono sempre la stessa forma. Prova la modalità SVG per forme con molti lobi, poi passa alla modalità CSS quando vuoi un box che ondeggia lentamente.
Scegli la modalità SVG o la modalità CSS.
In modalità SVG, imposta quanti punti ha la forma e quanto ogni punto può allontanarsi dal cerchio. Ogni nuovo seed dà una nuova forma.
In modalità CSS, premi Nuova forma per estrarre nuovi valori di border-radius, e attiva Anima per ottenere una trasformazione tra tre forme.
Copia il markup SVG, scarica il file .svg oppure copia il CSS e i keyframe.
Tra 5 e 8 punti con casualità media si ottengono le forme più gradevoli. Molti punti con casualità alta sembrano schizzi.
Usa il blob SVG come mask-image o dietro una foto con position: absolute, così il testo resta selezionabile.
Mantieni lente le animazioni dei blob, da 6 a 12 secondi, e alternale così il movimento non torna mai di scatto all'inizio.
Disattiva l'animazione per i visitatori che preferiscono meno movimento. L'output dei keyframe include già quella media query.
Domande frequenti
Come funziona il blob CSS?
border-radius accetta raggi orizzontali e verticali separati per ogni angolo, scritti come quattro valori, una barra e altri quattro. Quando i due raggi che si incontrano su ogni lato sommano il 100 percento, gli angoli si fondono in un unico contorno organico e morbido invece di un rettangolo arrotondato.
Come animo un blob in CSS?
Metti due o più valori di border-radius in @keyframes ed esegui l'animazione con ease-in-out, infinite e alternate. I browser interpolano il raggio di ogni angolo, così il contorno scorre fluido da una forma all'altra. Attiva Anima in modalità CSS per ottenere keyframe già pronti.
Posso riottenere lo stesso blob più tardi?
Sì. La forma dipende solo dalle impostazioni e dal numero seed. Annota il seed, o conserva il codice copiato, e il generatore ricostruirà esattamente quel contorno.
Posso usare il blob SVG come clip-path?
Puoi richiamarlo con clip-path: url(#id) quando l'SVG si trova nella stessa pagina, oppure incollare l'attributo d in clip-path: path() per una dimensione fissa in pixel. Una mask-image con il file .svg è il modo più semplice per ridimensionarlo insieme all'elemento.
Come viene disegnato il blob SVG
Il generatore dispone i punti in modo uniforme attorno a un cerchio, poi sposta ciascuno verso l'interno o verso l'esterno di una quantità casuale controllata dal cursore della casualità. Una curva morbida passa attraverso i punti con segmenti di Bézier cubiche, così non ci sono angoli vivi.
Meno punti e meno casualità danno un ciottolo. Più punti e più casualità danno uno schizzo o una nuvola.
Animare un blob senza JavaScript
La proprietà CSS d, che permetterebbe di trasformare un path SVG in un foglio di stile, secondo MDN non è Baseline, quindi non funziona in alcuni browser principali. Per questo l'opzione animata usa border-radius. Ogni raggio d'angolo è una lunghezza o una percentuale, quindi il browser può fondere da solo i keyframe.
Aggiungere una rotazione lenta insieme al cambio di raggio rende il movimento più organico. Mantienilo delicato così resta sullo sfondo.
Esempio di animazione di un blob CSS
Blob che si trasforma dietro la cornice di una foto
Tre forme di border-radius in un'unica animazione alternata, più una rotazione lenta. La query per il movimento ridotto la ferma per chi chiede meno movimento.
Leggere un border-radius a otto valori
I valori prima della barra sono i raggi orizzontali, quelli dopo i raggi verticali, ciascuno nell'ordine in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra.
border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%
Angolo
Raggio orizzontale
Raggio verticale
In alto a sinistra
In alto a destra
In basso a destra
In basso a sinistra
Creatore di blob
Ogni forma nasce dal seed mostrato sotto l'anteprima. Cambia i cursori o estrai un nuovo seed, poi copia l'SVG o il CSS.