Z Indexing

Python Code

from dataclasses import replace

from svan2d import (
    CircleState,
    Color,
    ConverterType,
    NumberFormat,
    NumberState,
    Point2D,
    RectangleState,
    VElement,
    VScene,
    VSceneExporter,
    configure_logging,
)


configure_logging(level="INFO")

CENTER_CIRCLE = Color("#FDBE02")
SURROUNDING_CIRCLES = Color("#AA0000")


def main():

    # Create the scene
    scene = VScene(width=256, height=256, background=Color("#000017"))

    center_circle_start = CircleState(radius=70, fill_color=CENTER_CIRCLE)
    center_circle_end = CircleState(radius=70, fill_color=CENTER_CIRCLE, z_index=5)

    center_element = VElement().keystates([center_circle_start, center_circle_end])

    c1 = CircleState(
        radius=40, pos=Point2D(0, -70), z_index=1, fill_color=SURROUNDING_CIRCLES
    )
    c2 = replace(c1, pos=Point2D(70, 0), z_index=2)
    c3 = replace(c1, pos=Point2D(0, 70), z_index=3)
    c4 = replace(c1, pos=Point2D(-70, 0), z_index=4)

    surrounding_elements = [VElement().keystates([s, s]) for s in [c1, c2, c3, c4]]

    scene = scene.add_element(center_element)
    scene = scene.add_elements(surrounding_elements)

    # Export to mp4

    # Create the exporter
    exporter = VSceneExporter(
        scene=scene,
        converter=ConverterType.PLAYWRIGHT_HTTP,
        output_dir="output/",
    )

    exporter.to_mp4(
        filename="z_indexing",
        total_frames=60,
        framerate=30,
        png_width_px=1024,
        num_thumbnails=100,
    )


if __name__ == "__main__":
    main()

Remarks

• SVG follows the painter’s algorithm: elements are rendered in document order, with later elements painted over earlier ones. Unlike CSS, SVG has no native z-index for controlling stacking. Svan2D introduces z-index–like behavior by sorting elements before rendering—objects with lower z-values are painted first (behind), while higher values are painted later and appear on top.

• Z-index is interpolated like any other state value. In this example, the central circle’s z-index transitions from 0 to 5, causing it to gradually move in front of the surrounding circles, which have z-index values from 1 to 4, over time.