Styling & Visuals

LatticeSVG supports a rich set of CSS visual styling properties.

Box Model

Every node has a full box model: margin, padding, border.

from latticesvg import GridContainer, TextNode, Renderer

card = GridContainer(style={
    "width": "300px",
    "margin": "20px",
    "padding": "16px",
    "border": "2px solid #3498db",
    "background-color": "#ffffff",
    "grid-template-columns": ["1fr"],
})

card.add(TextNode("Card with full box model", style={"font-size": "14px"}))

Box model: margin, padding, border

box-sizing

Default is box-sizing: border-box — width includes padding and border.

Per-Direction Settings

style = {
    "padding-top": "8px",
    "padding-right": "16px",
    "padding-bottom": "8px",
    "padding-left": "16px",
    # Or use shorthand
    "padding": "8px 16px",
}

Border Radius

# Uniform
TextNode("Rounded card", style={
    "padding": "16px", "background-color": "#e3f2fd", "border-radius": "8px",
})

# Independent corners
TextNode("Asymmetric", style={
    "padding": "16px",
    "background-color": "#fce4ec",
    "border-top-left-radius": "20px",
    "border-bottom-right-radius": "20px",
})

Uniform and independent border-radius

Border Styles

Supports solid, dashed, and dotted styles, independently per side:

TextNode("Dashed border", style={"padding": "16px", "border": "2px dashed #e74c3c"})

TextNode("Mixed borders", style={
    "padding": "16px",
    "border-top": "3px solid #2ecc71",
    "border-right": "2px dashed #3498db",
    "border-bottom": "1px dotted #9b59b6",
    "border-left": "2px solid #e67e22",
})

Solid, dashed, and dotted border styles

Opacity

TextNode("Semi-transparent", style={"opacity": "0.5", "font-size": "24px", "color": "#e74c3c"})

Opacity effect

Gradient Backgrounds

# Linear gradient
TextNode("Linear", style={
    "padding": "24px", "color": "#fff",
    "background": "linear-gradient(135deg, #667eea, #764ba2)",
})

# Radial gradient
TextNode("Radial", style={
    "padding": "24px", "color": "#fff",
    "background": "radial-gradient(circle, #f093fb, #f5576c)",
})

Linear and radial gradients

Box Shadow

TextNode("Shadow card", style={
    "padding": "20px", "background-color": "#fff", "border-radius": "8px",
    "box-shadow": "0 4px 12px rgba(0, 0, 0, 0.15)",
})

# Multiple shadows
TextNode("Multiple shadows", style={
    "padding": "20px", "background-color": "#fff",
    "box-shadow": "0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1)",
})

Single and multiple box shadows

Transforms

TextNode("Rotated", style={"transform": "rotate(5deg)", "padding": "16px", "background-color": "#e8eaf6"})
TextNode("Scaled", style={"transform": "scale(1.2)"})
TextNode("Combined", style={"transform": "rotate(-3deg) scale(0.9) translate(10px, 5px)"})

Rotate, scale, and translate transforms

Filters

TextNode("Blurred", style={"filter": "blur(2px)"})
ImageNode("photo.png", style={"filter": "grayscale(100%)", "width": "200px"})
ImageNode("photo.png", style={"filter": "brightness(1.2) contrast(1.1)", "width": "200px"})

CSS filter effects

Clip Path

ImageNode("avatar.png", style={"width": "100px", "height": "100px", "clip-path": "circle(50%)"})
ImageNode("photo.png", style={"width": "200px", "clip-path": "ellipse(40% 50% at 50% 50%)"})
TextNode("Hexagon", style={
    "padding": "40px", "background-color": "#4caf50", "color": "#fff",
    "clip-path": "polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)",
})

Circle, polygon, and inset clip paths

Outline

TextNode("Outlined", style={
    "padding": "16px", "background-color": "#fff",
    "outline": "2px solid #2196f3", "outline-offset": "4px",
})

Full Example: Material Card

card = GridContainer(style={
    "width": "320px",
    "background-color": "#ffffff",
    "border-radius": "12px",
    "box-shadow": "0 2px 8px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08)",
    "overflow": "hidden",
    "grid-template-columns": ["1fr"],
    "gap": "0px",
})

card.add(TextNode("Feature Card", style={
    "padding": "24px",
    "background": "linear-gradient(135deg, #667eea, #764ba2)",
    "color": "#ffffff", "font-size": "20px", "font-weight": "bold",
}))

card.add(TextNode(
    "A complete Material Design card example showcasing border-radius, "
    "shadows, gradients, and other visual effects.",
    style={"padding": "16px 24px", "font-size": "14px", "color": "#555", "line-height": "1.6"},
))