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! Although 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.
I 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