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.

Amazon

interactive kite flying game for kids

As an affiliate, we earn on qualifying purchases.

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


Amazon

physics-based paper kite toy

As an affiliate, we earn on qualifying purchases.

As an affiliate, we earn on qualifying purchases.

Amazon

digital kite simulation app

As an affiliate, we earn on qualifying purchases.

As an affiliate, we earn on qualifying purchases.

Amazon

DIY paper kite craft kit

As an affiliate, we earn on qualifying purchases.

As an affiliate, we earn on qualifying purchases.

HALLOWEEN

Halloween Picks

As an affiliate, we earn on qualifying purchases.

You May Also Like

The Armory Show In One Sentence

A comprehensive overview of The Armory Show, capturing its significance, current coverage interest, and what is known and unknown about this major art event.

Savneet Talwar, Anna Boghiguian, Iris Van Herpen

Savneet Talwar, Anna Boghiguian, and Iris van Herpen announce a joint exhibition blending art, fashion, and design, opening later this year in Paris.

Andy Warhol Surges In Global Coverage

Andy Warhol’s presence in international news has increased significantly, with media mentions rising 15-fold, highlighting renewed interest in his work and legacy.

数字化技术焕活历史场景 三山五园打造沉浸式文博新体验 – 北京市人民政府门户网站

Beijing integrates digital technology into San Shan Wu Yuan to create immersive cultural experiences, enhancing historical site engagement.