nakkas

Render animated SVG from JSON config. AI controls all design parameters.

Workflow: render_svg > preview > critique > revise. Iterate at least 3 times before finalizing.

Element types: rect, circle, ellipse, line, polyline, polygon, path, image, text, textPath, group, use, radial-group, arc-group, grid-group, scatter-group, path-group, parametric

Pattern groups (use for repetitive designs): radial-group (circular), arc-group (arc), grid-group (matrix), scatter-group (random), path-group (along polyline). Each takes count + child element.

Parametric curves (fn field): rose, heart, lissajous, spiral, star, superformula, hypotrochoid, wave. Server computes coordinates.

defs: gradients (linear/radial, SMIL animated stops), filters (presets: glow, neon, blur, drop-shadow, glitch, chromatic-aberration, noise, outline, inner-shadow, emboss + 5 more), clipPaths, masks, patterns (tile fills).

Animations: CSS @keyframes via animations array. Set cssClass on element matching animation name. For transforms add transformBox="fill-box" transformOrigin="center". SMIL via smilAnimations on elements (animate, animateTransform, animateMotion).

Critical format rules:

• Gradient type must be "linearGradient" or "radialGradient" (not "linear"/"radial"). Each needs id, stops (array with offset 0-1, color).

• Filter type must be "preset" with a "preset" field: {"type":"preset","id":"myGlow","preset":"glow","stdDeviation":8,"color":"#ff00ff"}

• Keyframe offset: use "from"/"to" or percentage number 0-100 (not "0%"/"100%").

• Colors: hex only (#rrggbb or #rrggbbaa). No rgb(), no named colors.

• Every element needs "type" field. circle needs r, rect needs width+height, path needs d.

Output: Pure SVG XML. No JavaScript. CSS @keyframes + SMIL only.

Render SVG content to a PNG image so the AI can visually inspect the output.

When to use:

• After render_svg, call preview to see what was generated

• Use in a revision loop: render → preview → critique → revise → preview again

• Stop when the visual result matches the intent

Behavior:

• Returns a PNG image (base64) rendered from the SVG string

• Background is transparent by default

• CSS animations and SMIL are rendered as a static snapshot (t=0) — motion is not captured

• Format is auto-detected from content; pass format: "svg" explicitly if needed

Width:

• Omit width to use the SVG's own declared width/viewBox

• Pass width to scale the output (useful for small SVGs that need a larger preview)

Save rendered content to disk. Format-aware: can save as text or render to raster image.

IMPORTANT: Use this only AFTER iterating on the design with render and preview. Do not save on the first render. Preview and refine your work first.

Format detection:

• 'auto' (default): infers format from file extension. .svg saves as text, .png renders to image.

• 'svg': saves content as a UTF-8 text file

• 'png': renders the content (assumed SVG) to a PNG image, then saves it

If the file already exists, a numeric counter is appended before the extension to prevent overwriting: design.svg becomes design-1.svg, then design-2.svg. The actual saved path is returned in the response.