Making images with CSS is not always easy. There are times that you have to go the extra mile on your work to have it stand out from the rest. Before I began working on Rulers of the Sea, I only intended to create a static image about rulers. After getting some ideas from Google Images, I started developing the art. 2 hours later, I had the image that I wanted.
But I wasn’t contented. Not that it didn’t looked good but just that it seemed too similar to other works of other developers. That’s when I decided to spice it up a bit by adding some basic animation. I realized that I could form something out of the 3 shapes I had and the first thing that came to mind was a boat (that was when I thought of the title – pun intented). After adding the initial animation, I thought it’d be funny to have a sailor inside since they can actually be called “rulers” of the sea.
And that was it. I shared it on Facebook and Twitter afterwards. I never expected that it would get THAT much attention (as of writing, it now has 3,715 views and 98 hearts). I just wanted to show my work and how much you can do with CSS nowadays.
Overall, I am glad with the response and it has pushed me to create more animated drawings and keep on learning new things with this amazing language.
Here is the link to the weekly The CodePen Spark page.
Rulers of the Sea
See the Pen Daily CSS Images 07: Rulers of the Sea (animation) #dailycssimages by Elmer Balbin (@elmzarnsi) on CodePen.27172