1

I want to generate "pseudo-random" organic looking blobs in SVG (without JavaScript). I was wondering if this could be done solely in SVG, using filters (like feTurbulence and feDisplacementMap), but still have a smooth finish. The "seed" could then determine the shape of the blob. I could both determine the shape, keep it "determistic" (the seed would be fixed) and get different blobs.

I was able to get circles to not be so "round" with the said filters, but it is anything but smooth or blob-looking.

<svg width="800" height="800" viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="displacementFilter">
      <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" seed="2"/>
      <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="5" xChannelSelector="R" yChannelSelector="G"/>
    </filter>
  </defs>
  <circle cx="100" cy="100" r="100" style="filter: url(#displacementFilter)"/>
</svg>
9
  • Can you please include an example of the before and after of what you're hoping to create using SVG filters? "blob" is pretty non-descript as the size and general shape of the blobs has great effect. Dec 31, 2020 at 16:55
  • Perhaps the third demo in this post is along the lines of what you want? Dec 31, 2020 at 16:56
  • Hi. Welcome to GDSE. What kind of blob are you actually trying to achieve? I mean how blobby do you want it to be. Your example is more like a roughened circle TBH.
    – Billy Kerr
    Dec 31, 2020 at 17:25
  • Also, I can think of better ways to generate random blobs than using filters. What software do you have access to? In Inkscape for example, it's pretty easy to draw randomized dodecahedrons with rounded corners.
    – Billy Kerr
    Dec 31, 2020 at 18:22
  • What I mean by blob is along the lines of blobmaker.app Dec 31, 2020 at 21:56

1 Answer 1

1

I wouldn't use filters to do this.

Try Inkscape's Stars and Polygons tool. As a starting point, set the tool controls to Regular Polygons, corners 3, randomized 0.370, and rounded corners 0.150. Feel free to adjust these settings as required.

Example

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.