Islamic Geometric Pattern

About this style

Geometric patterns are one of the central decorative traditions of Islamic art, developed over many centuries in regions from Spain to Central Asia on buildings, tilework, woodwork and books. Craftsmen built them with compass and straightedge from a circle divided into equal parts, extending its lines into star-and-polygon repeats that tile the plane, often with interlaced strapwork passing over and under. Moroccan zellige, a mosaic of hand-cut glazed tiles, is one of its best-known forms. Architects, textile makers and identity designers still draw on these patterns today.

Make a 10-second animation that constructs an eight-fold Islamic geometric star pattern with compass and straightedge, then weaves and glazes it as a tile panel.

<inputs>
Title: The Eight-Point Star. Five steps: "Draw one circle", "Divide it into eight", "Two squares make a star", "Repeat across the grid", "Weave, then glaze". Credit: Darsa Atelier · Geometry evenings. Duration: 10s. If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Palette: night ground #0E1A2B; construction lines pale gold #CDAE66 at 1.25px (helpers at 45%); glazes lapis #1F4F9E, turquoise #1F9A90, saffron #D8A23C, terracotta #B4542F; strapwork ivory #F1E9D6 with #0A1220 edges; text ivory, step numerals gold.
Panel: 3 × 3 cells of 300px at x 120–1020, y 90–990, framed by a 14px ivory strap. Text column x 1140–1800.
Geometry, exact: in each cell, a circle of radius 150 about the cell center, cut into eight by its horizontal, vertical and diagonal diameters. Square 1 joins the four diagonal points (axis-aligned, half-side 106.07); square 2 joins the four axis points (a diamond touching the cell's edge midpoints). Their union is the eight-point star, their overlap a regular octagon. Neighboring diamonds meet tip to tip, so their edges run on as long 45° lines across the panel. Regions: octagon (lapis, with an inset ivory eight-point star of radius 40), the four star points of square 2 (turquoise), the four of square 1 (saffron), and the four-armed cross left between four stars (terracotta). Compute every point from these rules; nothing eyeballed.
Strapwork: 10px ivory bands with 2px dark edges, centered on both squares' edges and the long diagonals. At every crossing one band passes over and the other under (the under band stops 3px short each side), alternating along each band.
Glaze: each piece varies ±4% in lightness (seeded) with a faint soft highlight toward its upper left at 8%, like hand-cut zellige.
Type: Marcellus 400 for the title (76px, two lines, top of the column); Outfit 400, 30px, for the steps, stacked as a list from baseline 480, 58px apart, each led by a gold Outfit 600 numeral, the newest at full ivory and earlier ones at 55%; credit Outfit 500, 22px, uppercase, tracking 0.1em, at baseline 930.
Motion is patient and exact, like a craftsman at a drawing board. The compass is a 6px gold point with a thin radius line to a pencil dot; arcs sweep clockwise from 12 o'clock over 0.8s on cubic-bezier(0.45, 0, 0.55, 1). Straight lines extend from one end at about 2,400px/s, easing out. Divisions get 5px dots where they cut the circle. Construction always comes before form, and nothing appears without being drawn.
The real thing is constructed geometry with its construction still faintly visible under the finished work; the cheap version is a downloaded star pattern fading in with a gold glow.
Banned: freehand wobble, eyeballed geometry, perspective, glow, drop shadows, gradients beyond the glaze highlight, calligraphy or Arabic lettering, religious text, figurative images, crossings that break the over-under rhythm, extra glaze colors, anything flashing more than 3 times per second.
</direction>

<structure>
0.0–0.6s: the title rises 16px and fades in; a faint gold hairline marks the panel square.
0.6–1.4s: step 1; the compass sweeps one circle in the center cell (center 570, 540).
1.4–2.2s: step 2; four diameters draw through the center; gold dots mark the eight points.
2.2–3.2s: step 3; square 1, then square 2, draw point to point; the star's outline brightens to full gold.
3.2–4.6s: step 4; the diamond's edges extend both ways to the panel edge; circles sweep in the other eight cells, 80ms apart from the center outward, each followed by its squares.
4.6–6.0s: strapwork inks over the construction from the center outward at about 1,600px/s, crossings resolving over and under as the bands pass; the border strap draws; construction dims to 15%.
6.0–7.6s: step 5; glazed pieces set in under the strapwork from the center outward, 12ms apart, each over 0.25s (opacity 0 → 1, scale 1.04 → 1 about its own center).
7.6–8.4s: all steps settle to 70% ivory; the credit rises in.
8.4–10.0s: hold, perfectly still.
For other durations, scale every timestamp proportionally; never sweep a compass arc faster than 0.5s.
</structure>

<build>
One self-contained index.html, CSS and JS inline. Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek. No other libraries (no three.js: this style is flat). Draw in inline SVG, computing every coordinate in JS from the construction rules. The stage is 1920×1080 (16:9), scaled to fit the window. Design for 60fps. window.seek(t), t in seconds, must compute every visual from t alone, clamping past the end to the last frame: no CSS transitions or animations, no setTimeout or setInterval, no state carried between frames, and randomness only from a seeded PRNG. Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
</build>

<check>
Before showing me, step through one frame per second: screenshot each and look at it. Fix overlaps, clipped or cramped text, accidental edge collisions, and anything off-style or Banned. Overlay the construction at full opacity on the final frame: every strap and tile edge must sit exactly on it. Check every band alternates over and under, the panel is symmetric, and the step list clears the panel. Confirm seek(duration) and seek(duration + 1) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Blueprint Technical Drawing

Made by us

A cyanotype-blue engineering sheet that drafts itself: centerlines, compass-swept gears, hatching and dimension lines a…

Art Deco Gold

Made by us

A symmetrical Art Deco reveal in black and metallic gold: a sunburst fans open, stepped pinstripe frames draw from the…

Op Art Illusion

Made by us

A black-and-white Op Art piece: crisp stripes swell into a bulging lens and slow waves, and the title exists only as a…

Japanese Ma Minimal

Made by us

A quiet Japanese minimalist piece on generated washi paper: a single sumi ensō is brushed on with dry-brush texture, sm…