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.

CommentsSyndicate content

Post new comment

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Enter the code without spaces.