Media & Avatars Resource Documentation
REST API endpoints for managing Media & Avatars records in global baseline seed data overlaid with your active session sandbox.
GET/avatars/:seed
#get-avatarGenerate 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.
QUERY / PATH PARAMETERS
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| seed | string | Required | Bret | Seed string used for color hashing and initials (e.g. Bret, jane.doe@example.com). |
| size | integer | Optional | 128 | Avatar size in pixels (32 to 512). |
| rounded | boolean | Optional | true | Whether to render circular or rounded squircle border. |
REQUEST CODE GENERATOR
1
fetch('/api/v1/avatars/:seed', {
2
method: 'GET',
3
headers: { 'Content-Type': 'application/json' }
4
})
5
.then(res => res.json())
6
.then(data => console.log(data));
Response JSON Example
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>
Try it out — Test endpoint live
Test nowGET/avatars/:seed.svg
#get-avatar-svgGenerate Avatar with Explicit .svg Extension
Alias endpoint allowing direct <img> tag embedding with explicit file extensions for HTML frameworks and Markdown files.
QUERY / PATH PARAMETERS
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| seed | string | Required | alice | Seed string (e.g. alice, user-1). |
| size | integer | Optional | 128 | Avatar dimensions in pixels. |
REQUEST CODE GENERATOR
1
fetch('/api/v1/avatars/:seed.svg', {
2
method: 'GET',
3
headers: { 'Content-Type': 'application/json' }
4
})
5
.then(res => res.json())
6
.then(data => console.log(data));
Response JSON Example
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>
Try it out — Test endpoint live
Test nowGET/thumbnails/:seed
#get-thumbnailGenerate Dynamic Landscape Thumbnail
Generates a vector SVG placeholder image with mesh gradient background, custom text, and dimension badge.
QUERY / PATH PARAMETERS
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| seed | string | Required | post-1 | Seed string for mesh gradient color hashing. |
| width | integer | Optional | 600 | Image width in pixels (100 to 1920). |
| height | integer | Optional | 400 | Image height in pixels (100 to 1080). |
| text | string | Optional | - | Custom text to display instead of formatted seed. |
REQUEST CODE GENERATOR
1
fetch('/api/v1/thumbnails/:seed', {
2
method: 'GET',
3
headers: { 'Content-Type': 'application/json' }
4
})
5
.then(res => res.json())
6
.then(data => console.log(data));
Response JSON Example
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>
Try it out — Test endpoint live
Test nowGET/thumbnails/:seed.svg
#get-thumbnail-svgGenerate Landscape Thumbnail (.svg)
Vector SVG landscape placeholder image with explicit .svg extension for direct embedding in cards and article previews.
QUERY / PATH PARAMETERS
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| seed | string | Required | hero-banner | Seed string for color hashing. |
| width | integer | Optional | 800 | Width in pixels. |
| height | integer | Optional | 450 | Height in pixels. |
| text | string | Optional | Featured Article | Custom overlay label text. |
REQUEST CODE GENERATOR
1
fetch('/api/v1/thumbnails/:seed.svg', {
2
method: 'GET',
3
headers: { 'Content-Type': 'application/json' }
4
})
5
.then(res => res.json())
6
.then(data => console.log(data));
Response JSON Example
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>
Try it out — Test endpoint live
Test now