Examples / proof sheets

Real inputs. Real SVGs.

Drag each control to compare the original PNG with the Kurviq output. The checkerboard makes transparent regions visible; captions report the actual file sizes shown.

PNG SVG

PNG: 302.9 KB SVG: 31.6 KB

Comet Badge

A four-color badge traced straight off its green screen. One --remove-background flag, no masking.

PNG SVG

PNG: 405.6 KB SVG: 219.8 KB

Robot Fox Sticker

A die-cut mascot lifted from a magenta chroma card: bold outlines, small details, and the white keyline survive.

PNG SVG

PNG: 352.9 KB SVG: 179.2 KB

Capsule Speaker

A softly modeled 3D object: gradient-aware tracing keeps volume and highlights while the green screen disappears.

Solar Drone Blueprint, traced SVG output

PNG SVG

PNG: 217.2 KB SVG: 59.2 KB

Solar Drone Blueprint

Fine cyan construction lines test precision, symmetry, and crisp technical geometry.

PNG SVG

PNG: 306.8 KB SVG: 62.4 KB

Pinwheel App Icon

A compact multicolor icon balances rounded geometry with restrained inner shading.

PNG SVG

PNG: 441.5 KB SVG: 159.0 KB

Walking Greenhouse

Organic pen strokes and coral wash accents showcase expressive line-art tracing.

Doctor, soft-shaded 3D icon, raster input

PNG SVG

PNG: 255.3 KB SVG: 85.3 KB

Doctor, soft-shaded 3D icon

Fine facial details, soft shadows, and rounded color transitions.

Accessibility, outline icon, raster input

PNG SVG

PNG: 161.2 KB SVG: 8.1 KB

Accessibility, outline icon

Thin strokes and enclosed shapes after background removal.

Air freight, gradient icon, raster input

PNG SVG

PNG: 202.6 KB SVG: 76.1 KB

Air freight, gradient icon

Layered objects, attached shadows, and gentle gradients.

Barcode, small outline icon, raster input

Barcode, small outline icon, traced SVG output

PNG SVG

PNG: 88.6 KB SVG: 2.4 KB

Barcode, small outline icon

Narrow bars and soft-alpha edges on a compact source.

Hospital, white-on-light icon, raster input

PNG SVG

PNG: 259.6 KB SVG: 47.6 KB

Hospital, white-on-light icon

Near-white structure protected from an almost-white background.

Appointments, multicolor icon, raster input

PNG SVG

PNG: 294.9 KB SVG: 69.1 KB

Appointments, multicolor icon

Small calendar details, smooth curves, and multiple materials.

PNG SVG

PNG: 651.1 KB SVG: 172.1 KB

Agent Loop Diagram

A dark neon diagram: --upscale 2 keeps the dashed radar rings and tick marks that a plain trace loses, then --consolidate 48 holds the file to 156 KB.

PNG SVG

PNG: 261.9 KB SVG: 18.2 KB

Landing Page Mockup

A full page mockup in 16 KB. --consolidate collapses the anti-aliased ramps, --snap recovers five circles and the button rectangles.

Choice Path Illustration, traced SVG output

PNG SVG

PNG: 281.0 KB SVG: 44.3 KB

Choice Path Illustration

Soft gradients preserved with --gradient_step 8, then consolidated and snapped: 30 rectangles and 4 circles become real primitives.

PNG SVG

PNG: 245.4 KB SVG: 5.3 KB

Rocket Panel

Flat editorial artwork in 5 KB. Twenty-three colors carry the whole illustration once near-identical fills are merged.

PNG SVG

PNG: 187.3 KB SVG: 37.7 KB

Impact Board

A shaded board panel: gradient flags keep the shading smooth while consolidation keeps the palette to 24 colors.

PNG SVG

PNG: 604.1 KB SVG: 67.1 KB

Frozen Org Iceberg

A large tonal illustration reduced to 64 perceptual colors. 68 KB with the tonal transitions intact.

PNG SVG

PNG: 91.9 KB SVG: 41.1 KB

Destination Marker

A small shaded marker: 21 snapped rectangles and a 24-color palette.

Opportunity and Threat, traced SVG output

PNG SVG

PNG: 409.3 KB SVG: 77.2 KB

Opportunity and Threat

A wide two-panel illustration traced with --snap only, keeping the full tonal range at 79 KB.

Draft → trace → author

The combination nothing else does: a generated raster draft, traced by Kurviq, then enhanced with authored SVG on top of the trace. Tracing with --structure groups leaves stable palette classes behind, and those classes are the handles the animation and interaction attach to.

Trace, then author onto the trace

// 1. trace the draft, asking for addressable output
const traced = convert(raster, { consolidate: true, structure: 'groups' });

// 2. the trace's own palette classes are the handles
const plan = A.animationPlan({ duration: 1400, stagger: 70 });
for (const c of paletteClasses(traced)) {
  plan.animate({ selector: '.' + c, property: 'opacity', from: 0, to: 1 });
}

A circuit tree growing from its roots, its node lamps lighting as the growth front reaches them — **Circuit bloom** · 40 KB · works as an image A year in five seconds: the tree grows up from its root, buds spring open just behind the growth front, each turns from traced orange to leaf green, and the canopy fades to autumn before it all begins again. The growth is an authored mask sweeping upward, which is the only thing that could work here, because the entire tree is a *single* traced path 18,881 characters long and no per-element timing can grow one path. The buds are per-element, banded by distance from the root. Their green is interpolated from each bud's own fill rather than a fixed start colour, so all six traced oranges survive it.

