← circus
Path Morphing
Smoothly animate from one SVG path to another
Python Code
from dataclasses import replace
from svan2d.converter.converter_type import ConverterType
from svan2d.core.logger import configure_logging
from svan2d.velement import VElement
from svan2d.vscene import VScene
from svan2d.vscene.vscene_exporter import VSceneExporter
from svan2d.component import pathtate, PathRenderer
from svan2d.core.color import Color
configure_logging(level="INFO")
START_COLOR = Color("#FDBE02")
END_COLOR = Color("#AA0000")
START_PATH = "M -100,0 L 100,0"
END_PATH = "M -100,0 C -50,-100 50,100 100,0"
def main():
# Create the scene
scene = VScene(width=256, height=256, background=Color("#000017"))
start_state = pathtate(
data=START_PATH,
fill_color=None,
stroke_color=START_COLOR,
stroke_width=4,
)
end_state = replace(
start_state,
data=END_PATH,
stroke_color=END_COLOR,
stroke_width=8,
stroke_opacity=0.5,
)
# Create a text renderer for all numbers
renderer = PathRenderer()
element = VElement(
renderer=renderer,
keystates=[start_state, end_state],
)
# Add all elements to the scene
scene.add_element(element)
# Create the exporter
exporter = VSceneExporter(
scene=scene,
converter=ConverterType.PLAYWRIGHT,
output_dir="output/",
)
# Export to mp4
exporter.to_mp4(
filename="path_morphing",
total_frames=60,
framerate=30,
png_width_px=1024,
)
if __name__ == "__main__":
main()
Remarks
-
svan2d fully normalizes path by converting all standard SVG commands (L, H, V, Q, T, S, A) into a sequence of absolute Cubic Bézier curves. This standardization enable morphing for a wider range of path by making all segments the most generic curve type.
-
Current Limitation: Successful interpolation still requires the two normalized path to match exactly in command count and order.