Install

$ npm install blobs

import * as blobs2 from "blobs/v2";

import * as blobs2Animate from "blobs/v2/animate";

<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", // 🚨 NOT SANITIZED
 stroke: "black", // 🚨 NOT SANITIZED
 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();
// Set up rendering loop.
const renderAnimation = () => {
 ctx.clearRect(0, 0, width, height);
 ctx.fill(animation.renderFrame());
 requestAnimationFrame(renderAnimation);
};
requestAnimationFrame(renderAnimation);
// Transition to new blob on canvas click.
ctx.canvas.onclick = () => {
 animation.transition({
 duration: 4000,
 timingFunction: "ease",
 callback: loopAnimation,
 blobOptions: {...},
 });
};

Canvas Wiggle

const ctx = /* ... */;
const animation = blobs2Animate.canvasPath();
// Set up rendering loop.
const renderAnimation = () => {
 ctx.clearRect(0, 0, width, height);
 ctx.fill(animation.renderFrame());
 requestAnimationFrame(renderAnimation);
};
requestAnimationFrame(renderAnimation);
// Begin wiggle animation.
blobs2Animate.wigglePreset(
 animation
 /* blobOptions= */ {...},
 /* canvasOptions= */ {},
 /* wiggleOptions= */ {speed: 2},
)

Complete API

"blobs/v2"

export interface BlobOptions {
 // A given seed will always produce the same blob.
 // Use `Math.random()` for pseudorandom behavior.
 seed: string | number;
 // Actual number of points will be `3 + extraPoints`.
 extraPoints: number;
 // Increases the amount of variation in point position.
 randomness: number;
 // Size of the bounding box.
 size: number;
}
export interface CanvasOptions {
 // Coordinates of top-left corner of the blob.
 offsetX?: number;
 offsetY?: number;
}
export const canvasPath: (blobOptions: BlobOptions, canvasOptions?: CanvasOptions) => Path2D;
export interface SvgOptions {
 fill?: string; // Default: "#ec576b".
 stroke?: string; // Default: "none".
 strokeWidth?: number; // Default: 0.
}
export const svg: (blobOptions: BlobOptions, svgOptions?: SvgOptions) => string;
export const svgPath: (blobOptions: BlobOptions) => string;

"blobs/v2/animate"

interface Keyframe {
 // Duration of the keyframe animation in milliseconds.
 duration: number;
 // Delay before animation begins in milliseconds.
 // Default: 0.
 delay?: number;
 // Controls the speed of the animation over time.
 // Default: "linear".
 timingFunction?:
 | "linear"
 | "easeEnd"
 | "easeStart"
 | "ease"
 | "elasticEnd0"
 | "elasticEnd1"
 | "elasticEnd2"
 | "elasticEnd3";
 // Called after keyframe end-state is reached or passed.
 // Called exactly once when the keyframe end-state is rendered.
 // Not called if the keyframe is preempted by a new transition.
 callback?: () => void;
 // Standard options, refer to "blobs/v2" documentation.
 canvasOptions?: {
 offsetX?: number;
 offsetY?: number;
 };
}
export interface CanvasKeyframe extends Keyframe {
 // Standard options, refer to "blobs/v2" documentation.
 blobOptions: {
 seed: number | string;
 randomness: number;
 extraPoints: number;
 size: number;
 };
}
export interface CanvasCustomKeyframe extends Keyframe {
 // List of point coordinates that produce a single, closed shape.
 points: Point[];
}
export interface Animation {
 // Renders the current state of the animation.
 renderFrame: () => Path2D;
 // Renders the current state of the animation as points.
 renderPoints: () => Point[];
 // Immediately begin animating through the given keyframes.
 // Non-rendered keyframes from previous transitions are cancelled.
 transition: (...keyframes: (CanvasKeyframe | CanvasCustomKeyframe)[]) => void;
 // Resume a paused animation. Has no effect if already playing.
 play: () => void;
 // Pause a playing animation. Has no effect if already paused.
 pause: () => void;
 // Toggle between playing and pausing the animation.
 playPause: () => void;
}
// Function that returns the current timestamp. This value will be used for all
// duration/delay values and will be used to interpolate between keyframes. It
// must produce values increasing in size.
// Default: `Date.now`.
export interface TimestampProvider {
 (): number;
}
export const canvasPath: (timestampProvider?: TimestampProvider) => Animation;
export interface WiggleOptions {
 // Speed of the wiggle movement. Higher is faster.
 speed: number;
 // Length of the transition from the current state to the wiggle blob.
 // Default: 0
 initialTransition?: number;
}
// Preset animation that produces natural-looking random movement.
// The wiggle animation will continue indefinitely until the next transition.
export const wigglePreset = (
 animation: Animation,
 blobOptions: BlobOptions,
 canvasOptions: CanvasOptions,
 wiggleOptions: WiggleOptions,
)

License