Checked against the target it ships to before it went on this page. That is the point of the toolbelt: an SVG that quietly does nothing, a hover state in an image or a selector the renderer ignores, fails the check instead of the user.

Animated and interactive

The two things a tracer cannot give you. Every piece below is generated by kurviq/author, and each was checked against the target it ships to before it went on this page.

Seven curves drawing themselves in sequence — **Plotter draw-on** · 8.3 KB · works as an image A genuine draw-on, not a reveal. Each curve carries a dash exactly its own length and the plan animates the offset to zero. This is only possible because the strokes are *authored* — animating `stroke-dashoffset` on a traced fill is a provable no-op, which is why the tracer's own `--animate draw` refuses to pretend otherwise.

How the draw-on works

const A = require('kurviq/author-animate');
const { strokedPath } = require('kurviq/author-stroke');

// A real draw-on. Only possible because the strokes are AUTHORED —
// animating stroke-dashoffset on a traced fill is a provable no-op.
const plan = A.animationPlan({ duration: 1800, stagger: 130 });
plan.animate({ selector: '.draw-0', property: 'stroke-dashoffset', from: L, to: 0 });

The solar system · 21 KB · inline only The sun and all eight planets, each orbiting at its own period, with Earth's moon and Saturn's rings along for the ride. Hover or tab to a planet to name it. Every orbit is a rotation about the sun; each planet counter-rotates at the same period so its label stays upright rather than tumbling. Verified in a browser by driving the animation clock: at a quarter of its own period, every planet has advanced exactly 90° and its distance from the sun has not changed by so much as a tenth of a pixel.

Tabbed panels · 4.3 KB · inline only Click a tab. Real state switching with no JavaScript — the URL fragment drives :target, so the panels work anywhere the SVG is inlined, including with the browser back button.

Hover-reveal chart · 4.8 KB · inline only Hover or tab through the bars: each highlights, reveals its value, and carries a native tooltip. Every bar is focusable and labelled, so the keyboard path works as well as the mouse one. Measured at 57,294 changed pixels between the resting and hover states.

Verified before publishing: the draw-on is valid as an <img> because declarative animation runs there; both interactive pieces are rejected for browser-img and are inlined instead. All three keep a correct static frame, and the animation ships a reduced-motion fallback that settles on the final state.

Authored, not traced

Kurviq also builds SVG. Everything below was generated by kurviq/author and verified through @tecsteps/kurviq-toolbelt — rendered, diffed, and validated against a measured target-support matrix. No hand-written SVG.

Compose, then verify

const { createScene, shapes } = require('kurviq/author');
const { linearGradient } = require('kurviq/author-paint');
const { strokedPath, arrowhead, withMarkers } = require('kurviq/author-stroke');
const { clipPath } = require('kurviq/author-mask');

// ...then verify it, rather than hoping:
const { evaluate, validateTarget } = require('@tecsteps/kurviq-toolbelt');
validateTarget(svg, 'browser-img').ok;   // false when it needs pointer events

**Area chart** · 4.0 KB gradient · clipPath · dashed grid · arrow marker Composed, not traced. A gradient area clipped to the plot box, dashed gridlines, and an annotated arrowhead.

**Filter specimen** · 4.9 KB blur · drop shadow · colour matrix · hatch · mask · symbols Six techniques in one document. The drop shadow is a five-primitive graph, so it renders in static rasterisers too.

Self-animating loader · 4.8 KB AnimationPlan → CSS · stagger · reduced motion The initial state lives only in the keyframes, so a renderer that ignores animation paints the final frame instead of nothing.

Interactive legend · 3.4 KB hover · focus-visible · ARIA · native tooltips Hover a stage, or tab through them. This one is inlined rather than loaded as an image, because an <img> receives no pointer events and the states would never fire. Kurviq refuses to declare it valid for that embedding.

Verified before publishing: the legend is rejected for browser-img and static rasterisers, the loader is rejected for static rasterisers only, and the other two are valid everywhere. Full walkthrough in the authoring guide.

Self-animating output

These are ordinary traces. --animate reveal adds a CSS-only entrance that staggers each colour group, with no JavaScript and no runtime library. The final frame is byte-identical to the unanimated trace, so any renderer that ignores CSS shows the correct static image, and prefers-reduced-motion switches the motion off.

Comet Badge · 13 KB

Pinwheel · 22 KB

Accessibility, self-animating SVG — Accessibility · 9 KB

Barcode, self-animating SVG — Barcode · 3 KB

Self-animating trace

npx kurviq --input icon.png --output icon.svg \
  --consolidate 8 --structure groups --animate reveal

Kurviq refuses above 120 animated elements — the blueprint example resolves to 187 groups and is rejected rather than emitting a stylesheet larger than the geometry. Run --consolidate first, or pass --animate-force.

File size is a tradeoff, not the score.

Flat outline art can become smaller as SVG. Detailed 3D icons can grow because gradients and soft edges need many colored paths. Choose settings at the display size and fidelity your product actually needs.

Reproduce the result.

Kurviq is deterministic for identical input bytes, options, version, and platform. Record all four when a generated asset is part of a reviewed build.

Find the matching recipe →