Skip to main content
100%

TouchDesigner SVG to SOP and After Effects Bodymovin / Lottie to TD-friendly SVG

✓ Published0🌍 Public
Aakre54
Last edited Jan 20, 2023
Created on Jan 20, 2023

This example demonstrates a workflow for converting Lottie animations into TouchDesigner-compatible SVG geometry. The Node.js script `clean_svg.js` uses `lottie-to-svg` to render each animation frame to SVG, then processes the output through SVGO, svg-flatten, and paper.js to resolve `<use>` references, flatten paths, and apply clipping masks. A companion Python script `svg_to_sop.py` parses the cleaned SVG paths with svgpathtools and converts them into TouchDesigner SOP geometry—cubic Béziers become Bézier SOPs and line segments become polygon SOPs. The result bridges After Effects Bodymovin/Lottie exports to TouchDesigner-friendly SVG files for further procedural manipulation.

AI-generated description

Similar vizzes

Loading thumbnail…

SVG path animation

This example animates the stroke of SVG path elements to create a continuous drawing effect. It uses D3.js (v3) with a queue to load an external SVG file containing complex path data, then applies an infinite, looping transition. The animation interpolates the `stroke-dasharray` attribute using `d3.interpolateString` and `transition.attrTween`, calculating the path’s total length with `getTotalLength()` to reveal each path progressively. The paths are styled with CSS, setting a black stroke on a transparent fill.

KKoGor
60% match
Loading thumbnail…

Fork of SVG Playing Around and Studying

This example generates a full-screen SVG landscape featuring a gradient sky, a sun, birds, and a tree, all composed with native SVG elements and CSS animations. The scene is built using JavaScript to create SVG nodes via `document.createElementNS`, while the sky and sun colors shift over a 24-second cycle through `animate` elements. Birds are duplicated and transformed using CSS `scale`, `translate`, and `rotate`, and the land and tree shapes are styled with inline CSS classes. The code references external SVG tutorials for the bird, sun, and land designs.

Zzaioris
60% match
Loading thumbnail…

Fork of SVG shapes and animation sandbox

This visualization demonstrates layered SVG shapes—sky bands, drifting clouds, and a pink flower—set in an animated landscape. The code uses raw SVG elements (`rect`, `circle`, `ellipse`, `path`) with inline styling and `<animateMotion>` to move cloud groups along curved paths over variable durations. The flower combines multicolored petals and a stem, while the sky is built from stacked colored rectangles. No external libraries are used; rendering relies entirely on native SVG and CSS, with the cloud animations driven by SMIL.

HHuy Nguyen
60% match
Loading thumbnail…

Fork of SVG shapes and animation sandbox

This visualization demonstrates layered SVG shapes and animations, featuring a horizontally striped sky in blue tones, animated clouds moving along curved paths at varying speeds, and a static pink flower with a green stem. The code uses SVG’s `animateMotion` to drift cloud groups along bezier-like paths, while rects and circles construct the background and flower. Rendered entirely in SVG, the example relies on inline paths and elements for the visual composition.

Ttomdao0
59% match
Loading thumbnail…

Fork of SVG shapes and animation sandbox

A sandbox of layered SVG shapes and animation, this visualization builds a stylized sky from stacked rectangular strips and drifts clouds along curved paths. It demonstrates how nested `<svg>` elements and the `animateMotion` API can move cloud groups across the scene, while a hand-drawn flower shows off vector shapes like circles and paths. The rendering relies entirely on inline SVG markup, with no external data, instead focusing on color, motion, and primitive geometry composition.

MMarcus Vinicius da Silveira Richa
59% match
Loading thumbnail…

Fork of SVG Playing Around and Studying

This piece shows an idyllic, animated landscape with a gradient sky, a sun, layered land, trees, and three birds. It is constructed entirely with procedural SVG elements, including paths and groups, and uses CSS animations. The scene is generated dynamically through a custom JavaScript engine that creates SVG elements via `document.createElementNS`, with the sky’s color shifts driven by SVG `<animate>` elements. The birds and landforms are built from static path data, while the sun appears as a moving element with a radial gradient fill. The work explores SVG structure and animation.

SSimran
59% match
Loading thumbnail…

Fork of SVG shapes and animation sandbox

A playful, abstract landscape built from layered SVG rectangles and moving cloud shapes, rendered in the browser. The sky is composed of stacked horizontal bands in various shades of blue, while larger and smaller cloud groups drift across the view using the SVG `<animateMotion>` element along specified motion paths. A pink flower is drawn with colored circles for petals around a central circle, connected by a green path stroke for the stem. The example uses raw SVG markup, inline CSS for full-page layout, and relies on native SVG animation APIs rather than JavaScript libraries.

AAndre J Denais
59% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This SVG example explores shape, color, and interactivity using custom paths and CSS transitions. A stylized funnel shape is rendered with a multi-stop linear gradient defined in SVG `<defs>`, creating a banded color effect. The page also includes a heart path with a dashed stroke that animates its offset on hover via CSS `transition`. Additional CSS demonstrates hover effects on a hidden division. The example uses plain SVG elements and CSS styling, including the `stroke-dasharray` and `stroke-dashoffset` properties for path animation.

Kkatebacon32
59% match