Legacy documentation
Install
import * as blobs2 from "blobs/v2";
import * as blobs2Animate from "blobs/v2/animate";
OR
<script src="https://unpkg.com/blobs/v2"></script>
<script src="https://unpkg.com/blobs/v2/animate"></script>
SVG Path
const svgPath = blobs2.svgPath({
seed: Math.random(),
extraPoints: 8,
randomness: 4,
size: 256,
});
doSomething(svgPath);
SVG
const svgString = blobs2.svg(
{
seed: Math.random(),
extraPoints: 8,
randomness: 4,
size: 256,
},
{
fill: "white",
stroke: "black",
strokeWidth: 4,
},
);
container.innerHTML = svgString;
Canvas
const path = blobs2.canvasPath(
{
seed: Math.random(),
extraPoints: 16,
randomness: 2,
size: 128,
},
{
offsetX: 16,
offsetY: 32,
},
);
ctx.stroke(path);
Canvas Animation
const ctx = ;
const animation = blobs2Animate.canvasPath();
const renderAnimation = () => {
ctx.clearRect(0, 0, width, height);
ctx.fill(animation.renderFrame());
requestAnimationFrame(renderAnimation);
};
requestAnimationFrame(renderAnimation);
const loopAnimation = () => {
animation.transition({
duration: 4000,
timingFunction: "ease",
callback: loopAnimation,
blobOptions: {...},
});
};
animation.transition({
duration: 0,
callback: loopAnimation,
blobOptions: {...},
});
Complete API
"blobs/v2"
export interface BlobOptions {
seed: string | number;
extraPoints: number;
randomness: number;
size: number;
}
export interface CanvasOptions {
offsetX?: number;
offsetY?: number;
}
export interface SvgOptions {
fill?: string;
stroke?: string;
strokeWidth?: number;
}
export const canvasPath: (blobOptions: BlobOptions, canvasOptions?: CanvasOptions) => Path2D;
export const svg: (blobOptions: BlobOptions, svgOptions?: SvgOptions) => string;
export const svgPath: (blobOptions: BlobOptions) => string;
"blobs/v2/animate"
export interface CanvasKeyframe {
duration: number;
delay?: number;
timingFunction?:
| "linear"
| "easeEnd"
| "easeStart"
| "ease"
| "elasticEnd0"
| "elasticEnd1"
| "elasticEnd2"
| "elasticEnd3";
callback?: () => void;
blobOptions: {
seed: number | string;
randomness: number;
extraPoints: number;
size: number;
};
canvasOptions?: {
offsetX?: number;
offsetY?: number;
};
}
export const canvasPath: () => {
renderFrame: () => Path2D;
transition: (...keyframes: CanvasKeyframe[]) => void;
};
License
MIT