Day 30 – Tangram

When I started this page, I thought I would make 30 pages for fun over the holidays. Now that I’m on day 30, I still have so many ideas I want to build! githubAlthough I wasn’t able to create the 30 pages in 30 days, I have been working on coding every day. There were 4 days in the middle where I had a rough time and did not code but I’ve been making commits steadily since.

Today was simple shapes with css. My goal was to make a tangram with the pieces starting off in the container. The user would be able to move the pieces around the page.

Creating the shapes required some math to figure out the dimensions. I ran into a small snag with the parallelogram. I used skew() to change the rectangle into a parallelogram. However, when I applied rotate to the shape, it became a rectangle again. Turns out when you apply two transforms on separate lines, the second one will win out! The trick is to put them on the same line.
tangramI think the final product looks super clean! It’s funny how the lower right shapes look like they have a blue mask over them. A trick of the eye! A good addition would be rotate handlers on the shapes so that the user could solve different tangram puzzles.

Day 30 – Tangram


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s