Mikä on SVG-blobi?

Blobi on pehmeä, orgaaninen muoto, jossa ei ole suoria reunoja ja joka sijoittuu ympyrän ja roiskeen välimaastoon. Blobit ovat suosittu koriste modernissa verkkosuunnittelussa: pääkuvien ja kuvitusten taustalla, avatar-kehyksinä, osioiden taustoina tai leikkisinä painikkeina ja tunnisteina. Koska ne ovat vektorigrafiikkaa, ne säilyvät terävinä kaikissa kokoluokissa ja vievät vain muutaman sadan tavun verran tilaa.

Työkalun kuvaus

Tämä työkalu luo selaimessasi satunnaisia blob-muotoja puhtaana SVG-koodina. Paina Satunnaista-painiketta, kunnes pidät muodosta, ja hienosäädä sitten sen kuoppien määrää, epäsäännöllisyyttä ja kaarien pyöreyttä. Täytä muoto yksivärisellä täytöllä tai liukuvärillä tai piirrä se ääriviivana. Voit myös saada sen muuntumaan muotojen välillä sulavana silmukkana. Lataa tulos SVG- tai PNG-muodossa tai kopioi se SVG-merkintänä, CSS-taustana tai CSS clip-path -koodina.

Ominaisuudet

  • Uudelleen luotavat satunnaiset blobit: sama siemenarvo ja samat asetukset tuottavat aina saman muodon
  • Säädettävä monimutkaisuus, satunnaisuus ja pehmeys – pyöreistä kivistä piikkimäisiin tähtiin
  • Yksivärinen, liukuväri- tai ääriviivatäyttö millä tahansa värillä
  • Muunnosanimaatio, joka kiertää muotojen välillä ja on sisäänrakennettu SVG:hen ilman JavaScriptia
  • Lataa SVG:nä tai läpinäkyvänä PNG:nä valitsemassasi koossa
  • Valmiiksi kopioitava SVG-, CSS-tausta- ja CSS clip-path -koodi

Miten se toimii

Työkalu sijoittaa pisteitä ympyrän ympärille, siirtää jokaista niistä satunnaisen matkan verran sisäänpäin ja piirtää niiden kautta tasaisen suljetun käyrän. Käyrä mitataan tarkasti ja skaalataan niin, että blobi täyttää kuvan reunasta reunaan. Siemenarvolla alustettu satunnaislukugeneraattori määrittää jokaisen pisteen, joten siemennumero tai -sana palauttaa saman blobin myöhemmin. Animaatiota varten useita saman pistemäärän omaavia blob-muotoja sijoitetaan yhteen SVG:n animate-elementtiin, ja selain sulauttaa ne toisikseen.

Vinkkejä

  • Viidestä kahdeksaan pistettä ja keskitasoinen satunnaisuus tuottavat klassisia blob-muotoja; vähäisempi satunnaisuus näyttää rauhallisemmalta ja ammattimaisemmalta.
  • Laske pehmeys 0 prosenttiin, jos haluat kristalli- tai jalokivimäisiä monikulmioita.
  • Rajaa valokuva tai video blobin muotoon CSS clip-path -koodin avulla.
  • Kirjoita siemenarvo muistiin tai käytä omaa sanaasi siemenenä, jotta voit luoda saman blobin myöhemmin täsmälleen uudelleen.
  • Pidä muunnosanimaatio hitaana, noin 8–15 sekuntia kierrosta kohti, jotta se säilyy rauhallisena taustalla.