Skip to content

Instantly share code, notes, and snippets.

@cprima

cprima/Generate-Solarized-Sprites.ps1

Last active April 6, 2025 12:39
Show Gist options
  • Save cprima/79ac0596d9c363bb26b627d6da636a33 to your computer and use it in GitHub Desktop.
Save cprima/79ac0596d9c363bb26b627d6da636a33 to your computer and use it in GitHub Desktop.
Download ZIP
Generate Solarized Color SVG Sprites for UI Styling
Raw
README.md

Solarized SVG Sprites — Bars & Circles

Generates reusable SVG sprite files for all 16 Solarized colors in multiple shapes and sizes.
Ideal for use in documentation, styling GitHub Pages, Markdown, or visual indicators in UI mockups.

🎨 Output Overview

Each file follows the format:

bar-<color>-<width>x<height>.svg  
circle-<color>-<width>x<height>.svg

✅ Shapes & Sizes

Type Sizes
Bars 720×16, 360×8, 16×16, 8×8
Circles 16×16, 8×8, 4×4

🔧 Example Usage (with dummy paths)

<!-- Bar example -->
<img src="https://example.com/sprites/bar-blue-720x16.svg" alt="blue bar" />

<!-- Circle example -->
<img src="https://example.com/sprites/circle-red-8x8.svg" alt="red circle" />

📜 License

Creative Commons Attribution (CC BY)
Author: Christian Prior-Mamulyan
Contact: [email protected]

