Module: pb67cst
Constant definitions for color palettes, themes, and configuration metadata used across pb67 generative art projects.
Modules
Class: pb67
A utility class combining p5.js and svg.js to generate procedural graphics. Each instance handles its own canvas dimensions and SVG container.
Constructor Parameters
_w: number — Width of the drawing area._h: number — Height of the drawing area._l: number — Base length unit for scaling._t: number — Thickness or size factor for details._HR: SVG.Container — The svg.js container for drawing._p: p5 — The p5.js instance providing randomness and math utilities.
Example
const p = new p5();
const canvas = SVG().addTo('#preview').size(800, 600);
const art = new pb67(800, 600, 100, 50, canvas, p);
art.drawBack(200, '#fff', '#000');
art.sign('#222');Core 2
getpbid()
Returns a unique progressive identifier for the current pb67 instance.
Returns
number— The incremented identifier value.
Example
const id1 = art.getpbid();
const id2 = art.getpbid();
art.HR.text(id1).move(100, 100);
art.HR.text(id2).move(100, 200);drawBack()
Draws a decorative background using optional fill and stroke colors. If a fill color is provided, it paints the entire canvas. If a stroke color is provided, it randomly scatters geometric elements (circles, crosses, and X shapes) across the canvas for a textured effect.
Parameters
_maxiter: number — Number of iterations or elements to draw._colf: string — Optional fill color for the full background._cols: string — Optional stroke or fill color for random elements.
Example
art.drawBack(300, "#002244", "#ffffff");Geometry 5
isOnCanvas()
Checks whether a given point lies within the visible canvas area, excluding an optional padding from the borders.
Parameters
_x: number — X coordinate of the point._y: number — Y coordinate of the point._pad: number — Padding distance to keep from the edges.
Returns
boolean— True if the point is inside the drawable area, false otherwise.
Example
const padrect = art.HR.rect(art.w, art.h).move(0,0).fill('#aaaaaa');
const inrect = art.HR.rect(art.w - 40, art.h - 40).move(20,20).fill('#ffffff');
const acir = art.HR.circle(5).move(100, 100);
if( art.isOnCanvas(acir.cx(), acir.cy(), 20) ) {
acir.fill('#33ff33');
} else {
acir.fill('#ff3333');
}
const acir1 = art.HR.circle(5).move(10, 100);
if( art.isOnCanvas(acir1.cx(), acir1.cy(), 20) ) {
acir1.fill('#33ff33');
} else {
acir1.fill('#ff3333');
}rectsOverlap()
Checks if two rectangles overlap.
Parameters
_recta: Object — First rectangle with {x, y, w, h}._rectb: Object — Second rectangle with {x, y, w, h}.
Returns
boolean— True if overlapping, false otherwise.
Example
const rects1 = [
{ x: 150, y: 50, w: 150, h: 100, cnt: 1 },
{ x: 20, y: 200, w: 200, h: 120, cnt: 2 }
];
const rects2 = [
{ x: 350, y: 100, w: 150, h: 100, cnt: 3 },
{ x: 450, y: 50, w: 100, h: 120, cnt: 4 }
];
const col1 = art.rectsOverlap(rects1[0], rects1[1]) ? '#ff3333': '#33ff33' ;
const col2 = art.rectsOverlap(rects2[0], rects2[1]) ? '#ff3333': '#33ff33' ;
art.showRects(rects1, col1);
art.showRects(rects2, col2);rectVDistFn()
Calculates the minimum vertical distance between a rectangle and a polynomial curve. The curve is defined by an array of coefficients representing the function: `y = c[0] + c[1]x + c[2]x² + ... + c[n]xⁿ`. Returns `0` if the rectangle overlaps or crosses the curve. Returns a positive value if the rectangle lies above the curve, and a negative value if it lies below.
Parameters
_rect: Object — Rectangle object with properties `{ x: number, y: number, w: number, h: number }`._c: Array.— Array of polynomial coefficients, where index `n` corresponds to the coefficient of `xⁿ`.
Returns
number— The minimum vertical distance between the rectangle and the curve: - `0` if overlapping, - positive if the rectangle is above the curve, - negative if below.
Example
const rects = [
{ x: 300, y: 50, w: 80, h: 60 },
{ x: 250, y: 150, w: 80, h: 60 }
];
const coeffs = [0, 0.5, 0.001]; // y = 0.001x² + 0.5x
for(let x = 0; x < w; x += 10) {
art.HR.circle(5).move(x, art.getFnVal(x, coeffs));
}
rects.forEach(rect => {
rect.cnt = art.rectVDistFn(rect, coeffs);
});
art.showRects(rects, '#333333');getFnVal()
Computes the value of a polynomial function at a given x-coordinate. The coefficients are provided in the array `_c`, where each element corresponds to the coefficient of x raised to the power of its index.
Parameters
_x: number — The x value at which to evaluate the function._c: Array.— The array of polynomial coefficients.
Returns
number— The computed y value of the polynomial.
Example
const coeffs = [0, 0.5, 0.001]; // y = 0.001x² + 0.5x
for(let x = 0; x < w; x += 10) {
art.HR.circle(5).move(x, art.getFnVal(x, coeffs));
}rectDistCircle()
Calculates the minimum signed distance between a rectangle's vertices and a circle's circumference. Returns a positive value if the rectangle is entirely inside the circle, a negative value if it is entirely outside, or zero if it intersects the circle.
Parameters
_rect: Object — The rectangle defined by its top-left corner and size._xc: number — The x-coordinate of the circle's center._yc: number — The y-coordinate of the circle's center._r: number — The radius of the circle.
Returns
number— The signed distance: positive if inside, negative if outside, or zero if intersecting.
Example
const rects = [
{ x: 350, y: 50, w: 80, h: 60 },
{ x: 50, y: 150, w: 80, h: 60 }
];
art.HR.circle(art.w/2, art.h/2, 50).stroke('#333333')
rects.forEach(rect => {
rect.cnt = art.rectDistCircle(rect, art.w/2, art.h/2, 50);
});
art.showRects(rects, '#3333aa');Filters 4
createMetalFilterHV()
Creates an SVG filter that simulates a metallic texture by combining horizontal and vertical turbulence patterns and applying color blending. Returns a filter URL reference that can be used as a fill or stroke attribute.
Parameters
_col: string — The base color used for the metallic flood layer.
Returns
string— The filter reference string (e.g. `url(#pbMetalFilterHV123)`).
Example
const metalFilter = art.createMetalFilterHV('#000000');
art.HR.rect(w - 40, h - 40)
.cx(art.w / 2).cy(art.h / 2)
.fill('#bbbbbb')
.attr({ filter: metalFilter })
.opacity(0.2);createShadowFilter()
Creates a drop shadow SVG filter.
Parameters
_dx: number — Horizontal offset._dy: number — Vertical offset._col: string — Shadow color.
Returns
string— Filter URL reference.
Example
const shadowFilter = art.createShadowFilter(10, 10, '#000000');
art.HR.rect(w - 40, h - 40)
.cx(art.w / 2).cy(art.h / 2)
.fill('#bbbbbb')
.attr({ filter: shadowFilter });createNoiseFilter()
Creates an SVG filter that adds a noise effect using turbulence, convolution, and blending operations to distort and desaturate the source graphic. The resulting filter can be applied to SVG elements to create a textured, noisy surface appearance.
Returns
string— The filter reference string (e.g. `url(#pbNoiseFilter7)`).
Example
const noiseFilter = art.createNoiseFilter('#000000');
art.HR.rect(w - 40, h - 40)
.cx(art.w / 2).cy(art.h / 2)
.fill('#ffffff')
.attr({ filter: noiseFilter });createBlurFilter()
Creates an SVG Gaussian blur filter with a specified standard deviation. The filter expands the bounding box to avoid edge clipping and returns a reference that can be applied to SVG elements to produce a blur effect.
Parameters
_stddev: string | number — The standard deviation values for the blur, defined as `"x y"` or a single numeric value.
Returns
string— The filter reference string (e.g. `url(#pbBlurFilter12)`).
Example
const blurFilter = art.createBlurFilter(10, 10, '#000000');
art.HR.rect(w - 40, h - 40)
.cx(art.w / 2).cy(art.h / 2)
.fill('#bbbbbb')
.attr({ filter: blurFilter });Curves 6
drawStrokeSubdivLine()
Generates a subdivided polyline between two points using subdivLines and renders the resulting sequence as a stroked curve.
Parameters
_subs: number — Number of subdivision passes to apply._x1: number — Starting x coordinate._y1: number — Starting y coordinate._x2: number — Ending x coordinate._y2: number — Ending y coordinate._fix: number — Radius controlling the random displacement applied during subdivision._st: number — Stroke thickness for the rendered curve._colf: string — Fill color._cols: string — Stroke color.
Returns
SVG.Path— SVG path element representing the drawn curve.
Example
art.drawStrokeSubdivLine(4, 100, 200, 380, 260, 6, 3, '#222', '#555')getControlPoint()
Computes a control point for a smooth Bezier curve between two vertices. Used to create soft transitions between connected curve segments.
Parameters
_cur: Object — Current point with {x, y} coordinates._prv: Object — Previous point with {x, y} coordinates. If undefined, defaults to current point._nxt: Object — Next point with {x, y} coordinates. If undefined, defaults to current point._rev: boolean — If true, reverses the control point direction (used for outgoing vs incoming handles)._smt: number — Smoothness factor (typically 0.2) that scales the control point distance.
Returns
Object— The computed control point as an object {x, y}.
Example
let points = [
{x: 100, y: 100},
{x: 300, y: 150},
{x: 400, y: 300}
];
points.forEach(point => {
art.HR.circle(5).cx(point.x).cy(point.y).fill('#333333');
});
art.drawCurve(points, 0.2, 'none', '#111111', 1);
const cp1 = art.getControlPoint(points[1], points[0], points[2], false, 0.2);
const cp2 = art.getControlPoint(points[1], points[0], points[2], true, 0.2);
art.HR.line(points[1].x, points[1].y, cp1.x, cp1.y).stroke({ width: 1, color: '#999999' });
art.HR.line(points[1].x, points[1].y, cp2.x, cp2.y).stroke({ width: 1, color: '#999999' });
art.HR.circle(5).cx(cp1.x).cy(cp1.y).fill('#ff3333');
art.HR.circle(5).cx(cp2.x).cy(cp2.y).fill('#ff3333');drawCurve()
Draws a smooth Bézier curve passing through a given set of vertices. Creates a continuous path connecting a series of points using cubic Bézier segments. Control points are dynamically calculated with `getControlPoint()` to maintain flow continuity. The resulting curve can be used for organic contours, motion traces, or decorative connectors.
Parameters
_ppa: Array.<{x:number, y:number}> — Array of vertex objects defining the curve path. Each vertex must include `x` and `y` properties._smt: number — Smoothness factor (typically between 0 and 1). Higher values make the curve tighter around vertices._colf: string | Array.— Fill color or gradient for the curve’s interior. _cols: string — Stroke color for the curve outline._op: number — Opacity level of the rendered shape (1 is fully opaque).
Returns
SVG.Path— SVG path element representing the constructed curve.
Example
const points = [{x: 50, y: 100}, {x: 120, y: 150}, {x: 200, y: 80}]
points.forEach(point => {
art.HR.circle(5).cx(point.x).cy(point.y).fill('#333333');
});
art.drawCurve(points, 0.3, "none", "#0984e3", 0.9);drawArc()
Draws a smooth arc segment using a series of interpolated points connected by Bezier curves. The arc is approximated by dividing the angular range into multiple small curve segments.
Parameters
_xc: number — X-coordinate of the arc center._yc: number — Y-coordinate of the arc center._r: number — Radius of the arc._sa: number — Start angle in degrees._ea: number — End angle in degrees._colf: string — Fill color._cols: string — Stroke color.
Returns
object— The SVG path element representing the drawn arc.
Example
art.drawArc(art.w / 2, art.h/2, 100, 0, 120, '#ffcc00', '#333333');drawStrokeCurve()
Draws a filled and stroked organic curve with a variable-width stroke effect. The function creates a smooth Bezier curve through a list of vertices, then generates a mirrored and randomly displaced path to simulate stroke thickness.
Parameters
_ppa: Array.<{x:number, y:number}> — Array of vertex points defining the main curve._smt: number — Curve smoothness factor, typically around 0.2._st: number — Maximum random offset applied to simulate stroke thickness._colf: string — Fill color._cols: string — Stroke color.
Returns
object— The SVG path element representing the stroked curve.
Example
const pts = [{x:50,y:100},{x:120,y:80},{x:200,y:150},{x:300,y:90}];
art.drawStrokeCurve(pts, 0.2, 5, '#ff9999', '#333333');drawStrokeArc()
Draws a smooth, curved stroke following a circular arc segment. The arc is defined by its center, radius, and angular range, and is rendered as a stylized stroke using drawStrokeCurve. The method interpolates several points along the specified angular interval, forming a polyline that approximates the circular path. These points are then passed to drawStrokeCurve to generate a continuous, noise-smoothened stroke. The function adapts the number of interpolation steps based on the angular range, ensuring smoothness and visual consistency for both small and large arcs.
Parameters
_xc: number — X-coordinate of the arc’s center._yc: number — Y-coordinate of the arc’s center._r: number — Radius of the arc._st: number — Stroke thickness applied to the arc._sa: number — Starting angle in degrees._ea: number — Ending angle in degrees._colf: string — Fill color used for the stroke curve._cols: string — Stroke color applied to the curve outline.
Returns
Object— SVG path element representing the arc stroke.
Example
art.drawStrokeArc(300, 300, 200, 2, 0, 180, '#666', '#000');Shapes 17
drawNStar()
Parameters
xc: number — X coordinate of the star center.yc: number — Y coordinate of the star center.maxitem: number — Number of spikes around the star.r1: number — Base (inner) radius.rthik: number — Thickness factor (0–1) controlling spike base width.rout: number — Multiplier for the outer radius relative to `r1`.col1: string — First fill color candidate for spike fills.col2: string — Second fill color candidate for spike fills.cols: string — Stroke color for spike outlines.
Returns
SVG.G— Group containing the assembled star.
Example
const r = 3 * art.l;
const star = art.drawNStar(art.w / 2, art.h / 2, 12, r, 0.5, 1.6, '#ffeb3b', '#ff9800', '#f57f17');
star.opacity(0.95);showRects()
Draws a set of rectangles on the SVG canvas, outlining each one and labeling it with its counter value.
Parameters
_rects: Array.<{x: number, y: number, w: number, h: number, cnt: number}> — Array of rectangle objects. Each object should have `x`, `y`, `w`, `h`, and `cnt` properties. Each object should have the structure `{ x: number, y: number, w: number, h: number, cnt: number }`._col: string — Color used for the rectangle outlines and text labels.
Returns
void
Example
const rects = [
{ x: 50, y: 50, w: 150, h: 100, cnt: 1 },
{ x: 250, y: 200, w: 200, h: 120, cnt: 2 }
];
art.showRects(rects, '#0066cc');drawBlob()
Draws an irregular organic blob using a cubic Bézier path.
Parameters
_cx: number — Center x coordinate._cy: number — Center y coordinate._r: number — Base radius._col: string — Fill and stroke color._op: number — Opacity (0–1).
Returns
void
Example
art.drawBlob(art.w / 2, art.h / 2, 150, '#ff6600', 0.8);drawGenBlob()
Draws a generative organic blob composed of Bézier curves. The blob’s shape is determined by a variable number of control points and random distortions. A secondary perturbed outline adds subtle irregularities to enhance the organic feel.
Parameters
_cx: number — Center x coordinate._cy: number — Center y coordinate._r: number — Base radius of the blob._np: number — Number of control points around the circumference._colf: string — Fill color._cols: string — Stroke color._op: number — Opacity (0–1).
Returns
void
Example
art.drawGenBlob(art.w / 2, art.h / 2, 100, 5, '#99ccff', '#003366', 0.9);drawDripBlob()
Draws an irregular, organic blob shape resembling a dripping spot. The function computes a closed curve around a center point, generating variable radii and angular perturbations to create a fluid, asymmetrical look. The method randomly perturbs the angular step and radius at each segment to simulate dripping or melting forms. It constructs an array of control points distributed around the center, then passes them to `drawCurve()` for rendering. The result is a smooth, continuous curve suggesting motion or liquidity, useful for organic or abstract compositions.
Parameters
_cx: number — X-coordinate of the blob’s center._cy: number — Y-coordinate of the blob’s center._r: number — Base radius of the blob, determining its approximate size._sp: number | string — Number of spikes or lobes in the shape. If not provided, a random value from [7, 8, 11] is used._colf: string — Fill color used for the blob’s interior._cols: string — Stroke color used for the blob’s outline._op: number — Opacity of the shape, where 1 is fully opaque.
Example
art.drawDripBlob(art.w / 2, art.h / 2, 50, 7, '#f2c94c', '#e5a83a', 0.8);drawDripBlob1()
Draws an irregular organic blob using noise and sinusoidal variation to create a dripping, spiked perimeter. Combines a smooth fill curve with a noisy stroked outline for a fluid appearance.
Parameters
_cx: number — X-coordinate of the blob center._cy: number — Y-coordinate of the blob center._rmin: number — Minimum radius._rmax: number — Maximum radius._spikes: number — Number of perimeter oscillations or spikes._colf: string — Fill color. Use 'none' for no fill._cols: string — Stroke color. Use 'none' for no stroke.
Returns
object— A grouped SVG element containing the generated blob.
Example
art.drawDripBlob1(art.w / 2, art.h / 2, 100, 300, 7, '#f2c94c', '#e5a83a');drawDripCircle()
Draws a fragmented circular drip composed of multiple stroke arcs. Each arc segment is randomly spaced and slightly deformed in radius, giving the appearance of an organic, imperfect ring. The method divides the circle into a random sequence of arcs, each defined by angle intervals distributed across 360 degrees. The radius is slightly perturbed to avoid perfect symmetry. All arcs are grouped into a single SVG element, rotated randomly around the center to ensure variety across multiple invocations. This function is often used as a structural or focal element within larger generative compositions, providing a rhythmic circular motif that blends geometric precision with fluid irregularity.
Parameters
_x: number — X coordinate of the circle center._y: number — Y coordinate of the circle center._r: number — Base radius of the circle._sw: number — Stroke width for the arc segments._cols: string — Stroke color of the arcs._colf: string — Fill color used inside each stroke arc.
Returns
SVG.G— A grouped SVG element containing the set of arc segments.
Example
art.drawDripCircle(art.w / 2, art.h / 2, 100, art.t, '#333', '#999')drawStrokeRect()
Draws a rectangle outline with selectively stroked sides. Each side (North, East, South, West) can be individually included or omitted based on the `_type` string. The method constructs the shape by combining independent stroked line segments using `drawStrokeLine()`. Useful for creating fragmented or partial frames within a composition.
Parameters
_rect: Object — Rectangle boundaries defined by x, y, width and height._st: number — Thickness of each stroke segment._colf: string | Array.— Fill color or gradient applied to the stroke interiors. _cols: string — Stroke color for the line outlines._type: string — String specifying which rectangle sides to draw. Use any combination of `N`, `E`, `S`, `W`.
Returns
SVG.G— SVG group containing the assembled stroked sides.
Example
art.drawStrokeRect({x: 100, y: 100, w: 200, h: 150}, 4, "#f5f5f5", "#333333", "NW")drawStrokeLine()
Draws a stylized stroke between two points using a curved interpolation. The function constructs a short control path composed of the endpoints and their midpoint, then passes it to `drawStrokeCurve()` to create a smooth, visually continuous stroke. It can be used to connect elements or emphasize direction.
Parameters
_x1: number — Starting point X coordinate._y1: number — Starting point Y coordinate._x2: number — Ending point X coordinate._y2: number — Ending point Y coordinate._st: number — Stroke width of the generated path._colf: string | Array.— Fill color or gradient for the stroke interior. _cols: string — Stroke color for the outline.
Returns
SVG.Path— SVG path element representing the curved stroke.
Example
art.drawStrokeLine(100, 150, 400, 250, 6, "#ffffff", "#000000")drawStrokeP()
Draws a stylized loop with a trailing stroke, forming a “P”-like curved structure. The shape is generated from a sequence of points arranged along circular arcs and a connecting tail. It combines looping motion with directional flow, making it useful for decorative strokes, organic connectors, or calligraphic accents within a composition.
Parameters
_xe: number — X coordinate of the loop center._ye: number — Y coordinate of the loop center._r1: number — Radius of the main loop._r2: number — Radius of the tail extension._a: number — Angle orientation of the structure in degrees._sw: number — Stroke width of the drawn path._colf: string | Array.— Fill color or gradient applied to the stroke interior. _cols: string — Stroke color for the outline._op: number — Opacity of the resulting curve.
Returns
SVG.Path— SVG path element representing the looped stroke.
Example
art.drawStrokeP(100, 100, 50, 150, 45, 5, "#fefefe", "#222222", 0.9)drawDripCurve()
Draws an irregular drip-shaped curve inside the given rectangle. The curve is built by sampling random points within `_rect`, ordering them with a nearest‑neighbour heuristic (`getDripCurvePath`), and then feeding the resulting path to drawCurve and drawStrokeCurve. This produces a soft, blobby outline that loosely follows a shortest tour of the sampled points, yielding organic, paint‑like drips that can be used as fill strokes, shadows or texture bands.
Parameters
_rect: Object — Bounding rectangle where points are sampled._items: number — Number of points used to build the drip path._sw: number — Maximum stroke thickness used by {@link drawStrokeCurve}._colf: string — Fill color for the interior drip shape, or `'none'` to disable fill._cols: string — Stroke color for the outer contour, or `'none'` to disable stroke.
Returns
SVG.G— Group containing the filled and/or stroked drip path.
Example
// Add one large drip curve spanning most of the canvas:
const r = { x: art.l, y: art.l, w: art.w - 2 * art.l, h: art.h - 2 * art.l };
const drip = art.drawDripCurve(r, 18, art.t, '#222222', '#000000');
drip.opacity(0.8);colorBrushRect()
Fills a rectangle using layered drip‑like brush strokes. The region is repeatedly subdivided into smaller rectangles and each child is painted with drawDripCurve, producing a textured, hatched fill. The `_direction` flag controls whether subdivision and strokes are horizontal, vertical, or both: - `'H'`: only horizontal bands are generated; - `'V'`: only vertical bands are generated; - `'B'`: both directions are combined.
Parameters
_rect: Object — Base rectangle to fill._passes: number — Number of layering passes; higher values increase density._col: string — Stroke color used for the internal drip curves._direction: 'B' | 'H' | 'V' — Direction of the stroke bands: both, horizontal, or vertical.
Returns
SVG.G— Group containing all generated drip strokes.
Example
// Create a brushed frame inside the canvas:
const margin = art.l;
const r = { x: margin, y: margin, w: art.w - 2 * margin, h: art.h - 2 * margin };
const brushed = art.colorBrushRect(r, 4, '#111111', 'B');
brushed.opacity(0.6);drawSplatCurve()
Draws a splat‑like closed curve around a center point. The curve is generated by sampling points on a noisy ring between the radii `_rmin` and `_rmax` using getSplatCurvePath, then rendering the resulting path both as a filled region and as a thick stroke. This produces irregular, ink‑blot shapes that can be used as background accents, shadows, or focal marks in a composition.
Parameters
_xc: number — X coordinate of the splat center._yc: number — Y coordinate of the splat center._rmin: number — Minimum radius of the splat ring._rmax: number — Maximum radius of the splat ring._items: number — Number of sample points used around the circle._sw: number — Maximum stroke thickness passed to {@link drawStrokeCurve}._colf: string — Fill color for the interior of the splat, or `'none'` to skip fill._cols: string — Stroke color of the splat outline, or `'none'` to skip stroke.
Returns
SVG.G— Group containing the filled and/or stroked splat curve.
Example
// Drop a single splat at canvas center:
const splat = art.drawSplatCurve(art.w / 2, art.h / 2, art.l / 2, art.l, art.p.random(10, 18), art.t, '#333333', '#000000');
splat.opacity(0.85);drawPlanets()
Fills the canvas with non-overlapping circular blobs and cross-shaped highlights. Each blob acts as a “planet”, while the small crosses add visual texture and motion. The method distributes circular blobs randomly across the canvas, ensuring they do not overlap by checking distances between generated centers. Each blob’s radius and position are selected with progressive random attenuation to maintain spacing and variety. Around each blob, small cross-like strokes are drawn to simulate shadows or orbital artifacts, reinforcing the planetary theme. The function is suitable for compositions that require clustered circular structures with layered density or celestial aesthetics.
Parameters
_maxpass: number — Number of blobs (planets) to generate._maxiter: number — Number of decorative crosses to draw around each planet._colf: string | Array.— Fill color or array of fill colors for the blobs. _cols: string — Stroke color used for the crosses.
Returns
void
Example
art.drawPlanets(25, 200, ['#888', '#444'], '#111')drawCircleSpiral()
Draws a spiral made of geometric elements distributed along a curved path. The spiral can consist of circles, triangles, Y-shaped figures, stars, or squares. The method builds a geometric spiral pattern by incrementally increasing the radius and angle of each step. Elements are placed along the spiral path using Perlin noise to slightly distort their positions, producing a hand-drawn irregularity. The function supports multiple geometric primitives: circles for organic flow, triangles and squares for structural rhythm, Y-shaped and star-like figures for dynamic intersections. Randomized rotation and small deviations in size and stroke width enhance the sense of motion and complexity.
Parameters
_xc: number — X coordinate of the spiral center._yc: number — Y coordinate of the spiral center._kind: string — Shape type for spiral elements. One of: "circles", "triangles", "ys", "stars", or "squares". If not specified, a random type is selected._maxiter: number — Number of elements to draw along the spiral._colf: string | Array.— Fill color or array of fill colors. _cols: string — Stroke color for the spiral elements.
Returns
void
Example
art.drawCircleSpiral(art.w / 2, art.h / 2, "stars", 120, "#f5c542", "#222")drawSprinkles()
Draws a radial sprinkle burst from an origin point, distributing strokes across an angular range. Each stroke is drawn at a random angle within the defined arc, with its length modulated by a noise field evaluated at the projected tip position. The method randomly selects one of three rendering strategies per stroke: a continuously subdivided tapered line, a segmented line with random segment dropout, or a plain stroke line. The combination produces an organic, irregular spray useful for vegetation, texture fills, and gestural abstract compositions.
Parameters
_ox: number — X-coordinate of the burst origin._oy: number — Y-coordinate of the burst origin._aRanges: Array._len: number — Base length of each sprinkle stroke._segs: number — Number of strokes to draw._cols: string — Stroke color._colf: string — Fill color used for subdivided segments.
Returns
SVG.G— The SVG group containing all drawn strokes.
Example
const g = art.drawSprinkles(art.w / 2, 2 * art.h / 3, [[15, 165], [195, 345]], 15 * art.l, 80, '#1a1a2e', 'none');drawFlowerBlob()
Draws an irregular flower-like blob by constructing a closed contour from points distributed between an outer and inner radius. The outline is generated in three phases: an inward sweep along the outer edge, a circular traversal around the inner region, and an outward sweep back toward the outer edge. Small random angular and radial variations are applied to each point, producing an organic petal-like silhouette. The resulting contour can be rendered as a filled shape, a stroked outline, or both. The shape is useful for flowers, foliage, decorative motifs, and abstract organic structures.
Parameters
_xc: number — X-coordinate of the blob center._yc: number — Y-coordinate of the blob center._ro: number — Outer radius of the blob._ri: number — Inner radius used to define the central contour._st: number — Stroke width._as: number — Starting angle in degrees._cols: string — Stroke color. Use 'none' to disable the outline._colf: string — Fill color. Use 'none' to disable the fill.
Returns
SVG.G— The SVG group containing the generated flower blob.
Example
const flower = art.drawFlowerBlob(
art.w / 2,
art.h / 2,
6 * art.l,
2.5 * art.l,
art.t,
0,
'#1a1a2e',
'#f4d35e'
);Layout 8
subdivRect()
Recursively subdivides an array of rectangles into smaller rectangles over a number of passes. Each pass alternates between horizontal and vertical splits, with optional variability controlled by `_fix`. The function returns a new array of rectangles, each with updated position and size.
Parameters
_passes: number — Number of subdivision passes to apply._rects: Array.<{x:number, y:number, w:number, h:number}> — Array of rectangles to subdivide._fix: number — Factor controlling split variability (0 = even split, higher values = more randomness).
Returns
Array.<{x:number, y:number, w:number, h:number, cnt:number}>— Array of subdivided rectangles with counters.
Example
let initialRects = [{x: 0, y: 0, w: art.w, h: art.h}];
let subdivided = art.subdivRect(3, initialRects);
art.showRects(subdivided, "#dddd00");subdivRectH()
Recursively subdivides an array of rectangles into smaller rectangles using only horizontal splits. Each pass divides rectangles along their height with optional variability controlled by `_fix`. Returns a new array of subdivided rectangles with updated positions and heights.
Parameters
_passes: number — Number of horizontal subdivision passes to apply._rects: Array.<{x:number, y:number, w:number, h:number}> — Array of rectangles to subdivide._fix: number — Factor controlling split variability (0 = even split, higher values = more randomness).
Returns
Array.<{x:number, y:number, w:number, h:number, cnt:number}>— Array of horizontally subdivided rectangles with counters.
Example
let initialRects = [{x: 0, y: 0, w: art.w, h: art.h}];
let subdivided = art.subdivRectH(3, initialRects);
art.showRects(subdivided, "#ff3333");subdivRectV()
Recursively subdivides an array of rectangles into smaller rectangles using only vertical splits. Each pass divides rectangles along their width with optional variability controlled by `_fix`. Returns a new array of subdivided rectangles with updated positions and widths.
Parameters
_passes: number — Number of vertical subdivision passes to apply._rects: Array.<{x:number, y:number, w:number, h:number}> — Array of rectangles to subdivide._fix: number — Factor controlling split variability (0 = even split, higher values = more randomness).
Returns
Array.<{x:number, y:number, w:number, h:number, cnt:number}>— Array of vertically subdivided rectangles with counters.
Example
let initialRects = [{x: 0, y: 0, w: art.w, h: art.h}];
let subdivided = art.subdivRectV(3, initialRects);
art.showRects(subdivided, "#ff3333");subdivRect3()
Recursively subdivides an array of rectangles into smaller rectangles over a number of passes, splitting each rectangle into three parts instead of two. Each pass alternates between horizontal and vertical splits, with optional variability controlled by `_fix`. The function returns a new array of rectangles, each with updated position and size.
Parameters
_passes: number — Number of subdivision passes to apply._rects: Array.<{x:number, y:number, w:number, h:number}> — Array of rectangles to subdivide._fix: number — Factor controlling split variability (0 = even thirds, higher values = more randomness).
Returns
Array.<{x:number, y:number, w:number, h:number, cnt:number}>— Array of subdivided rectangles with counters.
Example
let initialRects = [{x: 0, y: 0, w: art.w, h: art.h}];
let subdivided = art.subdivRect3(2, initialRects);
art.showRects(subdivided, "#dddd00");subdivRectH3()
Recursively subdivides an array of rectangles into smaller rectangles using only horizontal splits, dividing each rectangle into three parts instead of two. Each pass divides rectangles along their height with optional variability controlled by `_fix`. Returns a new array of subdivided rectangles with updated positions and heights.
Parameters
_passes: number — Number of horizontal subdivision passes to apply._rects: Array.<{x:number, y:number, w:number, h:number}> — Array of rectangles to subdivide._fix: number — Factor controlling split variability (0 = even thirds, higher values = more randomness).
Returns
Array.<{x:number, y:number, w:number, h:number, cnt:number}>— Array of horizontally subdivided rectangles with counters.
Example
let initialRects = [{x: 0, y: 0, w: art.w, h: art.h}];
let subdivided = art.subdivRectH3(1, initialRects);
art.showRects(subdivided, "#ff3333");subdivRectV3()
Recursively subdivides an array of rectangles into smaller rectangles using only vertical splits, dividing each rectangle into three parts instead of two. Each pass divides rectangles along their width with optional variability controlled by `_fix`. Returns a new array of subdivided rectangles with updated positions and widths.
Parameters
_passes: number — Number of vertical subdivision passes to apply._rects: Array.<{x:number, y:number, w:number, h:number}> — Array of rectangles to subdivide._fix: number — Factor controlling split variability (0 = even thirds, higher values = more randomness).
Returns
Array.<{x:number, y:number, w:number, h:number, cnt:number}>— Array of vertically subdivided rectangles with counters.
Example
let initialRects = [{x: 0, y: 0, w: art.w, h: art.h}];
let subdivided = art.subdivRectV3(1, initialRects);
art.showRects(subdivided, "#ff3333");subdivLines()
Subdivides each line segment in the provided array into smaller segments across multiple passes. Each subdivision introduces a small random offset within a circular radius defined by `_fix`.
Parameters
_passes: number — Number of subdivision passes to perform._lines: Array.<{x: number, y: number, dx: number, dy: number}> — Array of line objects to subdivide._fix: number — Radius of the circle controlling the random displacement of the midpoint.
Returns
Array.<{x: number, y: number, dx: number, dy: number}>— Array of subdivided line segments.
Example
let lines = [{ x: 100, y: 200, dx: 400, dy: 50 }];
let divlines = art.subdivLines(3, lines, 15);
art.HR.circle(10).cx(100).cy(200).fill("#ff3333");
art.HR.circle(10).cx(100 + 400).cy(200 + 50).fill("#ff3333");
art.HR.line(100, 200, 100 + 400, 200 + 50).stroke({ width: 1, color: '#ff3333' });
divlines.forEach(line => {
art.HR.line(line.x, line.y, line.x + line.dx, line.y + line.dy).stroke({ width: 1, color: '#333333' });
})packRect()
Applies random rectangle packing within a given bounding rectangle, avoiding overlaps. Each iteration attempts to place a new rectangle with randomized size and position.
Parameters
_maxpass: number — Number of placement attempts._rect: Object — Bounding rectangle where packing occurs._rects: Array.<{x: number, y: number, w: number, h: number}> — Array of existing rectangles._sp: number — Starting ratio of the minimum bounding dimension for rectangle size.
Returns
Array.<{x: number, y: number, w: number, h: number}>— Array of packed rectangles.
Example
const rects = art.packRect(100, { x: 0, y: 0, w: art.w, h: art.h }, [], 0.3)
art.showRects(rects, "#aa3333");Noise & Flow 6
noise()
Experimental deterministic noise function based on sine and cosine. Unlike Perlin noise, this helper produces a simple, tileable pattern that depends on the current canvas size and the internal length parameter.
Parameters
_x: number — X coordinate where noise is evaluated._y: number — Y coordinate where noise is evaluated.
Returns
number— A pseudo-noise value in the range \[0, 1\].
Example
// Draw a quick checkboard-like pattern using the experimental noise:
const step = art.l / 6;
for (let y = 0; y < art.h; y += step) {
for (let x = 0; x < art.w; x += step) {
const n = art.noise(x, y);
const shade = ~~(n * 255).toString(16).padStart(2, '0');
art.HR.rect(step, step)
.move(x, y)
.fill(`#${shade}${shade}${shade}`);
}
}drawBranches()
Draws a set of flowing, noise-driven branch lines based on a vector field. Each branch follows the local direction of a Perlin noise gradient, producing natural-looking streamlines or root-like patterns. The function samples Perlin noise at each step to determine the direction of growth. Starting from random seed points within the canvas, it extends each branch iteratively, bending according to the local gradient of the noise field. The resulting structures resemble organic filaments, neural paths, or river deltas depending on scale and repetition. After constructing the path points, it draws smooth Bézier segments to connect them, then mirrors the sequence to close the shape and apply a fill, blending line and surface.
Parameters
_sc: number — Scale factor for the noise field. Typical range is 100–5000; lower values yield more turbulence._maxpass: number — Number of branches to generate._mi: number — Maximum number of iterations or segments per branch._cols: string — Stroke color for the branch lines._colf: string — Fill color used to softly blend the paths.
Example
art.drawBranches(300, 50, 120, '#333333', '#333333')drawDrips()
Draws organic drip-like lines influenced by a noise-based vector field. Each drip grows along the noise gradient and occasionally deposits small blobs, creating fluid and irregular trajectories reminiscent of ink or paint traces. The function begins each drip at a random position within the drawing area and extends it step by step according to a noise-derived angle. Random variations in segment length and direction give each line a natural, meandering flow. * With a probability of 0.8 at each iteration, small circular blobs are added along the path, enhancing the impression of a dripping or bleeding texture. Once the path is complete, smooth Bézier curves connect the points, and the path is mirrored to close the shape. * The resulting structures combine vector-field dynamics with stochastic texturing, producing visual outcomes that range from hairline fluid streams to dense organic growths depending on the scale and iteration depth.
Parameters
_sc: number — Scale factor for the noise field. Typical range: 100–5000. Smaller values create more turbulence._maxpass: number — Number of drips to generate._mi: number — Maximum number of iterations or steps for each drip._cols: string — Stroke color of the drip lines._colf: string — Fill color for the paths and internal blobs.
Example
art.drawDrips(3000, 50, 30, '#222', '#444')drawDrips1()
Draws complex drip-like formations along a noise-based vector field. Each drip evolves through iterative displacement governed by the noise gradient and occasionally spawns either smooth blobs or irregular drip blobs, creating a layered organic texture. Each drip starts from a random position within the drawing area and follows the flow defined by Perlin noise gradients. At each iteration, a random step length and direction derived from the noise field determine the new point. The function then constructs a smooth Bézier curve connecting all collected points, producing a continuous, natural-looking trajectory. With a probability of 0.8, the algorithm deposits a shape along the path. In most cases (75%), this is a small, round blob created via `drawBlob()`. In the remaining cases, an irregular `drawDripBlob()` is used instead, producing droplet-like protrusions. This balance between smooth and jagged insertions adds material variety to the result. The final path is mirrored and closed, filled with the specified color, and stroked using the provided line color. The combined effect evokes dynamic fluid behavior, resembling liquid stains or biological growth traces.
Parameters
_sc: number — Scale factor for the noise field. Typical range: 100–5000. Lower values create more turbulence and curvature._maxpass: number — Number of independent drips to render._mi: number — Maximum number of iterations per drip path._cols: string — Stroke color applied to the generated paths._colf: string — Fill color applied to both the path and embedded blobs.
Example
art.drawDrips1(3000, 50, 30, '#222', '#444')
drawDrips2()
Draws a series of fluid drip formations guided by a noise-based vector field. Similar to drawDrips1, this variant introduces an additional random scaling factor in the step length to increase irregularity and softness in the resulting motion paths. The method generates organic drip trajectories that evolve under the influence of Perlin noise gradients. At each iteration, the step length is randomized by multiplying two random values, producing smoother, slower displacements compared to drawDrips1. The resulting structure conveys more fluid and diffuse dynamics. With an 80% probability, a decorative shape is placed along the path: - In 75% of these cases, a small, round blob is created using `drawBlob()`. - Otherwise, an irregular droplet shape is produced via `drawDripBlob()`. After the iterative path generation, the method constructs a mirrored Bézier path from all recorded points. The path is filled with the specified color and stroked with the defined line color, creating layered, organic visuals that resemble dripping pigments or liquid trails.
Parameters
_sc: number — Scale for the noise field (typical range 100–5000). Lower values create tighter curvature and more turbulence._maxpass: number — Number of independent drips generated in the composition._mi: number — Maximum number of iterations for each drip path._cols: string — Stroke color applied to the generated paths._colf: string — Fill color used for both the paths and embedded blob shapes.
Example
art.drawDrips2(3000, 50, 30, '#222', '#444')
drawDrips3()
Generates layered drip formations influenced by a noise-driven vector field, with localized blob-like shapes emerging along each path. This third variant emphasizes density and texture over linear flow, producing shorter and more granular trajectories compared to drawDrips2. Each drip begins from a random position within the drawing margins and advances according to noise gradients sampled from the surrounding field. The step length is modulated by a double-randomized factor, creating irregular yet cohesive motion that evolves in soft, curved trajectories. At each iteration, the method places an elongated blob using drawDripBlob1, with dimensions scaled proportionally to the step length. These overlapping forms accumulate into dense, fluid compositions resembling pigment diffusion or biological growth structures. Unlike drawDrips1 and drawDrips2, this version omits the mirrored Bézier reconstruction and focuses on direct blob layering, resulting in more granular, sculptural textures.
Parameters
_sc: number — Scale factor for the noise field (typically 100–5000). Smaller values produce denser curvature._maxpass: number — Number of drip paths to generate across the canvas._mi: number — Maximum number of iterations per drip path._cols: string — Stroke color applied to blob contours._colf: string — Fill color used for the generated blobs._op: number — Opacity level applied to each blob, from 0 (transparent) to 1 (opaque).
Example
art.drawDrips3(3000, 50, 30, '#222', '#444')
Tiling 1
tileP31M()
Applies a P31M wallpaper tiling to a given base SVG group. The method replicates the base group across a triangular lattice using translations, 120° rotations, and mirror symmetries to generate the full pattern.
Parameters
_baseGroup: Object — SVG group used as the fundamental motif to be tiled._xc: number — X coordinate of the rotation and mirror origin._yc: number — Y coordinate of the rotation and mirror origin._size: number — Base size defining the lattice spacing._rowstart: number — Starting row index for the tiling range._rowend: number — Ending row index for the tiling range._colstart: number — Starting column index for the tiling range._colend: number — Ending column index for the tiling range.
Example
const motif = art.HR.group();
motif.add(art.HR.line(art.w / 2, art.h / 2, art.w / 2, art.h / 2 + 20 / 3));
motif.add(art.HR.line(art.w / 2 - 20 / 2, art.h / 2 + 20 / 3, art.w / 2 + 20 / 2, art.h / 2 + 20 / 3));
motif.stroke({ width: 2, color: '#111111' });
art.tileP31M(motif, art.w / 2, art.h / 2, 25, -8, 8, -5, 5);
motif.remove();Architecture 7
drawBuilding()
Draws an abstract building with procedural path generation and randomized stroke details. The building type determines the form of the outline and internal line patterns. Randomized offsets give the paths a hand-drawn, textured appearance. The final output combines filled shapes with stroked lines to create a stylized architectural figure.
Parameters
_xt: number — X coordinate of the upper-left corner._yt: number — Y coordinate of the upper-left corner._wt: number — Width of the building._ht: number — Height of the building._xpl: number — Left horizontal waypoint reference._xpr: number — Right horizontal waypoint reference._type: string — Building type preset ("type1", "type2", "type3"). Randomly selected if undefined._colf: string | Array.— Fill color or gradient for the main building shape. _cols: string — Stroke color for outlines and internal lines.
Returns
SVG.G— SVG group containing the filled and stroked paths.
Example
art.drawBuilding(100, 100, 100, 300, 0, 600, "type1", "#33aaff", "#222222")
art.drawBuilding(250, 100, 100, 300, 0, 600, "type2", "#33aaff", "#222222")
art.drawBuilding(400, 100, 100, 300, 0, 600, "type3", "#33aaff", "#222222")drawBuild1Scape()
Draws a building facade based on a bounding rectangle, applying procedural randomization to windows, roof lines, and doors. The shape is constructed using cubic curves defined by calculated control points.
Parameters
_rect: Object — Bounding rectangle of the building with x, y, w, h properties._colf: String — Fill color for the building structure (windows/roof)._cols: String — Stroke color for outlines._coll: String — Collar color (used for doors/stroke details).op: Number — Opacity level for the drawing elements.hoff: Number — Vertical offset (ratio) for the roof/overhang height relative to rect.h.
Example
const building = art.drawBuild1Scape({ x: 50, y: 50, w: 200, h: 200 }, '#eeeeee', '#555555', '#333333', 1, 0.2);drawDoorScape()
Draws a detailed door facade (scape) at a specific location with randomized styling. The shape is constructed using cubic curves defined by calculated control points to create an arched or custom profile.
Parameters
_rect: Object — Rectangle defining the door's position and size with x, y, w, h properties._colf: String — Fill color for the door structure (curves)._cols: String — Stroke color for outlines of the door frame._coll: String — Detail/Frame color (reserved for future extensions or specific accents).op: Number — Opacity level for the drawing elements.hoff: Number — Vertical offset factor influencing the curve's vertical positioning relative to rect.h.
Example
// Draw a door with custom curves and colors
art.drawDoorScape({ x: 100, y: 200, w: 40, h: 120 }, '#8b5a2b', '#3e2723', '#d7ccc8');drawBridgeScape()
Draws a bridge-style facade scape featuring an arched or cantilevered profile. The shape is constructed using combined cubic curve segments, including parts that extend beyond the bounding rectangle edges to simulate overhangs.
Parameters
_rect: Object — Bounding rectangle for the bridge with x, y, w, h properties._colf: String — Fill color for the main curve structure._cols: String — Stroke color for outlines of the bridge frame._coll: String — Detail/Frame color (used for specific accents or future extensions).op: Number — Opacity level for the drawing elements.hoff: Number — Vertical offset factor influencing the curve's vertical positioning relative to rect.h.
Example
art.drawBridgeScape({ x: 50, y: 50, w: 200, h: 200 }, '#e6c9a8', '#5d4037', '#3e2723');drawBuild2Scape()
Draws a building facade with a distinctive stepped or indented profile. The shape is constructed using cubic curves that define a non-rectangular boundary, followed by procedural placement of windows.
Parameters
_rect: Object — Bounding rectangle for the building with x, y, w, h properties._colf: String — Fill color for the main wall structure (curves)._cols: String — Stroke color for outlines of the building frame._coll: String — Detail/Frame color used for windows and accents.op: Number — Opacity level for the drawing elements.hoff: Number — Vertical offset factor influencing the curve's vertical positioning relative to rect.h.
Example
// Draw a building with indented walls and randomized windows
art.drawBuild2Scape({ x: 10, y: 20, w: 300, h: 200 }, '#f5f5dc', '#777777', '#b0c4de', 1, 0.2);drawBuild3Scape()
Draws a third variation of building facade with a unique architectural style. The shape is constructed using cubic curves defined by calculated control points to create an irregular or stylized silhouette, potentially featuring varied indentation or projection patterns.
Parameters
_rect: Object — Bounding rectangle for the building with x, y, w, h properties._colf: String — Fill color for the main wall structure (curves)._cols: String — Stroke color for outlines of the building frame._coll: String — Detail/Frame color used for windows and accents.op: Number — Opacity level for the drawing elements.hoff: Number — Vertical offset factor influencing the curve's vertical positioning relative to rect.h.
Example
// Draw a building with a complex irregular profile and accent details
art.drawBuild3Scape({ x: 10, y: 20, w: 300, h: 200 }, '#f5f5dc', '#777777', '#b0c4de', 1, 0.2);drawTower()
Draws a vertical tower composed of stacked rectangular segments. Each segment height varies randomly, giving the structure a rhythmic, uneven appearance. The method divides a given vertical span into random-height blocks, creating the illusion of architectural stacking or modular construction. Each block is drawn as a rounded rectangle with consistent width and a small spacing defined by the internal thickness parameter `t`. This function is useful for building columnar or skyline-like structures within generative compositions, often serving as a rhythmic or vertical counterbalance.
Parameters
_xt: number — X coordinate of the tower’s upper-left corner._yt: number — Y coordinate of the tower’s upper-left corner._wt: number — Tower width._ht: number — Tower total height._colf: string | Array.— Fill color or array of fill colors for the tower sections. _cols: string — Stroke color for the tower outlines.
Returns
void
Example
art.drawTower(100, 50, 40, 300, "#dfe6e9", "#2d3436")Characters 8
drawStylHuman()
Draws a stylized human figure using curved strokes computed from randomized control points. The proportions adapt to the provided rectangle, producing slight variations in posture.
Parameters
_rect: Object — Bounding box used to shape the figure._cols: string — Stroke color for the figure.
Example
let r = { x: 80, y: 40, w: 140, h: 260 };
art.drawStylHuman(r, '#223344');drawSkull()
Draws a stylized skull inside the given rectangle using layered curved strokes and simple shapes. The skull is constructed from an outlined face, repeated jaw strokes, eyes and nose elements, with an additional light accent to suggest depth and asymmetry.
Parameters
_rect: Object — Bounding rectangle of the skull._colf: string — Fill color used for eyes and soft interior elements._cols: string — Stroke color used for the main skull structure and details._coll: string — Stroke color used for light and highlight accents.
Example
const rect = { x: 80, y: 60, w: 260, h: 300 };
art.drawSkull(rect, '#e0e0e0', '#1a1a1a', '#ffffff');drawSkull1()
Draws a skull variant composed by stacking a base skull shape with an extended jaw section. The method reuses drawSkull for the upper part and adds multiple curved stroke bands below to suggest teeth and jaw structure, increasing visual density toward the bottom.
Parameters
_rect: Object — Bounding rectangle of the skull._colf: string — Fill color used for eyes and interior elements._cols: string — Stroke color used for outlines and jaw details._coll: string — Stroke color used for light and highlight accents.
Example
const rect = { x: 60, y: 40, w: 280, h: 340 };
art.drawSkull1(rect, '#e0e0e0', '#1a1a1a', '#ffffff');drawHand()
Draws a stylized hand using curved stroke segments arranged to suggest fingers and palm structure. The form is built from multiple overlapping stroke curves, with thicker strokes used to emphasize the palm area.
Parameters
_rect: Object — Bounding rectangle of the hand._colf: string — Reserved fill color parameter (not used directly by this method)._cols: string — Stroke color used to render the hand contours._coll: string — Additional color parameter reserved for highlights or accents.
Example
const rect = { x: 100, y: 80, w: 200, h: 260 };
art.drawHand(rect, '#e0e0e0', '#111111', '#666666');drawHandV()
Draws a vertical stylized hand using a sequence of curved stroke segments. The composition suggests fingers and palm through layered curves with varying thickness, building the form from top to bottom within the given rectangle.
Parameters
_rect: Object — Bounding rectangle of the hand._colf: string — Reserved fill color parameter (not used directly by this method)._cols: string — Stroke color used to render the hand contours.
Example
const rect = { x: 100, y: 80, w: 200, h: 260 };
art.drawHandV(rect, '#cccccc', '#1a1a1a');drawHandP()
Draws a stylized hand using curved stroke segments arranged to suggest fingers and palm structure. The form is built from multiple overlapping stroke curves, with thicker strokes used to emphasize the palm area.
Parameters
_rect: Object — Bounding rectangle of the hand._colf: string — Reserved fill color parameter (not used directly by this method)._cols: string — Stroke color used to render the hand contours._coll: string — Additional color parameter reserved for highlights or accents.
Example
const rect = { x: 100, y: 80, w: 200, h: 260 };
art.drawHandP(rect, '#111111', '#666666');drawHandPalm()
Parameters
_rect: Object — Bounding box used to size and position the palm._sw: number — Stroke width for the palm outline._colf: string — Fill color for the palm area._cols: string — Stroke color for the palm contour.
Returns
SVG.G— Group containing the filled and stroked palm print.
Example
const r = {
x: art.w / 2 - 3 * art.l,
y: art.h / 2 - 3 * art.l,
w: 6 * art.l,
h: 6 * art.l
};
const palm = art.drawHandPalm(r, art.t, '#ffe0b2', '#bf360c');
palm.opacity(0.95);drawSilouhette()
Draws a stylized human silhouette built from stacked, skewed rectangular parts (head, neck, torso, hips, legs, and arms). Each body part is approximated by a small quadrilateral that is optionally rotated and scaled at the bottom to suggest perspective and motion. Internally, the method assembles a list of rectangular “bones” around the center of the supplied rectangle, converts each into a four‑point polygon, and then calls drawCurve and drawStrokeCurve to obtain a soft, hand-drawn outline. The result is returned as a single SVG group so it can be transformed as a whole.
Parameters
_rect: Object — Bounding box where the silhouette is constructed._colf: string — Fill color for the silhouette body, or `'none'` for no fill._cols: string — Stroke color for the silhouette outline, or `'none'` for no stroke.
Returns
SVG.G— Group containing the composed silhouette elements.
Example
// Center a silhouette figure on the canvas:
const r = {
x: art.w / 4 - art.l,
y: art.h / 4 - 4 * art.l,
w: 4 * art.l,
h: 8 * art.l
};
const sil = art.drawSilouhette(r, '#111111', '#000000');
sil.opacity(0.9);Nature 13
drawBamboo()
Draws a stylized bamboo plant composed of trunk segments, branches, and leaves. Each segment is generated recursively with variations in angle and length, producing an organic structure.
Parameters
_xb: number — Base x-coordinate of the bamboo._yb: number — Base y-coordinate of the bamboo._a: number — Initial direction angle in degrees._bl: number — Length of the bamboo segment._maxpass: number — Number of trunk iterations._colfa: string — Fill color for trunk segments._colfb: string — Fill color for leaves._cols: string — Stroke color for outlines.
Example
art.drawBamboo(art.w / 2, art.h - 10, 90, 100, 5, '#98c379', '#7fbf7f', '#3b3b3b')drawBambooBranches()
Draws bamboo branches with attached leaves. Each branch extends from the trunk, curving outward with multiple leaves generated along its length.
Parameters
_xb: number — X-coordinate of the branch base._yb: number — Y-coordinate of the branch base._a: number — Direction angle of the trunk in degrees.bw: number — Width of the trunk at the connection point.brl: number — Length of the branch.lw: number — Leaf width.ll: number — Leaf length.passt: number — Number of branch segments._colfb: string — Fill color for leaves._cols: string — Stroke color for outlines.
Example
art.drawBambooBranches(art.w / 2, art.h -10, 90, 10, 50, 8, 20, 4, '#7fbf7f', '#3b3b3b')drawBambooTrunkSeg()
Draws a single bamboo trunk segment. The segment is rendered as a curved shape that represents a section of the bamboo stalk.
Parameters
_xb: number — X-coordinate of the base point._yb: number — Y-coordinate of the base point._a: number — Angle direction of the trunk in degrees._bl: number — Length of the trunk segment.bw: number — Width of the trunk segment._colfa: string — Fill color of the trunk._cols: string — Stroke color of the outline.
Example
art.drawBambooTrunkSeg(art.w / 2, art.h -10, 90, 80, 12, '#9dc183', '#3b3b3b')generatePlant()
Recursively generates the structure of a plant using branching geometry. Each iteration creates new stems and branches that form an organic plant-like pattern.
Parameters
_x: number — X-coordinate of the root position._y: number — Y-coordinate of the root position._len: number — Length of the current branch segment._a: number — Angle direction of the branch in degrees._dw: number — Initial branch width._dwf: number — Final branch width._iter: number — Remaining number of iterations for recursion._plant: Array.<{xbl: number, ybl: number, xbr: number, ybr: number, xtl: number, ytl: number, xtr: number, ytr: number, len: number, it: number}> — Array collecting generated plant segments.
Example
let plant = []
art.generatePlant(art.w / 2, art.h - 10, 150, 90, 20, 10, 4, plant)
art.drawPlant(plant, '#88cc88', '#669966', '#335533')drawPlant()
Draws a stylized plant structure composed of curved branches and leaf clusters. Each plant segment is filled and detailed using layered strokes to create an organic appearance.
Parameters
_plant: Array.<{xbl: number, ybl: number, xbr: number, ybr: number, xtl: number, ytl: number, xtr: number, ytr: number, len: number, it: number}> — Array of plant segment objects generated by `generatePlant`._colft: string — Fill color for the main plant body._colfl: string — Fill color for the leaves._cols: string — Stroke color for outlines and details.
Example
let plant = [];
art.generatePlant(art.w / 2, art.h - 10, 150, 90, 20, 10, 4, plant);
art.drawPlant(plant, '#88cc88', '#669966', '#335533');drawElement()
Draws an abstract decorative element based on a distorted rectangular frame. The outer path starts as a rounded octagonal loop around `_rect` and is then connected to two randomly chosen internal points, creating a faceted, emblem-like shape.
Parameters
_rect: Object — Bounding box used to define the element extents._colf: string — Fill color for the element interior._cols: string — Stroke color for the outline._op: number — Opacity factor applied to the fill (0–1).
Returns
SVG.G— Group containing the filled and stroked decorative element.
Example
const r = {
x: art.w / 2 - 3 * art.l,
y: art.h / 2 - 2 * art.l,
w: 6 * art.l,
h: 4 * art.l
};
const elem = art.drawElement(r, '#c5cae9', '#1a237e', 0.9);
elem.opacity(0.95);drawOcto()
Draws a stylized octopus-like shape with a bulbous head and eight flowing tentacles. The tentacles are generated as short polylines radiating from a central body point, which are then expanded into a ribbon-like outline and rendered with drawCurve and drawStrokeCurve. Two arcuate strokes suggest eyes.
Parameters
_rect: Object — Bounding box for the octopus body and tentacles._colf: string — Fill color for the octopus body._cols: string — Stroke color for the contour and details._op: number — Opacity factor applied to the fill (0–1).
Returns
SVG.G— Group containing the filled and stroked octopus.
Example
const r = {
x: art.w / 2 - 3 * art.l,
y: art.h / 2 - 3 * art.l,
w: 6 * art.l,
h: 6 * art.l
};
const octo = art.drawOcto(r, '#303f9f', '#1a237e', 0.9);
octo.opacity(0.95);drawFish()
Draws a stylized side-view fish composed of a curved body and a triangular tail. The body outline is built from a small set of control points and rendered with drawCurve for the fill and drawStrokeCurve for the outline. Additional stroke arcs near the head suggest gill or eye details.
Parameters
_rect: Object — Bounding box used to size and position the fish._colf: string — Fill color for the fish body and tail, or `'none'` to skip fill._cols: string — Stroke color for the outline and head detail, or `'none'` to skip stroke._op: number — Opacity factor applied to the fill and strokes (0–1).
Returns
SVG.G— Group containing the filled and stroked fish.
Example
const r = {
x: art.w / 2 - 3 * art.l,
y: art.h / 2 - 1.5 * art.l,
w: 6 * art.l,
h: 3 * art.l
};
const fish = art.drawFish(r, '#ffcc80', '#e65100', 0.95);
fish.opacity(0.95);drawFlower()
Draws a radial flower composed of Bézier petals, radial stroke accents, and a central disk. Petals are arranged evenly around the center using `_petals` and `_pnums` (for multiple rotated revolutions), with their outlines rendered by drawCurve and textured using drawStrokeCurve. A circular core is then added at the center.
Parameters
_xc: number — X coordinate of the flower center._yc: number — Y coordinate of the flower center._r1: number — Inner radius where petals attach to the center._r2: number — Outer radius reaching the petal tips._petals: number — Number of petals around the circle._pnums: number — Number of petal revolutions (layers) to draw._cols: string — Stroke color for petal contours and accents._colf_in: string — Fill color for the central disk._colf_out: string — Fill color for the petal bodies.
Returns
SVG.G— Group containing the assembled flower.
Example
const r1 = 2 * art.l;
const r2 = 4 * art.l;
const flower = art.drawFlower(art.w / 2, art.h / 2, r1, r2, 12, 3, '#3e2723', '#ffeb3b', '#ff9800');
flower.opacity(0.95);drawLeaf()
Draws a two-sided leaf composed of mirrored Bézier curves around a central vein. The leaf outline is constructed from three control polylines: a middle axis and left/right edges, all meeting at the base and tip. Each side is then rendered using drawCurve and outlined with drawStrokeCurve. This variant produces a relatively symmetric leaf with slight randomness applied to the tip direction for an organic feel.
Parameters
_xb: number — X coordinate of the leaf base._yb: number — Y coordinate of the leaf base._fa: number — Base angle in degrees, pointing from stem toward tip._fl: number — Leaf length along the main axis._colf: string — Fill color used for the leaf surface._cols: string — Stroke color used for the veins and outline.
Returns
SVG.G— Group containing the filled and stroked leaf.
Example
const leaf = art.drawLeaf(art.w / 2, art.h / 2, 90, 3 * art.l, '#4caf50', '#1b5e20');
leaf.opacity(0.9);drawLeaf1()
Draws a single-sided curved leaf with a slightly asymmetric profile. Unlike drawLeaf, this variant uses only one side edge and the central axis, resulting in a more directional, flicked leaf shape suitable for details and smaller foliage. The side edge angle is chosen based on the main direction to keep the curve visually consistent whether the leaf points left or right.
Parameters
_xb: number — X coordinate of the leaf base._yb: number — Y coordinate of the leaf base._fa: number — Base angle in degrees, pointing from stem toward tip._fl: number — Leaf length along the main axis._colf: string — Fill color used for the leaf surface._cols: string — Stroke color used for the veins and outline.
Returns
SVG.G— Group containing the filled and stroked leaf.
Example
const leaf = art.drawLeaf1(art.w / 2, art.h / 2, 60, 3 * 0.8 * art.l, '#81c784', '#2e7d32');
leaf.opacity(0.9);drawRose()
Draws a stylized rose-like bloom inside the given rectangle by stacking multiple `drawDripBlob1` blobs of increasing radius and rotating each layer. The fill color for each petal ring is randomly chosen from `_colfs`, while `_cols` controls the stroke color of the outer contour.
Parameters
_rect: Object — Bounding box where the rose is drawn._colfs: Array.— Array of candidate fill colors used for the petals. _cols: string — Stroke color applied to each drip blob ring.
Example
const r = {
x: art.w / 2 - 4 * art.l ,
y: art.h / 2 - 4 * art.l,
w: 8 * art.l,
h: 8 * art.l
};
const petalColors = ['#ffb3c6', '#ff6392', '#ff85a1'];
art.drawRose(r, petalColors, '#5c1933');drawPlant1()
Draws a procedural plant structure composed of a main stem and multiple randomized side shoots. The geometry is generated recursively by calculating new angles and lengths for subsequent stems, creating an organic branching pattern. Each shoot (except the first) has a leaf attached.
Parameters
_xc: Number — Center X coordinate of the plant root/base._yc: Number — Center Y coordinate of the plant root/base._ac: Number — Initial angle (in degrees) for the main stem growth._pl: Number — Length of the initial main stem segment._sw: Number — Stroke width used for all stems._colst: String — Color for the green/stem parts of the plant._collfst: String — Color for the leaves dtroke._collffl: String — Color for the leaver fill.
Returns
SVG.G— Group containing the composed plant.
Example
// Draw a small bushy plant growing at a 45-degree angle
art.drawPlant1(200, 300, 45, 150, 4, '#2e7d32', '#66bb6a', '#2e7d32');Objects 12
drawAirShip()
Draws an airship (zeppelin-style) by composing multiple parts including a balloon body, a cabin, and a tail structure. The final shape is grouped and rotated with random gaussian tilt for organic movement.
Parameters
_rect: Object — Bounding rectangle for the airship with x, y, w, h properties (center calculated internally)._colf: String — Fill color for the balloon and structural elements._cols: String — Stroke color for outlines, seams, and structural details.op: Number — Opacity level for all drawing elements.
Example
art.drawAirShip({ x: 50, y: 150, w: 200, h: 200 }, '#ffcc00', '#333333', 1);drawAirBaloon()
Draws an air balloon with an organic, irregular shape by sampling polar coordinates. The outline is constructed using two concentric paths derived from predefined radius multipliers (outer and inner) to create a 3D-like highlight effect. The final group is rotated with random tilt.
Parameters
_rect: Object — Bounding rectangle for the balloon area with x, y, w, h properties (radius calculated internally)._colf: String — Fill color for the balloon body._cols: String — Stroke color for the outer outline and inner highlight line.op: Number — Opacity level for the drawing elements.
Example
art.drawAirBaloon({ x: 50, y: 50, w: 200, h: 200 }, '#ff4081', '#33ffff', 1);drawBottle()
Draws a stylized bottle shape inside the given rectangle using polygon fills and curved strokes. The shape varies depending on the selected type, which adjusts the profile of the bottle.
Parameters
_rect: Object — Bounding box for the bottle._colf: string — Fill color for the bottle body._cols: string — Stroke color for the outlines._coll: string — Highlight color for the light stroke._type: number — Optional bottle type. Randomly chosen when omitted.
Example
let r = { x: 40, y: 60, w: 120, h: 260 };
art.drawBottle(r, '#aaccee', '#335577', '#88bbdd', 2);drawGlass()
Draws a stylized glass shape inside the given rectangle using polygon fills and curved strokes. The outline and proportions change depending on the selected type, producing different glass profiles.
Parameters
_rect: Object — Bounding box for the glass._colf: string — Fill color for the glass body._cols: string — Stroke color for the outlines._coll: string — Highlight color for the light stroke._type: number — Optional glass type. Randomly chosen when omitted.
Example
let r = { x: 60, y: 40, w: 120, h: 240 };
art.drawGlass(r, '#ddeeff', '#224466', '#88aacc', 1);drawFloppy()
Draws a stylized floppy disk icon inside a rectangular area. The method interprets the provided rectangle as a bounding box and composes the floppy shape using filled areas and stroked curves to suggest label and case details. Proportions scale with the rectangle dimensions, so the icon adapts to different sizes.
Parameters
_rect: Object — Bounding rectangle with x, y, w, h properties._colf: String | Array — Fill color applied to internal areas._cols: String | Array — Stroke color used for outlines._coll: String | Array — Accent or secondary color (reserved for variations).
Example
art.drawFloppy({ x: 100, y: 100, w: 120, h: 160 }, '#222222', '#44cc00', '#888888')drawMac()
Draws a stylized desktop computer icon resembling a classic all-in-one design. The rectangle defines the outer proportions, while internal elements suggest a screen and base through layered fills and smooth stroke curves. Stroke weight and spacing scale automatically with size.
Parameters
_rect: Object — Bounding rectangle with x, y, w, h properties._colf: String | Array — Fill color for screen and body areas._cols: String | Array — Stroke color for contours and details._coll: String | Array — Accent or secondary color (reserved for variations).
Example
art.drawMac({ x: 200, y: 80, w: 180, h: 160 }, '#eeeeee', '#111111', '#999999')drawMobile()
Draws a stylized mobile device icon within a rectangular area. The method divides the rectangle vertically to suggest screen and keypad zones, then outlines the device case with smooth curves. All proportions adapt to the given rectangle dimensions.
Parameters
_rect: Object — Bounding rectangle with x, y, w, h properties._colf: String | Array — Fill color for screen and control areas._cols: String | Array — Stroke color for the device outline._coll: String | Array — Accent or secondary color (reserved for variations).
Example
art.drawMobile({ x: 50, y: 200, w: 90, h: 180 }, '#dddddd', '#222222', '#777777')drawPolaroid()
Draws a stylized polaroid camera or instant photo frame icon. The rectangle defines the outer bounds, while curved strokes describe the characteristic frame proportions and inner opening. The result scales consistently across different sizes.
Parameters
_rect: Object — Bounding rectangle with x, y, w, h properties._colf: String | Array — Fill color for internal areas._cols: String | Array — Stroke color for the frame outline._coll: String | Array — Accent or secondary color (reserved for variations).
Example
art.drawPolaroid({ x: 300, y: 150, w: 140, h: 180 }, '#fafafa', '#000000', '#aaaaaa')drawVideoCam()
Draws a video camera icon using simple geometric primitives. The symbol suggests recording, surveillance, or media presence.
Parameters
_rect: Object — Bounding rectangle with x, y, w, h properties._colf: string — Fill color._cols: string — Stroke color._coll: String — Accent or secondary color.
Example
art.drawVideoCam({ x: 300, y: 150, w: 140, h: 180 }, '#111111', '#771111', '#cccccc')drawBicolFlag()
Draws a stylized bicolor flag inside the given rectangle using curved stroke bands. The flag is built by repeatedly drawing horizontal stroke curves between two randomly chosen vertical anchor points, with a central emphasized separation.
Parameters
_rect: Object — Bounding rectangle of the flag._colf: string — Fill and stroke color used for the main flag bands._cols: string — Stroke color used for the separating and border lines.
Example
const rect = { x: 100, y: 100, w: 300, h: 180 };
art.drawBicolFlag(rect, '#d32f2f', '#1a1a1a');drawBicolTree()
Draws a stylized bicolor tree inside the given rectangle using mirrored curved strokes. The form grows vertically from the upper edge toward a central axis, layering repeated strokes for density and reinforcing the main branching structure with a second color.
Parameters
_rect: Object — Bounding rectangle of the tree._colf: string — Color used for the layered interior strokes._cols: string — Color used for the structural branch strokes.
Example
const rect = { x: 100, y: 100, w: 100, h: 250 };
art.drawBicolTree(rect, '#2e7d32', '#1a1a1a');drawLolli()
Draws a “lollipop” shape composed of a stick and a circular or elliptical head. The stick is drawn along a given orientation, and the head sits at the specified center. The function creates a stylized “lollipop” form by combining a linear element and a simple geometric head. It can serve as a decorative motif, a connector between visual layers, or a compositional accent. The head type (`circle` or `ellipse`) alters the perception of balance and weight, while the stick’s angle defines orientation within the composition.
Parameters
_xl: number — X coordinate of the lollipop head center._yl: number — Y coordinate of the lollipop head center._hl: number — Length of the stick and reference size for the head radius._al: number — Angle of stick orientation in degrees._kind: string — Shape type for the head. Defaults to a random selection._colf: string | Array.— Fill color or array of fill colors for the head. _cols: string — Stroke color for both head and stick.
Returns
void
Example
art.drawLolli(200, 300, 100, 270, "ellipse", "#ffeaa7", "#2d3436")Signs 5
drawRadioSign()
Draws a radio signal sign composed of a central element and concentric arcs. The symbol is typically used to suggest broadcast, connectivity, or transmission.
Parameters
_rect: Object — Bounding rectangle with x, y, w, h properties._colf: string — Fill color._cols: string — Stroke color._coll: String — Accent or secondary color.
Example
art.drawRadioSign({ x: 300, y: 150, w: 140, h: 180 }, '#333333', '#771111', '#444444')drawPeaceSign()
Draws a peace sign using a circular boundary and internal strokes. The sign is rendered with slight irregularities to match the hand-drawn style.
Parameters
_rect: Object — Bounding rectangle with x, y, w, h properties._colf: string — Fill color._cols: string — Stroke color.
Example
art.drawPeaceSign({ x: 300, y: 150, w: 140, h: 180 }, '#111111', '#771111')drawDangerSign()
Draws a generic danger sign based on a triangular geometry. The symbol is intended as a visual accent rather than a strict pictogram.
Parameters
_rect: Object — Bounding rectangle with x, y, w, h properties._colf: string — Fill color._cols: string — Stroke color._coll: String — Accent or secondary color._op: Number — Opacity defaults tp 30% if not set
Example
art.drawDangerSign({ x: 300, y: 150, w: 140, h: 180 }, '#111111', '#771111', '#115511', 0.2)drawDangerSign1()
Draws an alternative danger sign variation. This version emphasizes stroke structure and internal detail.
Parameters
_rect: Object — Bounding rectangle with x, y, w, h properties._colf: string — Fill color._cols: string — Stroke color._coll: String — Accent or secondary color._op: Number — Opacity defaults tp 30% if not set
Example
art.drawDangerSign1({ x: 300, y: 150, w: 140, h: 180 }, '#111111', '#771111', '#115511', 0.2)drawDangerSign2()
Draws a second alternative danger sign variation. The shape is intentionally loose and expressive.
Parameters
_rect: Object — Bounding rectangle with x, y, w, h properties._colf: string — Fill color._cols: string — Stroke color._coll: String — Accent or secondary color._op: Number — Opacity defaults tp 30% if not set
Example
art.drawDangerSign2({ x: 300, y: 150, w: 140, h: 180 }, '#111111', '#771111', '#115511', 0.2)Body 3
drawLips()
Draws a pair of stylized lips defined by a closed Bézier outline and several curved stroke accents. The upper and lower lips are hinted with separate stroke bands, while an internal curve emphasizes the mouth opening.
Parameters
_rect: Object — Bounding box for the lips._colf: string — Fill color for the lip surface._cols: string — Stroke color for the contours and internal accents.
Returns
SVG.G— Group containing the filled and stroked lips.
Example
const r = {
x: art.w / 2 - 3 * art.l,
y: art.h / 2 - 1.5 * art.l,
w: 6 * art.l,
h: 3 * art.l
};
const lips = art.drawLips(r, '#f06292', '#880e4f');
lips.opacity(0.95);drawHeart()
Draws a stylized heart shape inside the given rectangle using two mirrored lobes and a pointed base. The heart contour is first filled with drawCurve, then outlined on both sides with drawStrokeCurve.
Parameters
_rect: Object — Bounding box for the heart._colf: string — Fill color for the heart interior._cols: string — Stroke color for the contour.
Returns
SVG.G— Group containing the filled and stroked heart.
Example
const r = {
x: art.w / 2 - 3 * art.l,
y: art.h / 2 - 3 * art.l,
w: 6 * art.l,
h: 6 * art.l
};
const heart = art.drawHeart(r, '#ff8a80', '#c62828');
heart.opacity(0.95);drawEye()
Draws a stylized eye with upper and lower lids, iris, and pupil. The eye is constructed from several polylines (eyelids and highlight) rendered with drawStrokeCurve, plus concentric circles for the iris and pupil. The `dx` parameter controls overall scale.
Parameters
xe: number — X coordinate of the inner eye corner.ye: number — Y coordinate of the inner eye corner.dx: number — Horizontal scale of the eye; roughly one fifth of the head width.dr: number — Direction/sign; usually `1` for right-facing and `-1` for left-facing.cols: string — Stroke color for the eyelids and pupil.
Returns
SVG.G— Group containing the eye strokes and fills.
Example
const eye = art.drawEye(art.w / 2 - 5 * art.l, art.h / 2, art.l, 1, '#212121');
eye.opacity(0.95);Typography 3
drawWriting()
Generates a stroke resembling informal writing inside the given rectangle. The shape varies through five pattern types that adjust the control points used for the curve.
Parameters
_rect: Object — Area that defines the writing bounds._cols: string — Stroke color used for the writing._type: number — Optional pattern selector from 1 to 5.
Example
for (let x = 50; x < 500; x += 50) {
let r = { x: x, y: 60, w: 50, h: 120 };
art.drawWriting(r, '#445566', undefined);
}drawLetter()
Draws a single letter using a minimal geometric construction. The letter is treated as a visual element rather than typographic glyph.
Parameters
_ch: String — Character to draw._rect: Object — Bounding rectangle with x, y, w, h properties._s: Number — Size of stroke._colf: String — Fill color._cols: String — Stroke color.
Example
art.drawLetter('A', { x: 300, y: 150, w: 140, h: 180 }, 3, '#333333', '#111111')drawWord()
Draws a word by composing multiple letters with controlled spacing. The result behaves as a graphic mark rather than readable text.
Parameters
_ch: String — Word to draw._rect: Object — Bounding rectangle for starting char with x, y, w, h properties._colf: String — Fill color._cols: String — Stroke color.
Example
art.drawWord('CITY', { x: 50, y: 150, w: 40, h: 50 }, 3, '#333333', '#111111')Branding 1
sign()
Adds the artist's signature "pb67" to the current SVG composition. The signature is drawn using Comic Sans MS font and placed near the bottom-right corner of the canvas.
Parameters
_col: string — Color used for the signature text.
Returns
void
Example
art.sign('#151517');