November 11th, 2019

October CodePen challenges

October - the first month which always reminds me of autumn and it represents a lot of contrasts in nature. Rain and sun, cold and warm weather, green grass and yellow leaves - all of those are opposites. And this was the main theme of this month's challenges from CodePen. Despite it was a really busy month for me, I still managed to finish all of the tasks and that makes me really proud. What's more - I finally gave a try to the pattern library I wanted to try for some time. Let's see how it went!

The first week was the clash of two contrasting colours. As blue and orange are on opposing sides of the colour wheel you would expect them to not work well together. But when you think of it - they can represent warm and cold states, fire and rain, Nemo and Dory. In the beginning, I wanted to create a sunrise view on a rainy day from behind the window. To automate the process of generating assets I decided to give a try an original design library - <css-doodle/>.

As mentioned in the beginning, weeks ago I promised myself to learn this pattern library. Each component implementation generates a grid of divs that can be modified and animated with CSS properties. In addition, this package offers additional functionalities like generating a random number with @rand() function or @hex() to transform a number into hex format. Thanks to that building unique patterns are so much easier.

With that powerful tool, I decided to create raindrops for my concept. Unfortunately, after some time I had to give up my idea as rendering droplets was overloading memory and causing performance issues. Having a bit of experience with <css-doodle/> already, I was determined to still use the library. While looking for new inspiration I started generating a simple and small grid in the centre of the container. When testing different functions, I began to create orange ornaments using @hex() one. That's how the design was put to life.

After forming a floating orb full of signs I added oscillating movement to each of them. The next relevant step was to create an open book in different shades of blue. I decided to achieve that by creating an SVG in Adobe Illustrator and modifying couple parameters manually in code later. The finishing touch was adding small blinking stars to make the design look more magical. Let's see the final result:

The second week's topic was to build something big and small at the same time. Finding an interesting but not trivial idea wasn't as easy as I thought. Fortunately, someone once told me that the best designs come when we do not expect them - and that's what happened. It was a rather cold and rainy evening when I decided to watch another episode of Sherlock Holmes (for the hundredth time probably) when it hit me. He was always looking for a tiny thing that would have big meaning in the end. That gave me an exciting concept - enlarging small objects on hover.

Once again <css-doodle/> library came with help while generating all of the random symbols. After creating magnifying glass as SVG my biggest concern was how to properly assign it to the cursor in JavaScript. There were a couple of different functions which I tried but they all had the same issue - the element was changing its position on different screen resolutions. Finally, I found the perfect solution! This was possible by calculating the difference between the cursor and the relative position of the container in the document. In the end, I adjusted the result so the cursor would be more or less in the centre of the magnifying lens. This is the final result:

Since I started to be interested more in CSS I always wanted to create a toggle. Unfortunately, there was always a lack of time or idea to make one. The third week's challenge gave me the opportunity to finally create it. It was all about playing with the differences between curves and edges. I wanted to create something simple yet meaningful. The first thing that came into my mind was the transition between the square and circle. Because I wanted to practice creating a design above the invisible input I build toggle using the checkbox. It went out pretty smoothly, don't you think? ;)

The last week's challenge was about movement and speed. My main focus was to show the difference between time durations in animation, so the best way to do that is to compare them in real-time. That's why I decided to take advantage of a radio group - a collection of radio buttons that represents a set of related options with only one button selected at the same time. Each input held a different speed with an adequate description. To add even more contrast I used significant pictures as visual representations. I wanted to use creatures as a speed reference but as the week was coming to an end I realised that it was impossible to achieve. Unfortunately, creating keyframe animation for each animal was too complex in such a short amount of time. I finished my creation with different images of vehicles. Give it a ride!

After finishing all of the challenges I can certainly say that October's theme was a tough one. It was focused on two opposite things what made it harder to come up with an unusual idea. But most importantly it gave me additional motivation to use the new library as I wanted to try it for some time. November's theme has been revealed already and I'm really excited about it. Fingers crossed for all the creations as it concentrates around board games. So, do you wanna play a game?

Get notified about new content
Follow me
Natalia Zmyslowska © 2021