Raw
filter.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Solarized Sprite Filter</title>
<style>
body { font-family: sans-serif; max-width: 700px; margin: auto; padding: 1em; }
label { margin-right: 1em; }
select { margin-right: 1em; }
ul { list-style-type: none; padding-left: 0; }
li { margin: 0.3em 0; }
</style>
</head>
<body>
<h1>Solarized Sprite Filter</h1>
<div id="filterControls">
<label>
Shape:
<select id="shapeFilter"></select>
</label>
<label>
Color:
<select id="colorFilter"></select>
</label>
<label>
Size:
<select id="sizeFilter"></select>
</label>
</div>
<div id="results" style="margin-top:2em;"></div>
<!-- 🔽 Paste full JSON into this script tag -->
<script id="spriteData" type="application/json">
{
"metadata": {
"colors": ["blue", "red"],
"shapes": ["bar", "circle"],
"sizes": [
{ "width": 720, "height": 16 },
{ "width": 8, "height": 8 }
]
},
"files": [
{ "filename": "bar-blue-720x16.svg", "shape": "bar", "color": "blue", "width": 720, "height": 16 },
{ "filename": "circle-red-8x8.svg", "shape": "circle", "color": "red", "width": 8, "height": 8 }
]
}
</script>
<script>
const data = JSON.parse(document.getElementById('spriteData').textContent);
const shapeFilter = document.getElementById('shapeFilter');
const colorFilter = document.getElementById('colorFilter');
const sizeFilter = document.getElementById('sizeFilter');
const results = document.getElementById('results');
// Init filters
function populateFilters() {
fillSelect(shapeFilter, data.metadata.shapes);
fillSelect(colorFilter, data.metadata.colors);
const sizeLabels = data.metadata.sizes.map(s => `${s.width}x${s.height}`);
fillSelect(sizeFilter, sizeLabels);
}
function fillSelect(select, items) {
select.innerHTML = '<option value="">All</option>';
items.forEach(value => {
const opt = document.createElement('option');
opt.value = value;
opt.textContent = value;
select.appendChild(opt);
});
}
// Filtering logic
function applyFilters() {
const shape = shapeFilter.value;
const color = colorFilter.value;
const size = sizeFilter.value;
const filtered = data.files.filter(f => {
const matchShape = !shape || f.shape === shape;
const matchColor = !color || f.color === color;
const matchSize = !size || `${f.width}x${f.height}` === size;
return matchShape && matchColor && matchSize;
});
results.innerHTML = `<h2>${filtered.length} Result(s)</h2><ul>` +
filtered.map(f => `<li><a href="${f.filename}">${f.filename}</a></li>`).join('') +
`</ul>`;
}
// Bind events
[shapeFilter, colorFilter, sizeFilter].forEach(el => el.addEventListener('change', applyFilters));
// Init
populateFilters();
applyFilters();
</script>
</body>
</html>
Raw
Generate-Solarized-Sprites.ps1
<#
.SYNOPSIS
Generates SVG sprite files for all 16 Solarized colors.
.DESCRIPTION
Creates rectangular bar and circular icon SVG files in various dimensions, suitable for use in documentation styling, UI mockups, or visual metadata indicators. Output includes:
- Bars: 720x16, 360x8, 8x8, 16x16
- Circles: 4x4, 8x8, 16x16
Each file is written to the same directory as the script.
.LICENSE
Creative Commons Attribution (CC BY)
.AUTHOR
Christian Prior-Mamulyan
[email protected]
#>
# Define Solarized color palette
$colors = @{
base03 = "#002b36"
base02 = "#073642"
base01 = "#586e75"
base00 = "#657b83"
base0 = "#839496"
base1 = "#93a1a1"
base2 = "#eee8d5"
base3 = "#fdf6e3"
yellow = "#b58900"
orange = "#cb4b16"
red = "#dc322f"
magenta= "#d33682"
violet = "#6c71c4"
blue = "#268bd2"
cyan = "#2aa198"
green = "#859900"
}
# Bar sprite sizes (width x height)
$barSizes = @(
@{ name = "720x16"; width = 720; height = 16 },
@{ name = "360x8"; width = 360; height = 8 },
@{ name = "8x8"; width = 8; height = 8 },
@{ name = "16x16"; width = 16; height = 16 }
)
# Circle sprite sizes (square canvas)
$circleSizes = @(4, 8, 16)
# Output directory = script's location
$outputDir = $PSScriptRoot
# ------------------------
# Generate bar rectangle SVGs
# ------------------------
foreach ($colorName in $colors.Keys) {
$colorHex = $colors[$colorName]
foreach ($size in $barSizes) {
$fileName = "bar-$colorName-$($size.name).svg"
$filePath = Join-Path $outputDir $fileName
# Create SVG markup for a solid-color rectangle
$svg = @"
<svg xmlns="http://www.w3.org/2000/svg" width="$($size.width)" height="$($size.height)">
<rect width="$($size.width)" height="$($size.height)" fill="$colorHex"/>
</svg>
"@
# Save the SVG to file
Set-Content -Path $filePath -Value $svg -Encoding UTF8
}
}
# ------------------------
# Generate circle SVGs
# ------------------------
foreach ($colorName in $colors.Keys) {
$colorHex = $colors[$colorName]
foreach ($dim in $circleSizes) {
$radius = [math]::Floor($dim / 2)
$cx = $radius
$cy = $radius
$fileName = "circle-$colorName-${dim}x$dim.svg"
$filePath = Join-Path $outputDir $fileName
# Create SVG markup for a centered filled circle
$svg = @"
<svg xmlns="http://www.w3.org/2000/svg" width="$dim" height="$dim">
<circle cx="$cx" cy="$cy" r="$radius" fill="$colorHex" />
</svg>
"@
# Save the SVG to file
Set-Content -Path $filePath -Value $svg -Encoding UTF8
}
}
Raw
Generate-SpriteIndex.ps1
<#
.SYNOPSIS
Generates index.html and index.json with structured sprite metadata.
.DESCRIPTION
- index.html: browsable file list
- index.json: detailed file data + machine-readable metadata
- Groups by 'bar-' and 'circle-' prefixes
- Extracts color, shape, width, height from filenames
Author: Christian Prior-Mamulyan
License: CC-BY
#>
$outputHtml = "index.html"
$outputJson = "index.json"
# Get all .svg files
$svgFiles = Get-ChildItem -File -Filter *.svg | Sort-Object Name
# Prepare JSON object
$json = [ordered]@{
metadata = [ordered]@{
colors = @()
shapes = @()
sizes = @()
}
files = @()
}
# -----------------------
# Process Files
# -----------------------
foreach ($file in $svgFiles) {
if ($file.Name -match '^(bar|circle)-([a-z0-9]+)-(\d+)x(\d+)\.svg$') {
$shape = $matches[1]
$color = $matches[2]
$width = [int]$matches[3]
$height = [int]$matches[4]
# Collect metadata
if ($json.metadata.colors -notcontains $color) {
$json.metadata.colors += $color
}
if ($json.metadata.shapes -notcontains $shape) {
$json.metadata.shapes += $shape
}
$size = @{ width = $width; height = $height }
$existingSize = $json.metadata.sizes | Where-Object {
$_.width -eq $width -and $_.height -eq $height
}
if (-not $existingSize) {
$json.metadata.sizes += $size
}
# Add to files
$json.files += [ordered]@{
filename = $file.Name
shape = $shape
color = $color
width = $width
height = $height
}
}
}
# -----------------------
# Write JSON
# -----------------------
$json | ConvertTo-Json -Depth 3 | Set-Content -Path $outputJson -Encoding UTF8
# -----------------------
# HTML index generation
# -----------------------
$bars = $svgFiles | Where-Object { $_.Name -like "bar-*" }
$circles = $svgFiles | Where-Object { $_.Name -like "circle-*" }
$html = @"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Solarized SVG Sprite Index</title>
</head>
<body>
<h1>Solarized SVG Sprite Index</h1>
<p>Right-click any link below and choose “Copy link address”.</p>
<h2>Bars</h2>
<ul>
"@
foreach ($file in $bars) {
$html += " <li><a href='$($file.Name)'>$($file.Name)</a></li>`n"
}
$html += @"
</ul>
<h2>Circles</h2>
<ul>
"@
foreach ($file in $circles) {
$html += " <li><a href='$($file.Name)'>$($file.Name)</a></li>`n"
}
$html += @"
</ul>
</body>
</html>
"@
$html | Set-Content -Path $outputHtml -Encoding UTF8
Write-Host "Generated $outputHtml and $outputJson with $($json.files.Count) entries."
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment