Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Canvas Generative Art

Performance-minded rules and code patterns for algorithmic art on Canvas 2D — particles, flow fields, noise, fractals and L-systems.

Dev & CodingIntermediate★ 382⑂ 28AI score 8/10Last updated: Sep 25, 2026

What it does

  • Solid Canvas 2D setup: DPR-aware sizing for crisp Retina output, ResizeObserver resize handling, and a requestAnimationFrame loop with a capped delta time.
  • Noise selection: a comparison table of Perlin / Simplex / Worley plus practical rules (scale input coords, stack octaves via fBm, seed for reproducibility).
  • Particle systems: a pre-allocated pool with swap-remove so you never allocate or splice at runtime.
  • Flow fields & L-systems: build a noise-driven angle grid to steer particles; string rewriting plus turtle graphics for fractal drawing.
  • Explicit "Do Not" list: no clearRect when you want trails, no getImageData inside the loop, never ignore DPR, never allocate in the hot loop — each with BAD/GOOD snippets.

Who it's for

  • Frontend developers doing creative coding or interactive backgrounds.
  • Design-minded devs adding animated artwork to hero/landing sections.
  • Anyone debugging frame drops with thousands of particles.

Example uses

  1. "Add a landing-page background with 5,000 particles following a flow field" → pool pattern + noise angle grid + trail fade.
  2. "My canvas looks blurry on Retina" → apply the DPR-aware setupCanvas and separate CSS sizing.
  3. "Draw an L-system tree with an iteration slider" → axiom/rules/angle structure plus a turtle-graphics renderer.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/AThevon/genjutsu/HEAD/skills/_jutsu/canvas-generative/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/_jutsu/canvas-generative folder from the GitHub repo AThevon/genjutsu into my ~/.claude/skills/canvas-generative/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/AThevon/genjutsu.git /tmp/genjutsu && mkdir -p ~/.claude/skills && cp -r /tmp/genjutsu/skills/_jutsu/canvas-generative ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal and clone the repo: git clone https://github.com/AThevon/genjutsu.git
  2. Make sure the skills folder exists: mkdir -p ~/.claude/skills
  3. Copy the whole skill folder (so references/ comes along): cp -r genjutsu/skills/_jutsu/canvas-generative ~/.claude/skills/
  4. To also get the linked files (_jutsu/VERSIONS.md, motion-principles, threejs-r3f), copy the parent folder: cp -r genjutsu/skills/_jutsu ~/.claude/skills/
  5. Restart Claude Code and confirm canvas-generative appears in your skill list.
  6. Try a prompt like "Build a Canvas particle flow-field background" to trigger it.
View source on GitHub ↗License: NOASSERTION