g-harel/blobs

random blob generation and animation

Legacy documentation

Install

$ npm install blobs

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", // 🚨 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

MIT

blobs's Issues

Apply an image as fill

Hi I've been tinkering to try to get the fill to apply an image but it's not working

This is my current approach from scavenging stack overflow. A lot of the answers are pretty old but I'm not sure why they wouldn't work.

const blobSvgString = blobs2.svg(
  {
    seed: plant.botanicalName,
    extraPoints: 5,
    randomness: 2,
    size: 1000
  },
  {
    fill: 'url(#blob-image)'
  }
);
const blobContainer = document.getElementById('blob');
blobContainer.innerHTML = blobSvgString;
const defsMarkup = `
  <defs>
    <pattern id="blob-image" patternUnits="userSpaceOnUse" width="1000" height="1000">
      <image href="url(/images/iridescent-gradient.png)" x="0" y="0" width="1000" height="1000" />
    </pattern>
  </defs>
`;
const range = document.createRange();
const fragment = range.createContextualFragment(defsMarkup);
const svgEl = document.querySelector('#blob svg');
svgEl.insertBefore(fragment, svgEl.firstChild);

Wondering if you can provide any insight or if I'm not using it right. Thanks :) !!

Export animation type

Make path accessible in editable SVG output

TS2306: File 'blobs/v2/animate/index.js' is not a module.

When I import the animate blobs like this (or any other way) in typescript
import { canvasPath } from "blobs/v2/animate";
I keep getting the error TS2306: File 'blobs/v2/animate/index.js' is not a module. It works just fine. But it throws the error.
Any ideas?

Could you provide an example?

Hi, thank you for this library. I want to build a similiar blob effect like on the discord login page
When you go to the page, you will see the blob effect in the top left corner. After you entered your crendentials, the blob fills the whole window.

How can i build this blob with movement using your library?

I am still a beginner of blobs so could you provide an example so i can better understand of how can i use it?

Allow custom timestamp provider