# tiny-isprite — SVG color & motion lab

Recolor SVG artwork, animate its fills, and export the result for your own site.
The browser editor is free to try without an account. Uploaded SVGs and saved
editor drafts stay in your browser; they are not uploaded to an animation server.

## Open the tools

- [Try colors & motion](https://tiny-isprite.com/editor/)
- [See an exported Orbit animation](https://tiny-isprite.com/demos/orbit/)
- [Package documentation and source](https://github.com/Dynation/tiny-isprite)
- [npm package](https://www.npmjs.com/package/tiny-isprite)

## Recolor an SVG

1. Load a sample or use Add SVGs to select your own artwork.
2. Choose Single icon for standalone artwork or Sprite for an icon collection.
3. Choose Use currentColor, Keep original colors, or Generate CSS variables.
4. With generated variables, enable Include multicolor fills and strokes to
   expose the editable fill/stroke palette. The Colors panel has light and dark
   palette controls. Preview themes are independent of the site's interface theme.
5. Change the named color variables and preview the result. Line thickness and
   rotation controls are also available. Zoom and pan affect the preview only.

currentColor inherits the surrounding CSS color. Fixed SVG fills are not
recolored by setting color; use generated variables for those paints.

## Animate fills

1. Select Fill animation and enable animation.
2. Choose the fill effect and its origin. Configure each paint's start time,
   duration and final fill percentage.
3. Use the timeline to inspect the transition. Its current time can help choose
   the start time of the next paint in a sequential animation.
4. For detailed adjustments, enable Separate region origins. Select a region
   to open its popover and edit its origin and timing independently, even when
   several disconnected regions share a color. Tiny sampled regions usually
   need no individual adjustment.
5. Use the editor's guided animation tour for an interactive walkthrough.

## Export and integration

Use Downloads for the available output formats: standalone SVG, React component,
CSS variables, sprite output and the animation ZIP. Animation export includes a
portable Vanilla JavaScript player, prepared maps/timings and a React wrapper.
The exported player does not run the editor's graph computations at playback time.
Serve the ZIP's files over HTTP; ES modules do not run by double-clicking an HTML
file from disk. The Orbit showcase is a working standalone example.

Light/dark palette changes in the exported player preserve animation progress.
The player respects prefers-reduced-motion. Exported examples can run without
loading the editor or using an external animation service.

## Browser agent tools

Supporting browsers can discover the editor's WebMCP tools for SVG import,
palette edits, animation timing/regions, preview and local export preparation.
UI and agent edits share revision checks and Undo/Redo. The ordinary editor also
works without WebMCP. Read the [agent tool contract and workflow guide](https://tiny-isprite.com/agent-guide.md).

## Package quick start and agent index

The documented npm release is **tiny-isprite 2.2.0** (Node.js 18+; React 17/18/19).
Read the [complete CLI, React and browser API quick start](https://tiny-isprite.com/get-started.md)
and the [agent documentation index](https://tiny-isprite.com/llms.txt).

## Install the developer package

```sh
npm install tiny-isprite
```

The package provides a Node/CLI SVG sprite generator, a React Icon component,
and the filesystem-free tiny-isprite/browser API. See the package documentation
for current API signatures, content hashing and cache-safe sprite URLs.
The interactive editor is a separate application.

[Support Dynation on Ko-fi](https://ko-fi.com/dynation)