September’s CodePen.io challenges brought us new fun opportunities to improve our programming skills. The theme was really unique – each week we had to follow a different type of a limitation. I’ll show you what I’ve designed with a short description. So sit comfortably and let’s embrace the limitations together!
The first week of the challenges was called “Think small”. Its limitation was a specific size within which we had to design – 100 x 50 pixels. To avoid creating something simple like a button I started looking for inspiration. The theme reminded me about old retro games and pixel arts which had this type of restrictions. As a huge fan of PacMan – the choice was easy. My main idea was to create a loader where a character just appears on the left side and disappears on the right side. The difficulty I had to embrace was to find all the colours from the first edition of the game. With established colour palette I’ve created the basic animation of Pacman. But it wasn’t enough. After adding small bits like border on the top and the bottom I’ve decided to add running away ghosts and this was a nightmare. I’ve never expected that creating these creatures would be so difficult! But at the end of the day, I am satisfied with the result.
The 3rd week was the most difficult one so far. The visual output had to be reached by using black and white colours along with the letter “A”. My main idea was to use different types of font to create a landscape. In the beginning, I wanted to create a beach where Turret Road would be used to create houses and Monoton to form waves. Unfortunately, I couldn’t find enough free to use fonts to create everything I needed. I’ve decided to create a flower with animated butterflies after scrolling through Google Fonts for a long time. And here it is 🙂
The last week’s challenge came up looser as the only restriction was to use arrows as a brush. And as you know there are a lot of types of arrows – twisty ones, long ones, short ones, etc. I started to look for inspiration in wallpapers (!) and I found a blue Japanese pattern which I really liked. I decided to achieve it by rotating different colours of squares nested one inside the other. In the end, I’ve switched colours to greenish palette and add a small box-shadow below each arrow to create depth.
It was my first participation in CodePen’s monthly challenge. I’m really surprised how much it allowed me to explore my imagination. I had always wanted to create a unique loader and finally, I had an opportunity and idea to do that. What’s more, I fell in love with patterns and I definitely will create more of them from now on. Today a new theme for October’s challenges has just been announced and I’m already thrilled with what’s coming next!