Examples Gallery

Explore real-world examples and learn how to create stunning images with DrawByURL

Each example includes detailed descriptions, use cases, tips, and code. Click any image to view it full-size.

Basic Shapes

Basic Shapes & Forms

Start with simple shapes - circles, squares, rectangles, and more. Perfect for learning the fundamentals.

Simple Circle

Simple Circle

shapecircle

A perfect blue circle using the simplest syntax. Great for icons, avatars, or decorative elements.

Use Cases:

Icons, avatars, decorative elements, loading indicators

Tips:

  • •Use size (s) for uniform dimensions
  • •Color can be named (blue) or hex (#0000ff)
  • •Perfect for creating simple icons
URL:
/circle-c-blue-s-300
Open
Colored Square

Colored Square

shapesquare

A red square shape. Squares are great for cards, buttons, or grid layouts.

Use Cases:

Cards, buttons, grid items, badges

Tips:

  • •Squares maintain equal width and height
  • •Use with groups for grid layouts
  • •Combine with shadows for depth
URL:
/square-c-red-s-300
Open
Rounded Rectangle

Rounded Rectangle

shaperectangle

A green rectangle with rounded corners and shadow. Perfect for modern card designs.

Use Cases:

Cards, buttons, containers, badges

Tips:

  • •Use br (border-radius) for rounded corners
  • •Combine with shadow for modern look
  • •Width and height can be different
URL:
/rectangle-c-green-w-500-h-250-br-30-shadow-medium
Open
Triangle

Triangle

shapetriangle

A purple triangle pointing upward. Useful for arrows, indicators, or decorative elements.

Use Cases:

Arrows, indicators, decorative elements, badges

Tips:

  • •Triangles point upward by default
  • •Use rotation to change direction
  • •Great for directional indicators
URL:
/triangle-c-purple-s-300
Open
Star Shape

Star Shape

shapestar

A yellow 5-pointed star. Perfect for ratings, badges, or decorative elements.

Use Cases:

Ratings, badges, decorative elements, highlights

Tips:

  • •Default is 5 points
  • •Use pts to customize point count
  • •Great for rating displays
URL:
/star-c-yellow-s-300
Open
Heart Shape

Heart Shape

shapeheart

A red heart shape. Perfect for social media, favorites, or romantic themes.

Use Cases:

Social media, favorites, romantic themes, decorations

Tips:

  • •Heart is a special shape
  • •Works great with gradients
  • •Perfect for social media graphics
URL:
/heart-c-red-s-250
Open
Text & Typography

Text & Typography

Add text to your images with full control over font size, weight, alignment, and styling.

Simple Text

Simple Text

textbasic

Basic text with custom size and color. Always specify x and y position for text.

Use Cases:

Headings, labels, captions, watermarks

Tips:

  • •Always specify x and y position
  • •Use size for font size
  • •Hyphens in value become spaces
URL:
/text-value-Hello-World-color-black-size-96
Open
Multiline Text

Multiline Text

textmultiline

Text with multiple lines using the | separator. Perfect for titles with subtitles.

Use Cases:

Titles, headings, descriptions, quotes

Tips:

  • •Use | to separate lines
  • •Each line is centered independently
  • •Line height is automatic
URL:
/bg-c-navy/text-value-Hello|World-c-white-x-400-y-225-fs-96
Open
Bold Text

Bold Text

textbold

Bold text with increased weight. Great for emphasis and headings.

Use Cases:

Headings, emphasis, call-to-action text

Tips:

  • •Use weight-bold for bold text
  • •Combine with larger sizes for impact
  • •Works with all text styles
URL:
/text-value-Hello-World-color-black-size-80-weight-bold
Open
Text with Background

Text with Background

textbackground

White text on a blue background. High contrast for better readability.

Use Cases:

Headings, banners, call-to-action, announcements

Tips:

  • •High contrast improves readability
  • •Background comes first in URL
  • •Use complementary colors
URL:
/background-color-blue/text-value-Hello-World-color-white-x-400-y-225-size-72
Open
Gradient Text Background

Gradient Text Background

textgradient

Bold text on a beautiful sunset gradient background. Perfect for hero sections.

Use Cases:

Hero sections, banners, social media graphics

Tips:

  • •Gradients add visual interest
  • •Use bold text for better visibility
  • •Sunset and ocean are preset gradients
URL:
/background-gradient-sunset/text-value-Sunset-Text-color-white-x-400-y-225-size-96-fw-bold
Open
Aligned Text

Aligned Text

textalignment

Left-aligned text. You can also use center, right, top, or bottom alignment.

Use Cases:

Paragraphs, lists, structured content

Tips:

  • •align-left, align-center, align-right
  • •align-top and align-bottom for vertical
  • •Default is center alignment
URL:
/text-value-Left-Aligned-color-black-x-200-y-225-size-64-align-left
Open
Layouts & Groups

Layouts & Groups

Organize multiple elements with automatic layouts. Create rows, columns, and grids effortlessly.

Horizontal Row

Horizontal Row

grouplayout

Three shapes arranged horizontally in a row with automatic spacing. Perfect for navigation or feature lists.

Use Cases:

Navigation bars, feature lists, icon rows, badges

Tips:

  • •layout-row arranges horizontally
  • •g controls gap between items
  • •All children are automatically spaced
URL:
/group-layout-row-g-50-x-400-y-225/circle-c-white-s-180-shadow-small/square-c-white-s-180-shadow-small/triangle-c-white-s-180-shadow-small
Open
Grid Layout

Grid Layout

scenegrid

Four shapes arranged in a perfect grid. Great for galleries, feature grids, or icon collections.

Use Cases:

Galleries, feature grids, icon collections, dashboards

Tips:

  • •layout-grid creates automatic grid
  • •Specify width and height for grid size
  • •Items are evenly distributed
URL:
/scene-layout-grid-w-700-h-500-x-400-y-225/circle-c-red-s-150/square-c-blue-s-150/triangle-c-green-s-150/heart-c-pink-s-150
Open
Multiple Shapes

Multiple Shapes

multiplepositioning

Three different shapes positioned manually. Full control over each element's position.

Use Cases:

Custom layouts, illustrations, complex designs

Tips:

  • •Specify x and y for each shape
  • •Use percentage positioning for responsiveness
  • •Combine with groups for organization
URL:
/circle-c-blue-s-250-x-200-y-200/square-c-red-s-280-x-400-y-250/triangle-c-green-s-250-x-600-y-200
Open
Layered Design

Layered Design

layeringz-index

Shapes layered using z-index. Control which elements appear on top.

Use Cases:

Overlays, badges, complex compositions

Tips:

  • •Higher z-index appears on top
  • •Default z-index is 0
  • •Use for overlapping elements
URL:
/circle-c-blue-s-300-z-1/square-c-red-s-250-z-2/triangle-c-green-s-200-z-3
Open
Visual Effects

Visual Effects & Styling

Add shadows, rounded corners, and other effects to make your designs stand out.

Shadow Effect

Shadow Effect

shadoweffect

A rounded rectangle with a large shadow. Creates depth and makes elements pop off the page.

Use Cases:

Cards, buttons, floating elements, modern UI

Tips:

  • •shadow-small, shadow-medium, shadow-large
  • •Works with all shapes
  • •Adds professional depth
URL:
/rectangle-c-blue-w-500-h-250-br-30-shadow-large-x-400-y-225
Open
Rounded Corners

Rounded Corners

roundedborder-radius

A rectangle with large rounded corners. Modern and friendly appearance.

Use Cases:

Cards, buttons, containers, modern UI

Tips:

  • •br controls border radius
  • •Larger values = more rounded
  • •Combine with shadows for best effect
URL:
/rectangle-c-green-w-500-h-250-br-40-shadow-medium
Open
Outline Style

Outline Style

outlinestroke

A circle with outline style instead of fill. Great for icons and decorative elements.

Use Cases:

Icons, decorative elements, borders, frames

Tips:

  • •Use outline for fill style
  • •sw controls stroke width
  • •sc controls stroke color
URL:
/circle-c-blue-s-300-outline-sw-8-sc-blue
Open
Semi-Transparent

Semi-Transparent

opacitytransparency

Shapes with reduced opacity. Perfect for overlays, watermarks, or subtle effects.

Use Cases:

Overlays, watermarks, subtle effects, backgrounds

Tips:

  • •opacity ranges from 0 to 1
  • •0.5 = 50% transparent
  • •Great for layering effects
URL:
/circle-c-blue-s-300-opacity-0.5/square-c-red-s-300-opacity-0.7
Open
Positioning

Positioning & Alignment

Control exactly where elements appear using absolute positioning, percentages, or smart defaults.

Percentage Positioning

Percentage Positioning

percentageresponsive

Shapes positioned using percentages. 50p means 50% - perfect for responsive designs.

Use Cases:

Responsive designs, centered elements, relative layouts

Tips:

  • •x-50p-y-50p centers the element
  • •Use p suffix for percentages
  • •Works with any percentage value
URL:
/circle-c-blue-s-250-x-50p-y-50p/square-c-red-s-200-x-25p-y-25p
Open
Absolute Positioning

Absolute Positioning

absolutepixels

Shapes positioned at exact pixel coordinates. Full control over placement.

Use Cases:

Precise layouts, custom compositions, pixel-perfect designs

Tips:

  • •x and y are in pixels
  • •0,0 is top-left corner
  • •Use for exact positioning
URL:
/circle-c-blue-s-200-x-100-y-100/square-c-red-s-180-x-600-y-300/triangle-c-green-s-200-x-400-y-400
Open
Centered Elements

Centered Elements

centeredauto

A circle automatically centered. When no position is specified, elements are centered.

Use Cases:

Simple centered designs, single elements, quick prototypes

Tips:

  • •No x/y = automatic centering
  • •Perfect for single elements
  • •Works with all shapes
URL:
/circle-c-blue-s-300
Open
Advanced

Advanced Compositions

Combine multiple techniques to create sophisticated designs. See what's possible with DrawByURL.

Hero Section

Hero Section

herogradient

A complete hero section with gradient background, decorative circle, and bold text. Perfect for landing pages.

Use Cases:

Landing pages, hero sections, banners, announcements

Tips:

  • •Layer elements with z-index
  • •Use gradients for backgrounds
  • •Combine shapes and text
URL:
/background-gradient-sunset/circle-c-white-s-300-stroke-6-stroke-color-orange-z-1/text-value-WELCOME-color-orange-x-400-y-225-size-96-fw-bold-z-2
Open
Card Design

Card Design

carddesign

A modern card design with rounded corners, shadow, and layered text. Perfect for product cards or content blocks.

Use Cases:

Product cards, content blocks, feature cards, dashboards

Tips:

  • •Use z-index for layering
  • •Combine shapes and text
  • •Shadows add depth
URL:
/background-color-white/rectangle-c-lightgray-w-600-h-350-br-20-shadow-large-x-400-y-225-z-1/text-value-Card-Title-color-black-x-400-y-150-size-64-fw-bold-z-2/text-value-Card-Description-color-gray-x-400-y-250-size-48-z-2
Open
Badge Collection

Badge Collection

badgegroup

Three badges arranged in a row. Each badge combines a colored circle with text overlay.

Use Cases:

Product badges, status indicators, labels, notifications

Tips:

  • •Position text over shapes
  • •Use groups for automatic spacing
  • •Combine colors and text for badges
URL:
/group-layout-row-g-40-x-400-y-225/circle-c-green-s-120-shadow-medium/text-value-NEW-color-white-x-200-y-225-size-32-fw-bold/circle-c-blue-s-120-shadow-medium/text-value-HOT-color-white-x-400-y-225-size-32-fw-bold/circle-c-red-s-120-shadow-medium/text-value-SALE-color-white-x-600-y-225-size-32-fw-bold
Open
Complex Scene

Complex Scene

scenecomplex

A complex scene with multiple shapes, shadows, and text. Demonstrates advanced composition techniques.

Use Cases:

Illustrations, complex graphics, scene compositions

Tips:

  • •Use z-index for proper layering
  • •Combine multiple techniques
  • •Shadows add depth to scene
URL:
/background-gradient-ocean/circle-c-white-s-200-x-200-y-200-shadow-large-z-1/square-c-yellow-s-180-x-600-y-200-shadow-large-z-1/triangle-c-coral-s-200-x-400-y-350-shadow-large-z-1/text-value-Ocean-View-color-white-x-400-y-100-size-80-fw-bold-z-2
Open
Use Cases

Real-World Use Cases

Practical examples for common use cases like placeholders, badges, social media, and OpenGraph images.

Placeholder Image

Placeholder Image

placeholderdevelopment

A simple placeholder showing dimensions. Perfect for development and prototyping.

Use Cases:

Development placeholders, prototyping, wireframes

Tips:

  • •Use for missing images
  • •Show dimensions in text
  • •Light colors work best
URL:
/background-color-lightgray/text-value-400x300-color-gray-x-400-y-225-size-48
Open
Status Badge

Status Badge

badgestatus

A green status badge indicating online status. Great for user profiles or system status.

Use Cases:

User profiles, system status, indicators

Tips:

  • •Use bright colors for visibility
  • •Bold text for readability
  • •Circle works well for badges
URL:
/circle-c-green-s-200/text-value-ONLINE-color-white-x-400-y-225-size-56-fw-bold
Open
Notification Badge

Notification Badge

badgenotification

A red notification badge with a number. Perfect for showing unread counts or alerts.

Use Cases:

Notifications, alerts, unread counts, badges

Tips:

  • •Red for alerts/notifications
  • •Large, bold numbers
  • •High contrast for visibility
URL:
/circle-c-red-s-180/text-value-5-color-white-x-400-y-225-size-64-fw-bold
Open
OpenGraph Image

OpenGraph Image

opengraphsocial

An OpenGraph image for social media sharing. Optimized for 1200x630px (standard OG size).

Use Cases:

Social media sharing, SEO, blog posts, articles

Tips:

  • •Use 1200x630 for OG images
  • •Large, readable text
  • •High contrast for visibility
URL:
/background-gradient-sunset/text-value-Blog-Post-Title-color-white-x-400-y-200-size-80-fw-bold/text-value-By-Author-Name-color-white-x-400-y-300-size-48
Open
Instagram Post

Instagram Post

instagramsocial

A square graphic perfect for Instagram posts. Use gradients and bold text for impact.

Use Cases:

Instagram posts, social media, quotes, announcements

Tips:

  • •Square format (1080x1080)
  • •Bold, readable text
  • •Gradients add visual interest
URL:
/background-gradient-sunset/text-value-Inspirational-Quote-color-white-x-400-y-225-size-96-fw-bold
Open
Twitter Header

Twitter Header

twitterheader

A header image for Twitter profiles. Use 1500x500px for best results.

Use Cases:

Twitter headers, profile banners, social media

Tips:

  • •Use 1500x500 for Twitter
  • •Keep text centered
  • •Gradients work well
URL:
/background-gradient-ocean/text-value-Twitter-Header-color-white-x-400-y-225-size-80-fw-bold
Open

Ready to Create Your Own?

Start creating images by typing URLs. No design tools needed.

Read DocumentationTry It NowBrowse Gallery