Che cos'è un blob SVG?

Un blob è una forma morbida e organica, priva di bordi diritti, a metà tra un cerchio e uno schizzo. I blob sono una decorazione molto usata nel web design moderno: dietro immagini principali e illustrazioni, come cornici per avatar, come sfondi di sezioni oppure come pulsanti ed etichette giocosi. Poiché sono grafiche vettoriali, rimangono nitide a qualsiasi dimensione e occupano solo poche centinaia di byte.

Descrizione dello strumento

Questo strumento genera forme blob casuali come codice SVG pulito direttamente nel browser. Premi «Casualizza» finché non trovi una forma che ti piace, poi regola con precisione il numero di protuberanze, il livello di irregolarità e la rotondità delle curve. Riempila con un colore uniforme o con un gradiente, oppure disegnala come contorno; puoi anche farla trasformare tra diverse forme in un ciclo fluido. Scarica il risultato come SVG o PNG, oppure copialo come markup SVG, sfondo CSS o clip-path CSS.

Funzionalità

  • Blob casuali riproducibili: lo stesso seed e le stesse impostazioni producono sempre la stessa forma
  • Complessità, casualità e morbidezza regolabili, da ciottoli arrotondati a stelle appuntite
  • Riempimento uniforme, sfumato o a contorno con qualsiasi colore
  • Animazione morph che alterna ciclicamente diverse forme, integrata nell'SVG senza JavaScript
  • Download in formato SVG o PNG trasparente alle dimensioni che scegli
  • Codice SVG, sfondo CSS e clip-path CSS pronti da copiare

Come funziona

Lo strumento posiziona dei punti lungo una circonferenza, sposta ciascuno verso l'interno di una quantità casuale e traccia una curva chiusa e morbida che li attraversa. La curva viene misurata con precisione e ridimensionata in modo che il blob riempia l'immagine da bordo a bordo. Un generatore di numeri casuali basato su seed determina ogni punto, quindi un numero o una parola usati come seed consentono di richiamare in seguito lo stesso blob. Per l'animazione, diversi blob con lo stesso numero di punti vengono inseriti in un unico elemento SVG animate e il browser crea una transizione graduale tra di essi.

Suggerimenti

  • Da cinque a otto punti con una casualità media producono forme blob classiche; una casualità inferiore crea un effetto più ordinato e professionale.
  • Imposta la morbidezza su 0% per ottenere poligoni dall'aspetto cristallino o simile a una gemma.
  • Usa il codice clip-path CSS per ritagliare una foto o un video secondo la forma del blob.
  • Annota il seed oppure inserisci una parola a tua scelta come seed per ricreare in seguito un blob identico.
  • Mantieni lenta l'animazione morph, circa da 8 a 15 secondi per ciclo, così lo sfondo rimane discreto.