Patang Bazaar — Fly the Old City Sky — Physics-Driven SVG Interaction (FABLE/175, room 84)
AIThis post was created with the assistance of artificial intelligence (AI).
Patang Bazaar — Fly the Old City Sky — Physics-Driven SVG Interaction
Room 84 of 175: “Patang Bazaar — Fly the Old City Sky” — visit the live site.

Before you orderOffer from Amazon

Get art and craft supplies delivered free with Prime

  • Fast, free delivery on millions of items
  • Prime Video, Amazon Music and more included
  • Member-only deals all year
Start your free Prime trial Free trial for eligible customers · Cancel anytime
As an affiliate, we earn on qualifying purchases.

The Rooftop Festival Reimagined

Patang Bazaar is a digital homage to Ahmedabad’s vibrant rooftop culture, crafted entirely by AI to evoke the spirit of flying paper kites. Its signature move is an interactive kite duel that responds to user input, simulating wind and string tension to create a playful physics-based experience that feels both tactile and alive, even through a screen.

Palette and Typography

The site employs a warm, earthy palette inspired by traditional craft materials—rich golds, brick reds, and lush greens—complemented by deep evening ink for contrast. Typography is handled with two self-hosted fonts: a rounded, folded-paper-inspired typeface for headings, and a clean, modern sans-serif for instructions and content, ensuring clarity amidst visual complexity.

Signature Interaction Technique

The core interaction hinges on a physics toy embedded as an inline SVG within the page. Users manipulate the kite’s string by clicking or tapping, which then triggers calculations of wind pressure and string tension. Collisions are detected via Bézier curve intersections, allowing the kite to ‘snap’ or ‘fall’ realistically. This seamless integration of code and interaction creates an immersive experience that feels tactile and intuitive, accomplished entirely through CSS, inline SVG, and JavaScript.

Live view of Patang Bazaar — Fly the Old City Sky
The room as it renders live — open it in your browser.

This project follows a three-step pipeline: first, the AI-generated design was built with clear technical constraints; second, it underwent rigorous critique, focusing on responsiveness, performance, and accessibility; finally, a human art director certified the concept’s cultural resonance and technical integrity, guided by a dedicated AI arts guide to ensure fidelity to the traditional festival spirit.

The full build notes live in the room’s design guide.

Want this? Paste this into your AI coding agent

Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.

BRIEF (room 84 of 175, “patang”):
PATANG BAZAAR — kite fighters of the old city. Aesthetic: rooftop festival at golden hour; paper and glass-string. Palette: sky gold #e8b64c→rose, kite paper saturates (pink, green, purple, orange), string white, rooftop brick. Fonts: baloo-2 (display — its Devanagari-adjacent warmth fits), manrope (body). SIGNATURE: THE DUEL — two paper kites (SVG with spine/bow flex) dance on catenary strings above a rooftop skyline; YOU fly one: pull (hold) to climb and dive, release to drift, cross the rival’s line and SAW (rapid tugs) to cut it — the loser flutters down the whole page while the crowd cheer ticker erupts (“wo kata!”). Manjha (glass string) craft section, kite anatomy, festival food stalls strip, rooftop etiquette. Unforgettable: the cut — and the fallen kite’s slow spiral.

STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.

QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.

PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.

— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/patang/

This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.

KitchenAid Artisan 5-Quart Tilt-Head Stand Mixer, Blue Velvet

KitchenAid Artisan 5-Quart Tilt-Head Stand Mixer, Blue Velvet

Shark ZU102 Rotator Pet Upright Vacuum with PowerFins HairPro & Odor Neutralizer Technology, Charcoal

Shark ZU102 Rotator Pet Upright Vacuum with PowerFins HairPro & Odor Neutralizer Technology, Charcoal

As an affiliate, we earn on qualifying purchases.

Experience the Sky — Visit Patang Bazaar

Explore this AI-crafted virtual rooftop and see how playful physics and cultural storytelling intertwine. Browse all 175 design cases at the exhibition hub to discover more innovative digital experiences built with AI’s creative hand.

Visit the live room → · Browse all 175 rooms

Previously in Wing IV

FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.

Powered by Thorsten Meyer AI


You May Also Like

Yayoi Kusama

Yayoi Kusama marks her 70th year as a pioneering artist with a major retrospective opening in Tokyo, highlighting her influence on contemporary art.

How an Edward Hopper Painting Inspired Norman Bates’ Iconic House in Alfred Hitchcock’s Psycho

Discover how Edward Hopper’s painting influenced the design of Norman Bates’ iconic house in Hitchcock’s Psycho, blending art and film history.

Trump Accuses Smithsonian Of “Anti-White Activism” In Draconian New Report

Former President Trump released a report accusing the Smithsonian of promoting ‘anti-white activism,’ sparking controversy and political debate.

Charles Seliger Painted Nature’s Invisible Architecture

Exhibition highlights Seliger’s focus on cellular structures and unseen patterns, revealing his unique approach within Abstract Expressionism.