canvas width 400 height 300 background "white"

# This is a comment
circle radius 30 at (100, 100) fill "red"
rect width 80 height 60 at (250, 100) fill "blue"

# This is a comment
circle radius 20 at (50, 50) fill "green"  # End-of-line comment

text "Hello" at (100, 50)
circle radius 25 at (200, 150)

Basic Shapes

SVGLang supports all common SVG shapes with intuitive syntax.

Circle

circle radius 30 at (100, 100) fill "red" stroke "black"

Rectangle

rect width 80 height 60 at (250, 100) fill "blue"

Ellipse

ellipse rx 40 ry 20 at (150, 200) fill "green"

Line

line from (0, 0) to (100, 100) stroke "black" stroke-width 2

Polygon

polygon points (50,0), (100,50), (50,100), (0,50) fill "purple"

Text

text "Hello World" at (50, 50) fill "black" font-size 16
text "New Syntax" at (50, 100) fill "blue" size 20

Groups

# Define a reusable group
group flower {
    line from (0, 8) to (0, 50) stroke "green" width 2
    circle radius 15 at (-10, -10) fill "pink"
    circle radius 8 at (0, 0) fill "yellow"
}

# Use the group multiple times
flower at (100, 100)
flower at (200, 150)

Styling & Colors

Style your shapes with colors, strokes, and visual properties.

Fill Colors

# Named colors
circle radius 20 at (50, 50) fill "red"

# Hex colors
rect width 50 height 30 at (100, 50) fill "#3498db"

# RGB colors
ellipse rx 25 ry 15 at (200, 50) fill "rgb(255, 165, 0)"

Stroke Properties

circle radius 30 at (100, 100) 
    fill "none" 
    stroke "red" 
    stroke-width 3

Opacity

rect width 100 height 50 at (50, 50) 
    fill "blue" 
    opacity 0.5

RGBA and HSLA

# RGBA with alpha transparency
circle radius 25 at (100, 100) fill "rgba(255, 0, 0, 0.5)"

# HSLA colors
rect width 50 height 50 at (200, 100) fill "hsla(240, 100%, 50%, 0.8)"

Math Functions

SVGLang includes built-in mathematical functions for complex graphics.

Trigonometric Functions

# Sine wave points
circle radius 3 at (50, 150 + 50 * math.sin(0)) fill "blue"
circle radius 3 at (100, 150 + 50 * math.sin(0.5)) fill "blue"
circle radius 3 at (150, 150 + 50 * math.sin(1.0)) fill "blue"

Available Functions

• math.sin(angle) - Sine function
• math.cos(angle) - Cosine function
• math.tan(angle) - Tangent function
• math.sqrt(value) - Square root
• math.abs(value) - Absolute value
• math.min(a, b) - Minimum of two values
• math.max(a, b) - Maximum of two values
• math.pow(base, exp) - Power function

Complex Example

# Spiral pattern
foreach i in range(0, 20) {
    angle = i * 0.5
    radius = i * 3
    x = 200 + radius * math.cos(angle)
    y = 200 + radius * math.sin(angle)
    circle radius 2 at (x, y) fill "purple"
}

Animations

Create smooth animations with SVGLang's animation syntax.

Basic Animation

circle radius 25 at (100, 100) fill "red" animate {
    x from 100 to 300 duration 2s repeat infinite direction alternate
}

Multiple Properties

rect width 50 height 50 at (100, 100) fill "blue" animate {
    x from 100 to 200 duration 1s
    rotate from 0deg to 360deg duration 2s repeat infinite
}

Animation Properties

• x, y - Position animation
• rotate - Rotation animation
• scale - Scale animation
• fill - Color animation
• opacity - Opacity animation

Animation Controls

• duration - Animation duration (e.g., 2s, 500ms)
• repeat - Repeat count (once, infinite, or number)
• direction - normal, reverse, alternate
• delay - Start delay

Gradients

Create beautiful gradient fills for your shapes.

Linear Gradients

rect width 200 height 100 at (50, 50) 
    fill linear-gradient(90deg, "red", "blue")

Radial Gradients

circle radius 50 at (150, 150) 
    fill radial-gradient("yellow", "orange", "red")

Multi-stop Gradients

rect width 300 height 100 at (50, 200) 
    fill linear-gradient(0deg, "red", "yellow", "green", "blue")

Gradient Angles

• 0deg - Top to bottom
• 90deg - Left to right
• 180deg - Bottom to top
• 270deg - Right to left

Examples

Here are some complete examples to get you started.

Simple Scene

canvas width 400 height 300 background "lightblue"

# Welcome to SVG Language!
# Define a reusable flower group
group flower {
    line from (0, 8) to (0, 50) stroke "green" width 2
    circle radius 15 at (-10, -10) fill "pink"
    circle radius 15 at (10, -10) fill "pink"
    circle radius 15 at (-10, 10) fill "pink"
    circle radius 15 at (10, 10) fill "pink"
    circle radius 8 at (0, 0) fill "yellow"
}

# Use the flower group multiple times
flower at (100, 100)
flower at (200, 150)
flower at (300, 200)

Animated Flower

canvas width 300 height 300 background "lightgreen"

# Flower petals
foreach i in range(0, 8) {
    angle = i * 45
    circle radius 15 at (150, 120) fill "pink" 
        rotate angle deg
        animate {
            scale from 1.0 to 1.2 duration 1s 
            repeat infinite direction alternate
        }
}

# Flower center
circle radius 10 at (150, 150) fill "yellow"

# Stem
rect width 4 height 80 at (148, 150) fill "green"

Mathematical Art

canvas width 400 height 400 background "black"

# Spiral galaxy
foreach i in range(0, 100) {
    angle = i * 0.3
    radius = i * 2
    x = 200 + radius * math.cos(angle)
    y = 200 + radius * math.sin(angle)
    
    size = 5 - i * 0.04
    opacity = 1.0 - i * 0.008
    
    circle radius size at (x, y) 
        fill "white" 
        opacity opacity
}