Code-a-Valentines-card

To celebrate the corporate love-in that is Valentine’s Day, our web development team decided to engage in a little code-off to see who could put together the best digital Valentine’s card. The rules were simple: no external images and no JavaScript or CSS libraries. Everything had to be written from scratch.

Below, for your viewing pleasure, we present the entries…

Taking inspiration from species in pieces, Oli went for a traditional heart-shape built from clip-path polygons, a fairly new feature of CSS.

 

Sticking with hearts, Joe went for a more 8bit vibe creating a flurry of pixelated hearts in a canvas element.


Honouring the high-school tradition of calculating the success of a love match based on the letters in a couple’s name, Michael created a web app bringing this pastime into the twenty first century (although the underlying logic’s a little… random).

 

There were high expectations for Nick’s entry and he did not disappoint. Using canvas, he built an animated particle system using SVGs to plot shapes. Stick around to the end and you can fiddle with the settings and play around with the animations!

 

David took the 'card' part of the challenge literally and used CSS 3D transformations to make an actual card with a surprise inside.

 

Ross (although apparently working with Oli) delivered perhaps the most interesting entry. Instead of going for visual candy, Ross and Oli took advantage of another emerging browser feature - the Webkit Speech Recognition API. Currently exclusive to Firefox and Chrome, this API offers Siri/Alexa-like speech-to-text capability within the browser.

 

The winning entry was voted for by those entered and the run-away winning entry was… Nick! Second place went to Oli and special recognition goes to Ross (and Oli) for their use of cutting edge technology.