Pixel Heart Day 69

Today’s project is yet another CSS variable one. To be quite honest, these sets of projects have helped me immensely in thinking of elements as components. Hey, react I’m looking at you bro. Anyhoo, as part of my CSS pure image challenge, I want to keep doing vector graphics, yet I didn’t want to take too long in it. I also wanted one where I can play with the colors because this project revolves around changing colors on the go. Pixels came into mind because whichever color you use it would still work perfectly so pixel heart it is! Lets start.

First looking for insparation, I came across Monica Dinculescu account and loved this pixel heart she designed! So I decided to model it. Doing things in sketch helps me in thinking of how to structure it in html, and css also a little sketch practice is always a good thing 😀

Then we move on to the code bit. Here’s an illustration of the process


Awesome! Now It’s time for the fun part, Javascript!! Trying to do two things here:

  1. have a slider which controls the rotation of the heart
  2. inputs in each cube where users can enter a color value and said cube changes color

Fist slider. I added a range input and then targeted it to change the value of the CSS variable whenever a change is triggered and it works


Finally the last bit where it’s all about colors, just as any interaction you first grab a reference of the input[s] set a handler for the event and update the result and bam! we have a colorful heart <3


This was a really fun project, reminded me of how much I used to enjoy doing this 180 projects.

Here’s a link to the final result.

Happy coding 🙂

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *