Creative Dissection Puzzles with CSS and SVG

We are often impressed with the things that can be achieved in the world of web design and development (just by citing our field) using mathematics.

This time we will be seeing how to create and animate geometric dissections (puzzles) using only CSS and SVG. But first, let’s see what is a dissection puzzle, directly from Wikipedia:

A dissection puzzle, also called a transformation puzzle, is a tiling puzzle where a set of pieces can be assembled in different ways to produce two or more distinct geometric shapes.

For better understanding, we are talking about this kind of puzzles:

Haberdasher Puzzle by Brent Clouse

Square to Pentagon by Matas Grecevičius

Using these animations as inspiration, we are going to see how to develop an original team section for a creative landing page. Something like this:

The pieces of the puzzles

We will use SVG paths to create the pieces of our puzzles, so we need to create them using a vector editor like Ilustrator or Inkscape. This is perhaps the most tedious part, because generally we ourselves have to create the SVG paths we need. And since we are working with figures that must be geometrically as accurate as possible, it can be a bit tricky.

To get the pieces of the puzzles we needed, we have searched and imported images of them into a vector editor, and later we have tried to draw the paths as accurate as possible. Luckily, we only need to draw one of the two figures of the puzzle, since the other will be formed using CSS transforms.

So, for example, for the square-to-octagon puzzle, we get something like this:

We have drawn the square and not the octagon, because we want the puzzle solved to be square shaped. Then when we transform the original pieces with CSS to form the octagon, the puzzle will look messy. Please look at the following image for better understanding.

Clipping basics

To create dissections in the browser, we will be using the clipping operation with CSS (the clip-path property) and SVG (the <clipPath> element). For a really good introduction to clipping with CSS and SVG, we highly recommend reading this excellent tutorial written by Sara Soueidan.

Setting up SVG and HTML

The first step is to import the SVG paths in our HTML document, placing each path inside a separate clipPathelement as follows:

And here is the markup we will be using:

Please note that we need to insert as many .clips as pieces we have in the puzzle, as we want to transform each piece separately.

Adding CSS (SCSS) styles

First we will add some basic styles, which will allow us to apply the CSS transforms to perform the transition from one shape to the other.

Now we have to go piece by piece (.clip elements), making the necessary transforms to achieve the shape we want. For this we will create a SCSS loop to avoid writing all the repetitive CSS code that we need.

And, for example, in the case of square-to-octagon puzzle, we have ended up with this $octagon-transform variable declaration:

Please note that figuring out the right transforms we have to apply can be a bit tricky as well. But luckily we can see how our animation is going anytime and test it directly in the browser.

Dealing with browser support

We are using CSS techniques supported by almost all modern browsers. But unfortunately, the clip-path property is not supported at all in Internet Explorer and Edge. In these browsers we will see something like this:

This could be an acceptable behavior, but we can fallback to show just a static image instead of a puzzle. Let’s see how we could use a bit of JavaScript to detect the unsupported browsers and add a special class to the bodyelement:

Then we can set some styles specifically for those browsers:

With that we will have puzzles for browsers supporting the CSS clip-path property, and plain images for Internet Explorer and Edge.