<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark">
<title>Iridescent shapes — procedural art</title>
<style>
:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #141414; color: #eeeae4; }
* { box-sizing: border-box; }
body { margin: 0; }
header, footer { max-width: 1036px; margin: auto; padding: 22px 32px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
h1 { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: .025em; }
a { color: inherit; font: inherit; }
a:focus-visible { outline: 2px solid #eeeae4; outline-offset: 4px; }
main { padding: 0 32px; }
figure { max-width: 972px; margin: 0 auto; }
img { display: block; width: 100%; height: auto; background: #f1ede8; }
footer { display: flex; justify-content: space-between; gap: 20px; font-size: 11px; line-height: 1.6; color: #aaa7a2; }
footer p { margin: 0; }
.links { display: flex; flex-wrap: wrap; gap: 18px; }
a { text-underline-offset: 3px; }
nav { display: flex; flex-wrap: wrap; gap: 12px; }
button { background: #28262b; color: inherit; padding: 9px 13px; border: 1px solid #57515d; border-radius: 20px; cursor: pointer; }
button[aria-pressed="true"] { background: #eeeae4; color: #242029; }
button:focus-visible { outline: 2px solid #d0b1ff; outline-offset: 3px; }
figcaption { padding: 18px 0; color: #b8b1bf; line-height: 1.5; font-size: 13px; }
@media (max-width: 600px) {
header, footer { padding: 18px 16px; }
header { align-items: flex-start; flex-direction: column; gap: 12px; }
main { padding: 0 16px; }
footer { flex-direction: column; gap: 12px; }
}
</style>
</head>
<body>
<header>
<h1>Iridescent shapes / procedural art</h1>
<nav aria-label="Artwork gallery">
<button data-art="library" aria-pressed="true">Shape library</button>
<button data-art="refinements" aria-pressed="false">Refined shapes</button>
<button data-art="heart" aria-pressed="false">Heart</button>
<button data-art="outlines" aria-pressed="false">Contours</button>
<button data-art="cutouts" aria-pressed="false">Cutouts</button>
<button data-art="celestial" aria-pressed="false">Stars & moon</button>
<button data-art="soft" aria-pressed="false">Soft forms</button>
<button data-art="orchard" aria-pressed="false">Orchard</button>
<button data-art="flowers" aria-pressed="false">Flowers</button>
</nav>
</header>
<main>
<figure>
<img id="artwork" src="renders/shape-library.png" width="1440" height="1860" alt="Labeled sampler of sixteen iridescent silhouettes: stars, organic cutouts, fruits and soft forms.">
<figcaption id="caption">Sixteen editable silhouettes rendered with the same glass finish. These are saved artwork previews; use the included Python generator to make your own combinations.</figcaption>
</figure>
</main>
<footer>
<p>Curves, color fields and grain · generated entirely from code</p>
<div class="links">
<a id="download" href="renders/shape-library.png">Open full-size image</a>
<a href="renders/high-res.png">Flowers · 2×</a>
<a href="README.md">Construction notes</a>
</div>
</footer>
<script>
const entries = {
library: ['shape-library.png',1440,1860,'Sixteen editable silhouettes rendered with the same glass finish. These are saved artwork previews; use the included Python generator to make your own combinations.'],
refinements: ['shape-refinements.png',720,1020,'A broad heart with a crisp notch and tapered point, plus butterfly, rounded bow and strawberry replacements.'],
heart: ['shape-study-heart.png',972,1202,'Broad heart with smooth lobes, a crisp center notch, and a tapered bottom point.'],
outlines: ['shape-outlines.png',1440,1860,'The same sixteen smooth outlines shown without lighting or texture.'],
cutouts: ['shape-study-cutouts.png',972,1202,'Seaweed, branching coral and a rounded bow. Asymmetric cutouts overlap in pearl, cyan and warm glass.'],
celestial: ['shape-study-celestial.png',972,1202,'A crescent, rounded five-point star and four-point sparkle. Three independent shapes, layered from back to front.'],
soft: ['shape-study-soft-forms.png',972,1202,'A cloud, fused bubble cluster and pebble. Soft inflated silhouettes overlap in three glass finishes.'],
orchard: ['shape-study-orchard.png',972,1202,'Apple, strawberry and lemon silhouettes in the original spectral glass palette.'],
flowers: ['final.png',972,1202,'The flower composition rebuilt with smooth continuous contours.']
};
document.querySelectorAll('button[data-art]').forEach(button => button.addEventListener('click', () => {
const [file,w,h,caption] = entries[button.dataset.art];
const image = document.getElementById('artwork');
image.src = 'renders/' + file; image.width = w; image.height = h; image.alt = caption;
document.getElementById('caption').textContent = caption;
document.getElementById('download').href = image.getAttribute('src');
document.querySelectorAll('button[data-art]').forEach(item => item.setAttribute('aria-pressed', String(item === button)));
}));
</script>
</body>
</html>
