Media & Avatars
Dynamic SVG avatar vectors and landscape image thumbnail generators with deterministic gradient backgrounds. All mutations persist in your isolated session overlay.
Generate Dynamic SVG Avatar
Generates a crisp, colorful vector SVG avatar based on a seed string (username, email, or ID) with deterministic gradient background and initials.
Request Endpoint
GEThttps://playground.nileslabs.com/api/v1/avatars/:seed
Parameters
| Parameter | Type | Description |
|---|---|---|
| seed | string | Seed string used for color hashing and initials (e.g. Bret, jane.doe@example.com). |
| size | integer | Avatar size in pixels (32 to 512). |
| rounded | boolean | Whether to render circular or rounded squircle border. |
1
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128">
2
<defs>
3
<linearGradient id="grad-12345" x1="0%" y1="0%" x2="100%" y2="100%">
4
<stop offset="0%" stop-color="#059669" />
5
<stop offset="100%" stop-color="#0d9488" />
6
</linearGradient>
7
</defs>
8
<rect width="128" height="128" rx="64" fill="url(#grad-12345)" />
9
<text x="50%" y="54%" font-family="Inter, sans-serif" font-size="54" font-weight="700" fill="#ffffff" text-anchor="middle" dominant-baseline="middle">BR</text>
10
</svg>
Generate Avatar with Explicit .svg Extension
Alias endpoint allowing direct <img> tag embedding with explicit file extensions for HTML frameworks and Markdown files.
Request Endpoint
GEThttps://playground.nileslabs.com/api/v1/avatars/:seed.svg
Parameters
| Parameter | Type | Description |
|---|---|---|
| seed | string | Seed string (e.g. alice, user-1). |
| size | integer | Avatar dimensions in pixels. |
1
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128">
2
<defs>
3
<linearGradient id="grad-67890" x1="0%" y1="0%" x2="100%" y2="100%">
4
<stop offset="0%" stop-color="#4f46e5" />
5
<stop offset="100%" stop-color="#7c3aed" />
6
</linearGradient>
7
</defs>
8
<rect width="128" height="128" rx="64" fill="url(#grad-67890)" />
9
<text x="50%" y="54%" font-family="Inter, sans-serif" font-size="54" font-weight="700" fill="#ffffff" text-anchor="middle" dominant-baseline="middle">AL</text>
10
</svg>
Generate Dynamic Landscape Thumbnail
Generates a vector SVG placeholder image with mesh gradient background, custom text, and dimension badge.
Request Endpoint
GEThttps://playground.nileslabs.com/api/v1/thumbnails/:seed
Parameters
| Parameter | Type | Description |
|---|---|---|
| seed | string | Seed string for mesh gradient color hashing. |
| width | integer | Image width in pixels (100 to 1920). |
| height | integer | Image height in pixels (100 to 1080). |
| text | string | Custom text to display instead of formatted seed. |
1
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400">
2
<defs>
3
<linearGradient id="thumb-grad-99" x1="0%" y1="0%" x2="100%" y2="100%">
4
<stop offset="0%" stop-color="#4f46e5" />
5
<stop offset="100%" stop-color="#7c3aed" />
6
</linearGradient>
7
</defs>
8
<rect width="600" height="400" fill="url(#thumb-grad-99)" />
9
<text x="50%" y="46%" font-family="Inter, sans-serif" font-size="33" font-weight="700" fill="#ffffff" text-anchor="middle" dominant-baseline="middle">Post #1</text>
10
<rect x="255" y="210" width="90" height="22" rx="11" fill="rgba(0,0,0,0.25)" />
11
<text x="50%" y="221" font-family="Inter, sans-serif" font-size="11" font-weight="600" fill="rgba(255,255,255,0.85)" text-anchor="middle" dominant-baseline="middle">600 × 400</text>
12
</svg>
Generate Landscape Thumbnail (.svg)
Vector SVG landscape placeholder image with explicit .svg extension for direct embedding in cards and article previews.
Request Endpoint
GEThttps://playground.nileslabs.com/api/v1/thumbnails/:seed.svg
Parameters
| Parameter | Type | Description |
|---|---|---|
| seed | string | Seed string for color hashing. |
| width | integer | Width in pixels. |
| height | integer | Height in pixels. |
| text | string | Custom overlay label text. |
1
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" width="800" height="450">
2
<defs>
3
<linearGradient id="thumb-grad-77" x1="0%" y1="0%" x2="100%" y2="100%">
4
<stop offset="0%" stop-color="#059669" />
5
<stop offset="100%" stop-color="#0d9488" />
6
</linearGradient>
7
</defs>
8
<rect width="800" height="450" fill="url(#thumb-grad-77)" />
9
<text x="50%" y="46%" font-family="Inter, sans-serif" font-size="44" font-weight="700" fill="#ffffff" text-anchor="middle" dominant-baseline="middle">Featured Article</text>
10
</svg>