Heart Explosion

I have not been able to keep myself from JavaScript and general web development. I have taken a dive into learning more about CSS, and this lead to an explosion of hearts - A simple web page for viewing and creating messages written over a heart with more hearts flying out of it.

You can customize the message by clicking a gearwheel in the upper left corner and filling in the textbox. After clicking on the update button, the web address in the browser will be updated. You can then send this new web address to a friend and they will see your message. If your browser supports it, the web address will automatically be copied to the clipboard. Meaning that you should be able to paste it into any other app without manually copying the web address first.

Beside working a bit more with modern CSS, this project also presented an opportunity to jump into working with SVG, Scalable Vector Graphics. The hearts (and the small cog wheel) were first designed in Inkscape and then inserted into the code by copying the relevant parts from the image file markup. Meaning this project does not use separate image files. Everything is defined in the HTML, CSS and JavaScript.

I have not uploaded the code to Github, but an early prof of concept can be viewed on codepen. You will need to use your web browser if you want to view the code I’m afraid. I’m intending to reuse the code for another project I’m working on and that will publish on Github. So the main code will one day be available on Github.

If you are wondering about the color selection. The hearts are in various shades of purple because that is my wife’s favorite color. She was my intended audience for this project.

/Henrik