Fun with flexagons, and SVG

If you don't know Vihart and her "Hexaflexagon series", go check it out:

She shows how flexagons can be fun, and also provides some hexaflexagon templates to get started.

And if you want to customize the faces of the hexaflexagon there are programs to do that:

All the programs above work with raster graphics but I wanted to draw a flexagon with custom faces using vector graphics so that it could be printed at arbitrary resolutions.

So I wrote flexagon-toolkit to learn about how the faces are decomposed and transformed to assemble the final flexagon. The first user of the toolkit was a plugin for Gimp just as proof of concept, but I was aiming at building an Inkscape extension eventually.

However, at some point I realized that SVG itself has all that is needed to represent a flexagon: there is the use element which can be used to clone the faces, there is the clipPath element and the clip-path attribute which can be used to “cut” parts of a face, and there is the transform attribute to represent the transformation of a part of a face into a flexagon tile.

Bottom line: a specific Inkscape extension is not necessary. Considering that faces can be put into groups, and that Inkscape layers are just SVG g elements with some special attributes, it turns out that Inkscape makes a perfect “vector flexagon editor“ out of the box.

In flexagon-toolkit there is a program to build specially crafted SVG files, like inkscape-hexaflexagon-editor.svg: the faces are only added once in the “Hexagon 1”, “Hexagon 2”, and “Hexagon 3” layers and clipped clones automatically compose the final flexagon. Open it in Inkescape and have fun.


CommentiCondividi contenuti

Invia nuovo commento

Il contenuto di questo campo è privato e non verrà mostrato pubblicamente. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.
  • Indirizzi web o e-mail vengono trasformati in link automaticamente
  • Elementi HTML permessi: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Linee e paragrafi vanno a capo automaticamente.

Ulteriori informazioni sulle opzioni di formattazione

CAPTCHA
Questa domanda serve a verificare che il form non venga inviato da procedure automatizzate
2
w
3
P
8
5
Enter the code without spaces.