Français
Hassan II Mosque as a pixel-art diorama at night
Drag to turn the island. Built with Three.js and drawn as pixel art.
🇲🇦 Casablanca, Morocco

Hassan II Mosque
in pixels

The Hassan II Mosque in Casablanca as a pixel-art diorama: the 210 m minaret over the Atlantic, the green-tiled hall and the laser towards Mecca at night.

Built
1986–1993, inaugurated 30 August 1993
Architect
Michel Pinseau
Minaret
210 m, the second tallest in the world
Prayer hall
200 × 100 m, with a retractable roof
Capacity
25,000 inside and 80,000 on the esplanade
Setting
Partly on land and partly over the Atlantic Ocean

📱 Phone wallpaper:DayNight

An Isometric Cities original · a 3D scene drawn as pixel art

About Hassan II Mosque

The Hassan II Mosque stands on a promontory at the edge of Casablanca, built partly on land and partly over the Atlantic. King Hassan II commissioned it and is quoted as saying he wanted it on the water because God’s throne is on the water. Work began in July 1986 and the mosque was inaugurated on 30 August 1993. Much of the cost was met by a public subscription to which millions of Moroccans contributed.

Its square minaret rises 210 metres. When it was finished in 1993 it was the tallest minaret in the world; today it is second only to the minaret of the Great Mosque of Algiers. Green zellige tiles cover the upper third of the shaft, and at night a laser at the top points towards Mecca, visible for about 30 kilometres.

The French architect Michel Pinseau designed the mosque in a Moroccan and Andalusian style, and thousands of craftsmen worked on it: carved stone and plaster, painted cedar ceilings from the Middle Atlas, marble and zellige mosaic. The prayer hall is 200 metres long and 100 metres wide, with room for 25,000 worshippers, and part of its roof can slide open in a few minutes to let in the sky.

The complex covers about nine hectares. The esplanade around the hall holds another 80,000 people, with fountains and arcaded galleries, and the buildings include a madrasa, a museum, a library and a public hammam in the basement. It is an active place of prayer, and visitors who are not Muslim can see the inside on guided tours held outside prayer times.

The diorama

The diorama sets the mosque on a floating block of Casablanca’s seafront, built in Three.js and rendered as pixel art: the scene is drawn at a low resolution, every edge gets a dark outline, and the result is scaled up without smoothing. The minaret is a square stone shaft with a tall green zellige panel on each face, a lattice of darker tiles, a carved arch head, gold bands, a row of small arches near the top, stepped merlons and a lantern with a green pyramid roof and a gold finial of three spheres. Next to it, the prayer hall has horseshoe arcades on every side, bronze doors, a raised central hall under a green-tiled roof and a main portal.

The Atlantic wraps around two sides of the block, with rocks and tetrapods along the sea wall where waves break in white foam, and a fishing boat chugging round the corner. On the marble esplanade, framed by arcaded galleries and palms, visitors stroll between three fountains, children chase each other and throw a ball, and a flock of pigeons takes off every few seconds. At night floodlights turn the stone warm, the lanterns come on and a green laser beam reaches out from the top of the minaret.

Things to spot

  • The green laser beam from the minaret at night
  • Waves breaking on the rocks below the sea wall
  • Pigeons taking off together from the esplanade
  • Three children running round a fountain
  • A fishing boat rounding the corner of the platform
  • The three gold spheres on top of the minaret

What we simplified

  • The minaret is drawn a little slimmer than the hall’s scale would make it, so it still reads as a slender tower; the hall is simplified to one block with three green roofs.
  • The esplanade, galleries and sea wall are idealised: the real site has more buildings, including the madrasa and the museum, and a different outline.
  • The laser beam is pointed roughly east, towards Mecca, but not at an exact bearing.

Questions

How tall is the minaret of the Hassan II Mosque?

The minaret of the Hassan II Mosque is 210 metres tall. It was the tallest minaret in the world when the mosque was completed in 1993, and today it is the second tallest, after the minaret of the Great Mosque of Algiers.

When was the Hassan II Mosque built?

Construction began in July 1986 and the mosque was inaugurated on 30 August 1993. It was designed by the French architect Michel Pinseau and commissioned by King Hassan II.

Is the Hassan II Mosque built over the sea?

Yes, partly. The mosque stands on a promontory in Casablanca, partly on land and partly over the Atlantic, so worshippers can pray above the sea. There is no glass floor looking down into the water, despite the popular story.

Can non-Muslims visit the Hassan II Mosque?

Yes. The Hassan II Mosque is one of the few mosques in Morocco that non-Muslims can enter, on guided tours held outside prayer times. Visitors are asked to dress modestly and take off their shoes in the prayer hall.

How was this pixel-art diorama of the Hassan II Mosque made?

It is a real-time Three.js scene running on this page, drawn at 360 × 640 pixels with dark outlines, then scaled up without smoothing. The minaret, prayer hall and esplanade are modelled from photographs and published dimensions, and the laser is drawn on top as pixels. Press “Explore in 3D” to drag it round and switch between day, dusk and night.

Isometric maps of Casablanca

Casablanca also has an isometric pixel-art map made by the community: the whole city drawn tile by tile in the same SimCity-like style. See the map of Casablanca →

More landmarks

All landmarks