DrawByURL.com - Turn URLs into Images
Create Images Instantly by Typing a URL
Create PNG images instantly by describing them in a URL.
No design software. No uploads. No complexity.
Every image gets a permanent, shareable URL that works anywhere.
Perfect for placeholders, badges, social media graphics, OpenGraph images, and programmatic design.
Examples
Click any example to try it. Each example demonstrates different features and capabilities.
See What's Possible
Watch stunning images cycle through, all generated from simple URLs
Syntax Guide
DrawByURL uses a packed key-value syntax. Each element is described in a URL segment, with attributes separated by hyphens. Multiple elements are separated by forward slashes.
Basic Format
/{type}[-{key}-{value}]*[/{type2}[-{key}-{value}]*]*Each segment starts with a type (like circle, square, text, background), followed by any number of key-value pairs. Separate multiple elements with /.
Available Shapes
circleA perfect circle
squareA square shape
rectangleA rectangle (use width and height instead of size)
triangleA triangle pointing up
starA star (default 5 points, customizable)
ellipseAn ellipse (oval)
polygonA polygon with customizable sides
heartA heart shape
diamondA diamond shape
hexagonA hexagon (6-sided)
octagonAn octagon (8-sided)
arrowAn arrow shape
lineA straight line
photoImage placeholder
Common Attributes
color / cFill or stroke color. Use c alias for shorter URLs. Named colors or hex codes like #ff00aasize / sUniform size in pixels (for circles, squares, stars). Use s alias.width / wWidth in pixels. Use w alias for shorter URLs.height / hHeight in pixels. Use h alias.x-NUMBER or pHorizontal position. Use x-50p for 50%, x-0.5 for decimal, or x-50%25 for URL-encoded %y-NUMBER or pVertical position. Use y-50p for 50%, y-0.5 for decimal, or y-50%25 for URL-encoded %shadowDrop shadow effect: shadow-small, shadow-medium, shadow-largeradius / brBorder radius for rectangles. Use br alias.group / sceneGroup multiple elements with automatic layouts: group-layout-row, scene-layout-gridvalue-TEXTText content. Use | for line breaks: value-Hello|WorldfontSize / fsFont size in pixels. Use fs alias.weight / fwFont weight: fw-bold for bold text. Use fw alias.Named Colors
You can use these named colors, or hex codes like #ff00aa:
redbluegreenyelloworangepurplepinkblackwhitegraycyanmagentalimenavytealskyforestcoralQuery Parameters
Add query parameters to control output format and dimensions:
?format=png|jpeg|webpOutput format (default: png)?width=NUMBERCanvas width in pixels (default: 800)?height=NUMBERCanvas height in pixels (default: 450)?quality=NUMBERJPEG/WebP quality 1-100 (default: 90)How It Works
1. Parse the URL
The URL path is split by / into segments. Each segment represents one element (shape, text, background, etc.).
2. Extract Attributes
Each segment is split by hyphens. The first token is the element type, remaining tokens are parsed as key-value pairs.
3. Build Render Tree
Elements are organized into a render tree: backgrounds first, then shapes, then text. Each element has its position, size, color, and other attributes applied.
4. Render to Canvas
The render tree is drawn onto a canvas using the specified dimensions. Shapes are drawn in order, with later elements appearing on top.
5. Export Image
The canvas is exported as PNG (default), JPEG, or WebP based on the format parameter. Images are cached for identical URLs.
Use Cases
Placeholder Images
Generate placeholder images for development. Perfect for prototyping and mockups.
Status Badges
Create status indicators, notification badges, and alert badges for dashboards and apps.
Social Media Graphics
Generate social media posts, headers, and thumbnails programmatically. Use query parameters to set exact dimensions for each platform.
OpenGraph Images
Create dynamic OpenGraph preview images for blog posts and pages. Each URL is permanent and cacheable.
API Documentation
Embed images directly in Markdown, HTML, or API responses. No file storage needed—just URLs.
DrawByURL.com — Turn URLs into images
Every image is a permanent URL. No accounts, no storage, no complexity.