Hva er en SVG-blob?

En blob er en myk, organisk form uten rette kanter, et sted mellom en sirkel og en sprut. Blober er en populær dekorasjon i moderne webdesign: bak hero-bilder og illustrasjoner, som rammer rundt avatarer, som bakgrunner for seksjoner eller som lekne knapper og merker. Fordi de er vektorgrafikk, holder de seg skarpe i alle størrelser og tar bare noen få hundre byte.

Verktøybeskrivelse

Dette verktøyet genererer tilfeldige blob-former som ren SVG-kode i nettleseren din. Trykk på Tilfeldig til du liker formen, og finjuster deretter hvor mange buler den har, hvor uregelmessig den er, og hvor avrundede kurvene er. Fyll den med en ensfarget farge eller en gradient, eller tegn den som et omriss, og la den eventuelt forvandles mellom former i en jevn løkke. Last ned resultatet som SVG eller PNG, eller kopier det som SVG-markup, en CSS-bakgrunn eller en CSS clip-path.

Funksjoner

  • Tilfeldige blober som kan gjenskapes: Samme seed og innstillinger gir alltid samme form
  • Justerbar kompleksitet, tilfeldighet og jevnhet, fra runde småstein til spisse stjerner
  • Ensfarget, gradient- eller omrissfyll med valgfri farge
  • Morfing-animasjon som går i løkke mellom former, innebygd i SVG-en uten JavaScript
  • Last ned som SVG eller transparent PNG i størrelsen du velger
  • Kopieringsklar SVG-, CSS-bakgrunns- og CSS clip-path-kode

Slik fungerer det

Verktøyet plasserer punkter rundt en sirkel, flytter hvert punkt innover med en tilfeldig avstand og tegner en jevn, lukket kurve gjennom dem. Kurven måles nøyaktig og skaleres slik at bloben fyller bildet fra kant til kant. En seed-basert tilfeldig tallgenerator bestemmer hvert punkt, slik at et seed-nummer eller -ord senere kan hente frem den samme bloben. For animasjonen plasseres flere blober med samme antall punkter i ett SVG-animate-element, og nettleseren lager en jevn overgang mellom dem.

Tips

  • Fem til åtte punkter med middels grad av tilfeldighet gir klassiske blob-former; lavere tilfeldighet ser roligere og mer profesjonelt ut.
  • Sett jevnheten til 0 % for polygoner med et krystall- eller edelsteinslignende utseende.
  • Bruk CSS clip-path-koden til å beskjære et bilde eller en video til blob-formen.
  • Skriv ned seed-en, eller skriv inn ditt eget ord som seed, for å gjenskape en blob nøyaktig senere.
  • Hold morfing-animasjonen langsom, rundt 8 til 15 sekunder per løkke, slik at den forblir rolig i bakgrunnen.