Islamic geometric patterns Animated HTML website template

The sample page

Cal y Compás. Architecture and interiors studio.

The idea

The studio’s method (compass, grid, piece) becomes a wall that draws itself behind the text.

What to try

Watch the compass draw the pattern, switch between 8 and 12 points, and follow a strap with your cursor.

Made for

Architecture, cosmetics and jewelry

Palette

• #0D2131
• #2B6F7C
• #E6DAC0
• #C39A45
• #74303C
• #F3EDE1

Typefaces

Newsreader + Jost

Cultural notes

• Original patterns built with compass and straightedge.
• No inscriptions or calligraphy.
• A method shaped by many peoples; never labeled “Arabic.”

The HTML

What you download

• A single index.html file with nothing to install: open it, swap in your brand and copy, and upload it to your hosting.
• In English and Spanish, tested on desktop and mobile.
• Instructions for changing copy, colors, language and prices, plus its license.