Discussion
Loading...

Post

Log in
  • About
  • Code of conduct
  • Privacy
  • Users
  • Instances
  • About Bonfire
Craig S. Kaplan
Craig S. Kaplan
@csk@mathstodon.xyz  ·  activity timestamp last week

January 28: No libraries, no canvas, only HTML elements.

Here's a patch of the Penrose P3 tiling rendered entirely as pure HTML+CSS. I used code to generate the HTML, but the end result is self-contained. Each tile is a <div>; the trick is (relatively) easy because rhombs are affinely transformed rectangles.

You can see the HTML at https://cs.uwaterloo.ca/~csk/tmp/penrose.html. #genuary #genuary2026

A roughly circular patch of Penrose's "P3" aperiodic tiling. Tiles are thin and thick rhombs (with tip angles of 36 and 72 degrees). Thick rhombs are coloured dark blue and thin rhombs are light blue. Tiles have white outlines, and the patch sits on top of a yellowish background.
A roughly circular patch of Penrose's "P3" aperiodic tiling. Tiles are thin and thick rhombs (with tip angles of 36 and 72 degrees). Thick rhombs are coloured dark blue and thin rhombs are light blue. Tiles have white outlines, and the patch sits on top of a yellowish background.
A roughly circular patch of Penrose's "P3" aperiodic tiling. Tiles are thin and thick rhombs (with tip angles of 36 and 72 degrees). Thick rhombs are coloured dark blue and thin rhombs are light blue. Tiles have white outlines, and the patch sits on top of a yellowish background.
https://cs.uwaterloo.ca/~csk/tmp/penrose.html
  • Copy link
  • Flag this post
  • Block

bonfire.cafe

A space for Bonfire maintainers and contributors to communicate

bonfire.cafe: About · Code of conduct · Privacy · Users · Instances
Bonfire social · 1.0.2-alpha.7 no JS en
Automatic federation enabled
Log in
  • Explore
  • About
  • Members
  • Code of Conduct