DrawByURL Syntax: Complete Reference Guide

This comprehensive guide covers all aspects of the DrawByURL syntax, from basic shapes to advanced features.

Syntax Structure

The basic syntax follows this pattern:

/{type}[-{key}-{value}]*[/{type2}[-{key}-{value}]*]*

- Elements are separated by `/`

- Attributes are separated by `-`

- First token in each segment is the element type

- Remaining tokens are key-value pairs

Element Types

Shapes

- `circle` - Perfect circle

- `square` - Square shape

- `rectangle` - Rectangle (requires width and height)

- `triangle` - Triangle pointing up

- `star` - Five-pointed star

- `line` - Horizontal line

- `photo` - Photo placeholder icon

Special Elements

- `background` - Canvas background

- `text` - Text overlay

Attributes

Color Attributes

- `color-{name}` - Named color (red, blue, green, etc.)

- `color-{hex}` - Hex color code (#ff00aa or ff00aa)

- `stroke-{width}` - Stroke width in pixels

- `stroke-color-{color}` - Stroke color

Size Attributes

- `size-{number}` - Uniform size (for circles, squares, stars)

- `width-{number}` - Width in pixels

- `height-{number}` - Height in pixels

Position Attributes

- `x-{number}` - X position from left edge

- `y-{number}` - Y position from top edge

- `z-{number}` - Z-index for layering

Text Attributes

- `value-{text}` - Text content (use hyphens for spaces)

- `size-{number}` - Font size in pixels

- `font-{name}` - Font family

- `weight-bold` - Bold font weight

- `align-{left|center|right}` - Text alignment

Transform Attributes

- `rotate-{degrees}` - Rotation angle (0-360)

- `opacity-{0.0-1.0}` - Opacity level

Fill Attributes

- `fill-solid` - Solid fill (default)

- `fill-outline` - Outline only

Backgrounds

Solid Colors

/background-color-{color}

Gradients

/background-gradient-{name}

Available gradients:

- `sunset` - Orange to pink gradient

- `ocean` - Blue gradient

Query Parameters

- `?width={number}` - Canvas width (default: 800)

- `?height={number}` - Canvas height (default: 450)

- `?format={png|jpeg|webp}` - Output format (default: png)

- `?quality={1-100}` - Quality for JPEG/WebP (default: 90)

Examples

Basic Shape

/circle-color-blue-size-150

Positioned Shape

/circle-color-blue-size-150-x-400-y-225

Multiple Shapes

/circle-color-blue-size-100/square-color-red-size-120/triangle-color-green-size-100

With Background

/background-color-gray/circle-color-white-size-150

With Text

/background-color-blue/text-value-Hello-World-color-white-x-400-y-225-size-48

Complex Composition

/background-gradient-sunset/circle-color-white-size-200-x-400-y-225-stroke-6-stroke-color-orange/text-value-SUNSET-color-orange-x-400-y-225-size-56-weight-bold

Advanced Features

Layering with Z-Index

/circle-color-blue-z-1/square-color-red-z-2

Rotation

/star-color-yellow-size-200-rotate-45

Opacity

/circle-color-blue-size-150-opacity-0.5

Outlined Shapes

/circle-color-blue-size-200-fill-outline-stroke-8

Best Practices

1. Always place backgrounds first

2. Position text explicitly with x and y

3. Use consistent attribute order for readability

4. Set appropriate canvas sizes for your use case

5. Test your URLs before using in production

Common Patterns

Badge Pattern

/circle-color-{statusColor}-size-80/text-value-{statusText}-color-white-x-400-y-225-size-24

Card Pattern

/background-color-white/rectangle-color-gray-width-300-height-200/text-value-{title}-color-black-x-400-y-300-size-24

Hero Image Pattern

/background-gradient-{gradient}/text-value-{title}-color-white-x-400-y-225-size-64-weight-bold

Conclusion

This reference covers all aspects of the DrawByURL syntax. For more examples and tutorials, visit our [documentation](/docs) and [examples](/examples) pages.