Tag: svg

Generates self-contained HTML+SVG diagrams in an editorial style: architecture, flowcharts, sequence, swimlane, Gantt and dozens more types. Can match brand colors from a website and redraw imported Mermaid, draw.io and Excalidraw sources.

SVG optimizer CLI and Node.js library: shrinks SVGs by removing editor metadata, comments, hidden elements and redundant attributes, processes whole directories recursively, and gives fine control through plugin config.

Converts raster images like JPG and PNG to SVG, handling color tracing, black-and-white line art and unevenly lit scans, for vectorizing logos, illustrations and old drawings. The CLI is a 1.0 preview installed with cargo (needs Rust); a desktop app is also available.

Generates template-driven charts as single-file HTML: picks a chart from real Lupi, Basics, Glance, Maps and Interactive gallery implementations based on data shape, or fills one of 12 Chinese and English report templates. Defaults to Mono grayscale with semantic color presets. Written in Chinese.

High-fidelity SVG rendering library and CLI that exports SVG icons and illustrations to PNG at chosen sizes, good for batch asset export. No system dependencies, with pixel-identical output across platforms. No SVG animation support; install with cargo or grab a macOS build from Releases.

Draws a code change or part of a codebase as an animated architecture or data-flow diagram. The agent writes a JSON graph, validates and renders it to SVG with the PR Lens CLI, then pushes it to a prlens.dev canvas or attaches it to a GitHub, GitLab or Bitbucket pull request.

Exports Figma components (such as a full icon set) to SVG in bulk and styles like colors, text and shadows to Sass/SCSS variables or Style Dictionary tokens, keeping site icons and styles in sync with designs. Needs Node.js, a Figma token (FIGMA_TOKEN) and the matching output plugins.

Builds frosted and liquid-glass UI: backdrop-filter blur, translucent fills, bright edge highlights and layered shadows, SVG displacement for refraction, hover, scroll and entrance motion, plus accessible reduced-transparency fallbacks.

Animates SVG with stroke draw-on effects, path morphing via GSAP MorphSVG or Flubber, motion along a path, animated icon state changes, and gradient or filter animation, choosing between CSS, SMIL and GSAP per task.

Guides the agent in building SVG icon components that morph between any two icons by moving lines instead of crossfading. Every icon uses exactly three lines, unused ones collapse to the center, and grouped variants rotate with springs. Examples use React and Motion and respect reduced motion.