ƒ(x)
MATH.ART
97

Victorian Botanical Vine Filigree

Victorian silversmith and fine jewelry scrollwork featuring blossoming acanthus leaves, delicate gold wire feather venation, and curving vine stems that coil into Fibonacci spiral bud flourishes.

Playground
60 FPS • Canvas 2D
Click + Drag to interact with field
</>

Full Executable Algorithm Code 

// 065 - Victorian Botanical Vine Filigree (botany)
// 1:1 Original algorithm engine source
function createBotanicalFiligrane() {
  return {
    setup() {
    },
    render(context, timeState, params) {
      const { ctx, width, height } = context;
      const growthSpeed = Number(params.growthSpeed ?? 0.5);
      const tendrils = Math.max(3, Math.min(12, Math.round(Number(params.leafTendrils ?? 6))));
      const budCoils = Math.max(2, Math.min(8, Math.round(Number(params.spiralBuds ?? 4))));
      const wireGlow = Number(params.wireGlow ?? 0.9);
      const t = timeState.time * growthSpeed;
      ctx.fillStyle = "#060706";
      ctx.fillRect(0, 0, width, height);
      const cx = width * 0.5;
      const cy = height * 0.5;
      const maxR = Math.min(width, height) * 0.44;
      ctx.save();
      ctx.translate(cx, cy);
      const goldHue = 46;
      const leafHue = 92;
      const coreR = maxR * 0.14;
      for (let p = 0; p < tendrils; p++) {
        const ang = p / tendrils * Math.PI * 2 + t * 0.1;
        const pLeafLen = coreR * (1.2 + 0.3 * Math.sin(t * 2 + p));
        ctx.beginPath();
        ctx.moveTo(0, 0);
        const cpx1 = Math.cos(ang - 0.25) * pLeafLen;
        const cpy1 = Math.sin(ang - 0.25) * pLeafLen;
        const cpx2 = Math.cos(ang + 0.25) * pLeafLen;
        const cpy2 = Math.sin(ang + 0.25) * pLeafLen;
        const tipX = Math.cos(ang) * (pLeafLen * 1.3);
        const tipY = Math.sin(ang) * (pLeafLen * 1.3);
        ctx.quadraticCurveTo(cpx1, cpy1, tipX, tipY);
        ctx.quadraticCurveTo(cpx2, cpy2, 0, 0);
        ctx.fillStyle = hsla(goldHue, 85, 65, 0.25);
        ctx.fill();
        ctx.strokeStyle = hsla(goldHue + 5, 90, 75, 0.85);
        ctx.lineWidth = 1.3;
        ctx.stroke();
      }
      for (let tr = 0; tr < tendrils; tr++) {
        const baseAngle = tr / tendrils * Math.PI * 2;
        ctx.save();
        ctx.rotate(baseAngle + t * 0.06);
        const vinePoints = [];
        const vineSteps = 60;
        ctx.beginPath();
        for (let i = 0; i <= vineSteps; i++) {
          const u = i / vineSteps;
          const arcAngle = u * Math.PI * 1.25;
          const r = coreR + (maxR - coreR) * Math.pow(u, 0.9);
          const lateralWarp = Math.sin(u * Math.PI * 2 + t) * (maxR * 0.12 * (1 - u));
          const vx = Math.cos(arcAngle * 0.6) * r + lateralWarp;
          const vy = Math.sin(arcAngle * 0.6) * r;
          vinePoints.push({ x: vx, y: vy });
          if (i === 0) ctx.moveTo(vx, vy);
          else ctx.lineTo(vx, vy);
        }
        ctx.strokeStyle = hsla(goldHue + Math.sin(t * 2 + tr) * 6, 92, 70, 0.85 * wireGlow);
        ctx.lineWidth = 2.2;
        ctx.stroke();
        for (let s = 1; s <= 5; s++) {
          const stemIdx = Math.floor(s / 6 * vineSteps);
          const stemPt = vinePoints[stemIdx];
          const side = s % 2 === 0 ? 1 : -1;
          const leafLen = maxR * 0.22 * (1 - s / 7);
          const leafAngle = Math.PI * 0.45 * side + s * 0.2;
          const lx = stemPt.x + Math.cos(leafAngle) * leafLen;
          const ly = stemPt.y + Math.sin(leafAngle) * leafLen;
          ctx.beginPath();
          ctx.moveTo(stemPt.x, stemPt.y);
          const ctrlX = stemPt.x + Math.cos(leafAngle - 0.3 * side) * (leafLen * 0.7);
          const ctrlY = stemPt.y + Math.sin(leafAngle - 0.3 * side) * (leafLen * 0.7);
          ctx.quadraticCurveTo(ctrlX, ctrlY, lx, ly);
          const ctrl2X = stemPt.x + Math.cos(leafAngle + 0.3 * side) * (leafLen * 0.7);
          const ctrl2Y = stemPt.y + Math.sin(leafAngle + 0.3 * side) * (leafLen * 0.7);
          ctx.quadraticCurveTo(ctrl2X, ctrl2Y, stemPt.x, stemPt.y);
          ctx.fillStyle = hsla(leafHue, 60, 50, 0.15);
          ctx.fill();
          ctx.strokeStyle = hsla(goldHue - 6 + s * 4, 85, 75, 0.7);
          ctx.lineWidth = 1.1;
          ctx.stroke();
          for (let v = 1; v <= 3; v++) {
            const vFrac = v / 4;
            const vxStart = stemPt.x + (lx - stemPt.x) * vFrac;
            const vyStart = stemPt.y + (ly - stemPt.y) * vFrac;
            ctx.beginPath();
            ctx.moveTo(vxStart, vyStart);
            ctx.lineTo(
              vxStart + Math.cos(leafAngle + 0.8 * side) * (leafLen * 0.25 * (1 - vFrac)),
              vyStart + Math.sin(leafAngle + 0.8 * side) * (leafLen * 0.25 * (1 - vFrac))
            );
            ctx.strokeStyle = hsla(goldHue + 12, 75, 78, 0.4);
            ctx.lineWidth = 0.75;
            ctx.stroke();
          }
          ctx.fillStyle = hsla(goldHue + 20, 100, 88, 0.95);
          ctx.beginPath();
          ctx.arc(lx, ly, 1.8, 0, Math.PI * 2);
          ctx.fill();
        }
        const tip = vinePoints[vinePoints.length - 1];
        ctx.beginPath();
        const budSteps = budCoils * 18;
        for (let b = 0; b <= budSteps; b++) {
          const bt = b / budSteps;
          const theta = -bt * Math.PI * 2 * (budCoils * 0.85);
          const br = maxR * 0.16 * Math.pow(1 - bt, 1.4);
          const bx = tip.x + Math.cos(theta) * br;
          const by = tip.y + Math.sin(theta) * br;
          if (b === 0) ctx.moveTo(bx, by);
          else ctx.lineTo(bx, by);
        }
        ctx.strokeStyle = hsla(goldHue + 10, 95, 82, 0.9);
        ctx.lineWidth = 1.4;
        ctx.stroke();
        ctx.fillStyle = hsla(goldHue + 15, 100, 92, 0.95);
        ctx.beginPath();
        ctx.arc(tip.x, tip.y, 3.2, 0, Math.PI * 2);
        ctx.fill();
        ctx.fillStyle = hsla(goldHue + 15, 100, 95, 0.35);
        ctx.beginPath();
        ctx.arc(tip.x, tip.y, 7, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();
      }
      ctx.restore();
    }
  };
}

// Default parameters from content metadata
const defaultParams = [
  {
    "key": "leafTendrils",
    "label": "Tendril Arms",
    "type": "range",
    "min": 3,
    "max": 10,
    "step": 1,
    "defaultValue": 6,
    "description": "Number of radial vine stems"
  },
  {
    "key": "spiralBuds",
    "label": "Bud Coil Revolutions",
    "type": "range",
    "min": 2,
    "max": 6,
    "step": 1,
    "defaultValue": 4,
    "description": "Fibonacci spiral revolutions per terminus"
  },
  {
    "key": "growthSpeed",
    "label": "Growth Rate",
    "type": "range",
    "min": 0.2,
    "max": 1.8,
    "step": 0.1,
    "defaultValue": 0.5,
    "description": "Organic breathing and swaying rate"
  },
  {
    "key": "wireGlow",
    "label": "Gold Wire Sheen",
    "type": "range",
    "min": 0.4,
    "max": 1.4,
    "step": 0.1,
    "defaultValue": 0.9,
    "description": "Luster intensity of gold filaments"
  }
];

if (!window.__art_instances) window.__art_instances = {};
if (!window.__art_instances['botanical-filigrane']) {
  const inst = typeof createBotanicalFiligrane === 'function' ? createBotanicalFiligrane() : null;
  if (inst && inst.setup) {
    inst.setup({ ctx, width, height, dpr: 1, aspectRatio: width / height }, defaultParams);
  }
  window.__art_instances['botanical-filigrane'] = inst;
}

const instance = window.__art_instances['botanical-filigrane'];
if (instance && instance.render) {
  instance.render(
    { ctx, width, height, dpr: 1, aspectRatio: width / height },
    { time, deltaTime: dt, frameCount: Math.floor(time * 60), fps: 60 },
    defaultParams
  );
}
Edit in Interactive Playground Zero Dependencies • Standalone Canvas 2D
ƒ

Mathematical Formulation

high
Analytical Equation
pstem(u)=p0+r(u)[cos⁡(ku)sin⁡(ku)]+wlateral(u),rbud(θ)=r0(1−θ/θmax⁡)1.4\mathbf{p}_{\text{stem}}(u) = \mathbf{p}_0 + r(u) \begin{bmatrix} \cos(k u) \\ \sin(k u) \end{bmatrix} + \mathbf{w}_{\text{lateral}}(u), \quad r_{\text{bud}}(\theta) = r_0 (1 - \theta/\theta_{\max})^{1.4}
Click to expand
Compact Formula
stem = [cos(0.6ku)*r + warp, sin(0.6ku)*r], bud = tip + [cos(-θ)*r_bud, sin(-θ)*r_bud]

Mathematical Tags

#botanical #filigrane #filigree #victorian #acanthus #leaf #gold #vine #botany #jewelry
Author: Math Art Core Target: 60 FPS

Export & Embed: Victorian Botanical Vine Filigree

4K PNG Snapshot

High-resolution single frame render

WebM Video (5s Loop)

60 FPS browser-captured stream

Standalone JS Script

Complete executable Canvas 2D algorithm

HTML Iframe Embed

<iframe src="https://art.fazleyrabbi.xyz/embed/botanical-filigrane" width="500" height="500" frameborder="0" loading="lazy"></iframe>
ESC
↑↓ Navigate ↵ Select
101 Mathematical Artworks
☕

Support the Project

Keep mathematical creative coding alive & open source

Or via Direct Payoneer ($0 Fee)
Payoneer Customer ID: $0 Fee Direct
24076084

💡 Payoneer app: Go to Pay → Pay to recipient → Enter ID 24076084.

Thank you for supporting generative mathematical animations! ✨