tessl/pypi-reactpy

Reactive user interfaces with pure Python

—

Pending

Overview

Eval results

Files

SVG Elements

Name: tessl/pypi-reactpy
Author: tessl

SVG element constructors for creating scalable vector graphics and data visualizations. ReactPy provides functions for all standard SVG elements following the same pattern as HTML elements.

Capabilities

Element Constructor Pattern

All SVG elements follow the same constructor pattern:

def svg_element_name(*children, **attributes) -> VdomDict: ...

Parameters:

*children: Child elements (text, other SVG elements, or Component instances)
**attributes: SVG attributes as keyword arguments

Returns: VdomDict representing the SVG element

Container Elements

Elements for grouping and organizing SVG content:

def svg(*children, **attributes) -> VdomDict: ...
def g(*children, **attributes) -> VdomDict: ...
def defs(*children, **attributes) -> VdomDict: ...
def desc(*children, **attributes) -> VdomDict: ...
def metadata(*children, **attributes) -> VdomDict: ...
def title(*children, **attributes) -> VdomDict: ...
def symbol(*children, **attributes) -> VdomDict: ...
def use(**attributes) -> VdomDict: ...
def switch(*children, **attributes) -> VdomDict: ...

Usage Examples:

from reactpy import svg

# Basic SVG container
my_svg = svg.svg(
    {"width": 200, "height": 200, "viewBox": "0 0 200 200"},
    svg.g(
        {"transform": "translate(50, 50)"},
        svg.circle({"cx": 50, "cy": 50, "r": 40, "fill": "blue"})
    )
)

Shape Elements

Basic geometric shapes:

def circle(**attributes) -> VdomDict: ...
def ellipse(**attributes) -> VdomDict: ...
def line(**attributes) -> VdomDict: ...
def polygon(**attributes) -> VdomDict: ...
def polyline(**attributes) -> VdomDict: ...
def rect(**attributes) -> VdomDict: ...
def path(**attributes) -> VdomDict: ...

Usage Examples:

shapes = svg.svg(
    {"width": 300, "height": 200},
    svg.rect({"x": 10, "y": 10, "width": 50, "height": 30, "fill": "red"}),
    svg.circle({"cx": 100, "cy": 50, "r": 25, "fill": "green"}),
    svg.line({"x1": 150, "y1": 10, "x2": 200, "y2": 60, "stroke": "black"}),
    svg.polygon({"points": "220,10 250,50 190,50", "fill": "yellow"}),
    svg.path({"d": "M 10 80 Q 95 10 180 80", "stroke": "blue", "fill": "none"})
)

Text Elements

Elements for text content in SVG:

def text(*children, **attributes) -> VdomDict: ...
def textPath(*children, **attributes) -> VdomDict: ...
def tspan(*children, **attributes) -> VdomDict: ...

Usage Examples:

text_svg = svg.svg(
    {"width": 300, "height": 100},
    svg.text(
        {"x": 10, "y": 30, "font-family": "Arial", "font-size": "16"},
        "Hello SVG!"
    ),
    svg.text(
        {"x": 10, "y": 60},
        svg.tspan({"fill": "red"}, "Red text "),
        svg.tspan({"fill": "blue"}, "Blue text")
    )
)

Paint Server Elements

Elements for gradients and patterns:

def linearGradient(*children, **attributes) -> VdomDict: ...
def radialGradient(*children, **attributes) -> VdomDict: ...
def pattern(*children, **attributes) -> VdomDict: ...
def stop(**attributes) -> VdomDict: ...

Usage Examples:

gradient_svg = svg.svg(
    {"width": 200, "height": 100},
    svg.defs(
        svg.linearGradient(
            {"id": "grad1", "x1": "0%", "y1": "0%", "x2": "100%", "y2": "0%"},
            svg.stop({"offset": "0%", "stop-color": "rgb(255,255,0)"}),
            svg.stop({"offset": "100%", "stop-color": "rgb(255,0,0)"})
        )
    ),
    svg.rect({"width": 200, "height": 100, "fill": "url(#grad1)"})
)

Structural Elements

Elements for clipping, masking, and markers:

def clipPath(*children, **attributes) -> VdomDict: ...
def mask(*children, **attributes) -> VdomDict: ...
def marker(*children, **attributes) -> VdomDict: ...

Filter Elements

Elements for visual effects and filters:

def filter(*children, **attributes) -> VdomDict: ...
def feBlend(**attributes) -> VdomDict: ...
def feColorMatrix(**attributes) -> VdomDict: ...
def feComponentTransfer(*children, **attributes) -> VdomDict: ...
def feComposite(**attributes) -> VdomDict: ...
def feConvolveMatrix(**attributes) -> VdomDict: ...
def feDiffuseLighting(*children, **attributes) -> VdomDict: ...
def feDisplacementMap(**attributes) -> VdomDict: ...
def feDistantLight(**attributes) -> VdomDict: ...
def feDropShadow(**attributes) -> VdomDict: ...
def feFlood(**attributes) -> VdomDict: ...
def feFuncA(**attributes) -> VdomDict: ...
def feFuncB(**attributes) -> VdomDict: ...
def feFuncG(**attributes) -> VdomDict: ...
def feFuncR(**attributes) -> VdomDict: ...
def feGaussianBlur(**attributes) -> VdomDict: ...
def feImage(**attributes) -> VdomDict: ...
def feMerge(*children, **attributes) -> VdomDict: ...
def feMergeNode(**attributes) -> VdomDict: ...
def feMorphology(**attributes) -> VdomDict: ...
def feOffset(**attributes) -> VdomDict: ...
def fePointLight(**attributes) -> VdomDict: ...
def feSpecularLighting(*children, **attributes) -> VdomDict: ...
def feSpotLight(**attributes) -> VdomDict: ...
def feTile(**attributes) -> VdomDict: ...
def feTurbulence(**attributes) -> VdomDict: ...

Usage Examples:

filtered_svg = svg.svg(
    {"width": 200, "height": 200},
    svg.defs(
        svg.filter(
            {"id": "blur"},
            svg.feGaussianBlur({"in": "SourceGraphic", "stdDeviation": "3"})
        )
    ),
    svg.circle({
        "cx": 100, "cy": 100, "r": 50,
        "fill": "red", "filter": "url(#blur)"
    })
)

Animation Elements

Elements for SVG animations:

def animate(**attributes) -> VdomDict: ...
def animateMotion(*children, **attributes) -> VdomDict: ...
def animateTransform(**attributes) -> VdomDict: ...
def set(**attributes) -> VdomDict: ...

Usage Examples:

animated_svg = svg.svg(
    {"width": 200, "height": 200},
    svg.circle(
        {"cx": 100, "cy": 100, "r": 50, "fill": "blue"},
        svg.animate({
            "attributeName": "r",
            "values": "30;50;30",
            "dur": "2s",
            "repeatCount": "indefinite"
        })
    )
)

Other Elements

Additional SVG elements:

def foreignObject(*children, **attributes) -> VdomDict: ...
def image(**attributes) -> VdomDict: ...
def style(*children, **attributes) -> VdomDict: ...

Common Attributes

SVG elements support various attributes:

# Position and size
element = svg.rect({"x": 10, "y": 20, "width": 100, "height": 50})

# Styling
styled = svg.circle({
    "cx": 50, "cy": 50, "r": 25,
    "fill": "red",
    "stroke": "black",
    "stroke-width": 2,
    "opacity": 0.8
})

# Transforms
transformed = svg.g(
    {"transform": "rotate(45) translate(10, 10) scale(1.5)"},
    svg.rect({"width": 50, "height": 30})
)

Install with Tessl CLI