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.
Week 2 was focused around number 5. Participants had to create anything but the limitation was to use at most five lines of code for each language. “5 lines of HTML, 5 lines of CSS, 5 lines of JavaScript”. Of course, a line is a really subjective thing as you can minify your code – but there is no fun in bending the rules.
The most challenging part this week was to come up with an idea. Each design I tried to create wouldn’t fit in 5 lines of code. Finally, I’ve decided to create an animated loader. Each dot had been created as SVG and looped in Slim. To use SCSS effectively I wrote only keyframes of the animation sequence. Styling elements was the last bit I struggled with. In order to do that I’ve created an array with colours in JavaScript and assigned each of them using loop function. Thanks to that I could also attach the delayed animation to every element.
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!
Top comments (0)