skills.rest
VKirill
VKirillCOMMUNITY
Explore all skills by this author →
GitHub

svg-canvas-craft

Implement SVG animations and Canvas2D rendering with hi-DPI scaling.

15|2|Updated May 23, 2026
Search Tags:#accessibility#svgo#clip-path#offscreencanvas#canvas2d#svg-animation#draw-on
One-click install
npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill svg-canvas-craft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svg-canvas-craft
Source: https://github.com/VKirill/antigravity-for-claude-code/tree/main/skills/svg-canvas-craft
Command: npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill svg-canvas-craft

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you implement high-performance, accessible, and production-ready SVG animations and Canvas2D rendering so your interactive visuals stay smooth and correct across devices.

Core Features & Use Cases

  • SVG animation recipes: draw-on using stroke-dasharray/stroke-dashoffset, path morph approaches, and interactive reveal patterns.
  • SVG filter and masking techniques: practical gooey/turbulence-style filters (e.g., feGaussianBlur, feColorMatrix) and clip-path/clipPath spotlight reveals.
  • Production optimization & rendering quality: svgo configuration that preserves important accessibility/ID behavior, plus hi-DPI Canvas setup with devicePixelRatio.

Use case example: you need an accessible animated inline SVG logo (including draw-on), plus a crisp hi-DPI particle canvas background with optional OffscreenCanvas + worker offloading for performance.

Quick Start

Ask the AI to apply the svg-canvas-craft reference recipes to your specific effect request and include accessibility-friendly inline SVG markup, an svgo-safe optimization plan, and a hi-DPI Canvas rendering approach tailored to your target device behavior.

Frequently Asked Questions about svg-canvas-craft

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I animate an SVG line draw-on effect using stroke-dasharray?▼

SVG draw-on animations use stroke-dasharray and stroke-dashoffset properties to create a progressive path drawing effect. This approach animates the stroke rendering sequentially, enabling interactive reveal patterns for accessible inline SVG graphics.

Why does my Canvas2D rendering look blurry on hi-DPI displays?▼

Canvas2D rendering appears blurry on hi-DPI displays without proper devicePixelRatio scaling. You must scale the canvas context dimensions by devicePixelRatio to ensure crisp, pixel-perfect rendering and avoid UI jank on high-resolution screens.

How do I optimize SVG files with SVGO without breaking accessibility IDs?▼

SVGO optimization requires specific configuration to preserve accessibility IDs, titles, and descriptions. You must configure SVGO plugins to retain these elements while still minifying the SVG markup for production performance.

Can I use OffscreenCanvas with a worker to improve Canvas2D performance?▼

OffscreenCanvas supports worker offloading to improve Canvas2D rendering performance. By moving rendering tasks to a web worker via OffscreenCanvas, you prevent UI thread blocking and maintain smooth interface interactions during heavy visual processing.

How do clip-path and gooey SVG filters work for interactive reveal effects?▼

SVG clip-path creates reveal effects by masking visible regions, while gooey filters combine feGaussianBlur and feColorMatrix to merge separate shapes into organic, fluid transitions. These techniques enable interactive spotlight reveals and liquid visual effects.

Related Skills

Explore More Design & Creative Skills→
dz07dz07

SVG

Identifies and fixes common SVG pitfalls in design-system workflows.

Community
Intermediate
Impertio-StudioImpertio-Studio

webgpu-core-workers

Move WebGPU rendering and compute work into a dedicated worker with OffscreenCanvas.

Official
Advanced
Ven0m0Ven0m0
6

svg

Create, optimize, and transform SVG graphics with SVGO.

Community
Advanced
DatTran26DatTran26

ck:shader

Generate GLSL fragment shaders for procedural graphics in WebGL and Three.js contexts.

Community
Advanced