Blob-generator: SVG-vormen en geanimeerde CSS-blobs
Blob-generator
Blob-generator: willekeurige SVG-blobs en CSS-blobanimatie | We.Inc
Maak willekeurige organische blobvormen als SVG-pad, of als pure CSS-blob met border-radius die kan morphen met kopieerbare @keyframes. Met een seed, zodat u dezelfde blob terugkrijgt.
Een blob is een zachte, onregelmatige gesloten vorm die achter foto's, iconen en hero-tekst wordt gebruikt. Deze generator maakt ze op twee manieren: als SVG-pad getekend door willekeurig verschoven punten rond een cirkel, of als gewone CSS met acht border-radius-percentages. De CSS-versie kan tussen vormen morphen met een korte @keyframes-animatie die u kopieert.
SVG-blob of CSS-blob?
SVG-padblob
CSS-blob met border-radius
Bereik van vormen
Willekeurig aantal bulten, heel onregelmatig
Ei- en kiezelvormen met vier zachte zijden
Bevat inhoud
Als achtergrondafbeelding of mask
Ja, het is een normale box met tekst of een afbeelding erin
Morph-animatie
Heeft JavaScript of SMIL nodig
@keyframes op border-radius
Output
Een svg-element of .svg-bestand
Een paar regels CSS
Blobs verzachten strakke gridlayouts en geven een merk een vorm die echt van hem is. Elke blob hier komt uit een seed-getal, dus dezelfde instellingen en seed bouwen altijd dezelfde vorm opnieuw. Probeer de SVG-modus voor vormen met veel lobben en schakel over naar de CSS-modus als u een box wilt die langzaam wiebelt.
Kies SVG-modus of CSS-modus.
Stel in de SVG-modus in hoeveel punten de vorm heeft en hoe ver elk punt van de cirkel mag afwijken. Elke nieuwe seed geeft een nieuwe vorm.
Druk in de CSS-modus op Nieuwe vorm voor verse border-radius-waarden, en zet Animeren aan voor een morph tussen drie vormen.
Kopieer de SVG-markup, download het .svg-bestand, of kopieer de CSS en keyframes.
Tussen 5 en 8 punten met gemiddelde willekeur geeft de vriendelijkste vormen. Veel punten met hoge willekeur lijken op spetters.
Gebruik de SVG-blob als mask-image of achter een foto met position: absolute, zodat tekst selecteerbaar blijft.
Houd blobanimaties langzaam, 6 tot 12 seconden, en laat ze afwisselen zodat de beweging nooit terugspringt naar het begin.
Zet de animatie uit voor bezoekers die minder beweging willen. De keyframes-output bevat die media query al.
Veelgestelde vragen
Hoe werkt de CSS-blob?
border-radius accepteert per hoek een aparte horizontale en verticale radius, geschreven als vier waarden, een schuine streep en nog vier. Als de twee radii die aan elke zijde samenkomen samen 100 procent zijn, smelten de hoeken samen tot één vloeiende organische omtrek in plaats van een afgeronde rechthoek.
Hoe animeer ik een blob in CSS?
Zet twee of meer border-radius-waarden in @keyframes en draai de animatie met ease-in-out, infinite en alternate. Browsers interpoleren elke hoekradius, zodat de omtrek vloeiend van de ene vorm naar de volgende gaat. Zet Animeren aan in de CSS-modus voor kant-en-klare keyframes.
Kan ik later dezelfde blob terugkrijgen?
Ja. De vorm hangt alleen af van de instellingen en het seed-getal. Noteer de seed, of bewaar de gekopieerde code, en de generator bouwt precies die omtrek opnieuw.
Kan ik de SVG-blob als clip-path gebruiken?
U kunt ernaar verwijzen met clip-path: url(#id) als de SVG in dezelfde pagina staat, of het d-attribuut in clip-path: path() plakken voor een vaste pixelgrootte. Een mask-image met het .svg-bestand is de makkelijkste manier om hem mee te laten schalen met het element.
Hoe de SVG-blob wordt getekend
De generator zet punten gelijkmatig rond een cirkel en verschuift ze elk naar binnen of naar buiten met een willekeurige afstand die de willekeurschuif bepaalt. Door de punten loopt een vloeiende curve van kubische Bezier-segmenten, zodat er geen scherpe hoeken zijn.
Minder punten en minder willekeur geven een kiezel. Meer punten en meer willekeur geven een spetter of een wolk.
Blobanimatie zonder JavaScript
De CSS-property d, waarmee u een SVG-pad in een stylesheet zou kunnen morphen, is volgens MDN geen Baseline en werkt dus niet in sommige grote browsers. Daarom gebruikt de geanimeerde optie border-radius. Elke hoekradius is een lengte of percentage, dus de browser kan zelf tussen keyframes overvloeien.
Een langzame rotatie naast de radiuswijziging maakt de beweging organischer. Houd het rustig, zodat het op de achtergrond blijft.
Voorbeeld van een CSS-blobanimatie
Morphende blob achter een fotolijst
Drie border-radius-vormen in één afwisselende animatie, plus een langzame draai. De reduced motion-query stopt hem voor mensen die om minder beweging vragen.
Een border-radius met acht waarden lezen
Waarden vóór de schuine streep zijn horizontale radii, erna verticale radii, telkens in de volgorde linksboven, rechtsboven, rechtsonder, linksonder.
border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%
Hoek
Horizontale radius
Verticale radius
Linksboven
Rechtsboven
Rechtsonder
Linksonder
Blobmaker
Elke vorm komt uit de seed die onder de preview staat. Verschuif de schuifregelaars of rol een nieuwe seed, en kopieer daarna de SVG of CSS.