Skip to content
Randomly generate two dimensional rounded polygonal shapes in HTML SVG
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
code.js
index.html
main.css

README.md

Blob Generator

Generates randomly shaped smooth blobs in javascript. These blobs are represented as SVG paths utilizing cubic bezier curves to create to outline of the shape. Parameters are editable from the generator allowing for greater customizability and a wider range of generation. Path points and handle coordinates are generated from a polar graph (https://www.desmos.com/calculator/qaesyuxix3) with path coordinates being taken from g(x) and handle coordinates being taken from h(x).

These blobs can be used in many ways within webpages to create infinite unique shapes that are rounded and smooth. One example of an application can be seen in this demo (http://joshbra.gg/Space-Site-Demo/) where the blobs are asteroids in the background of a fictional design company website.

Example blobs:

blob 1 blob 2

With a very high point count you can see the underlying generating functions from (https://www.desmos.com/calculator/qaesyuxix3)

high point count 1 high point count 2


Further Reading:

https://www.desmos.com/calculator/qaesyuxix3

http://graphics.pixar.com/people/derose/publications/CubicClassification/paper.pdf

https://pomax.github.io/bezierinfo/#canonical

https://stackoverflow.com/questions/3587704/good-way-to-procedurally-generate-a-blob-graphic-in-2d

https://gamedev.stackexchange.com/questions/34374/how-to-render-metaballs

https://www.gamedev.net/articles/programming/graphics/exploring-metaballs-and-isosurfaces-in-2d-r2556/

https://gis.stackexchange.com/questions/24827/smoothing-polygons-in-contour-map

https://stackoverflow.com/questions/47068504/where-to-find-python-implementation-of-chaikins-corner-cutting-algorithm

https://sighack.com/post/chaikin-curves

https://stackoverflow.com/questions/28770110/how-to-prevent-loops-in-cubic-bezier-curves

You can’t perform that action at this time.