• Generate blob in any size

• Control the randomness and complexity

• Animate the blob

• Set ID for a fixed blob

• Shuffle between the fixed blobs

• Loop animation

• Blob clipper

• Get SVG path

• Debug, Child widget, controller and few more

Blobs App
 
https://lokesh-coder.github.io/blobs.app
 

• Widgets

• Clipper

• Service

• Inspirations

There are four widgets,

• Blob.random() - Generate random blobs

• Blob.animatedRandom() - Generate blobs and animate the shape change

• Blob.fromID() - Use one or more ID's for fixed blobs

• Blob.animatedFromID() - Animate the shape change

   

Size of the blob (mandatory).

Blob.random(size:200), 

edgesCount is the nodes count. More the value, more the complexity. Minimum is 3 and max is 300. But for cool shapes you can stick between 3-20. Default is 7

minGrowth is the minimum size of the blob. Smaller the value, more the randomness. Value should be an interger between 2-9. Default is 4.

Blob.random( size:200, edgesCount:5, minGrowth:4, ), 

You can use BlobController, if you want to change the shape programatically. As o now it has only one method called change(). When you call this, the shape will be changed and returns some useful info of the blob (BlobData).

BlobController blobCtrl = BlobController(); 

Blob.random( size:200, edgesCount:5, minGrowth:4, controller: blobCtrl, ), 

BlobData blobData = blobCtrl.change(); 

In most scenarios you wanted a same blob to be rendered every time. This can be achieved using ID. It is just a plain string contains the shape data.

You can get the ID from the blobData from the controller's change() method. Or you can also generate blobs and get ID from https://blobs.app/

ID looks like 5-6-43178

id option accepts one or multiple id's. If it has only one id, then it will be a fixed blob.

Blob.fromID( size:200, id:['X-Y-ZZZZ'], controller: blobCtrl, ), 

If you provide multiple id's, then it will show each one in order on changing.

Blob.fromID( size:200, id:['X-Y-ZZZZ','X-Y-ZZZZ','X-Y-ZZZZ'], controller: blobCtrl ), 

You can change the color, add gradient, make outlined using BlobStyles()

Blob.random( size:200, styles: BlobStyles( color: Colors.green, fillType: BlobFillType.stroke, gradient: LinearGradient(), strokeWidth:3, ), ), 

Gradient can be Linear or Radial. LinearGradient will look like this,

LinearGradient(colors: [Colors.red, Colors.green]) .createShader(Rect.fromLTRB(0, 0, 300, 300)) 

You can use child property to display a child which looks like the blob as background.

Blob.random( size:200, child: Text('I am a child!'), ), 

Whenever the blobs are changing, this widget will animate the shape change.

Blob.animatedRandom( size:200, edgesCount:5, minGrowth:4, duration: Duration(milliseconds:500), ), 

duration is optional. Default is 500 milliseconds.

When you want to change the shapes automatically you can set loop property to true.

Blob.animatedRandom( size:200, edgesCount:5, minGrowth:4, loop: true, ), 

If you use loop in Blob.fromAnimatedID() widget, it will change shapes within the provided blobs.

Blob.animatedFromID( size:200, id:['X-Y-ZZZZ','X-Y-ZZZZ','X-Y-ZZZZ'], loop: true, ), 

When you set debug to true, it will show you circles and lines that connect the blob points.

Blob.random( size:200, debug: true, ), 

Sometime you might want to clip the widget by blob shape. In such cases you can use BlobClipper(). You can either provide id or edgesCount and minGrowth options.

Container( child: ClipPath( clipper: BlobClipper(<OPTIONS>), child: Image.network("https://bit.ly/2nirIxg"), ), ) 

Blobs shape are created by BlobGenerator(). Both widgets and clipper uses this internally to create the shape and then it is painted to canvas. This will return BlobData.

BlobData blobData = BlobGenerator( edgesCount: 7, minGrowth: 4, size: Size(30, 30), id: null, ).generate(); 

It is the raw data, which contains the path definitions, coordinates and other basic info about the blob.

BlobData( dots, innerRad, svgPath, coords, id, edgesCount, minGrowth, size, originalSize, ) 

BlobData contains svgPath info. It is just a path string which will look like this,

M326.0,251.5Q282.0,303.0,226.5,315.0Q171.0,327.0,118.5,296.0Q66.0,265.0,90.0,211.5Q114.0,158.0,145.0,126.0Q176.0,94.0,228.5,96.0Q281.0,98.0,325.5,149.0Q370.0,200.0,326.0,251.5Z

from this you can easily create SVG like

<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> <path fill="#474787" d="M326.0,251.5Q282.0,303.0,226.5,315.0Q171.0,327.0,118.5,296.0Q66.0,265.0,90.0,211.5Q114.0,158.0,145.0,126.0Q176.0,94.0,228.5,96.0Q281.0,98.0,325.5,149.0Q370.0,200.0,326.0,251.5Z" /> </svg> 

We can create cool visual elements with blobs. Here's a few things that came to my mind.

This project is licensed under MIT.

Any kind of contributions are welcome :)

For any issues and suggestions please create a issue card in Github repository