CSS Art - Warholizer

Alexandre Vacassin — Wed, 05 Jun 2024 15:30:21 +0000

This is a submission for Frontend Challenge v24.04.17, CSS Art: June.

Inspiration

June is a very lively month, with bright colors, warmth and energy.

For the CSS Art of June contest, I created the "Warholizer", a project that takes ordinary images and transforms them to recreate the iconic, vibrant look of Marilyn Monroe in Andy Warhol's famous pop art paintings.

Using CSS filters, the Warholizer transforms any ordinary image into a brightly colored work of pop art to reflect the joyful, festive atmosphere of June.

Demo

Journey

I set out to explore how to colorize specific parts of an image using filters. I incorporated SVG drawings directly into the HTML for various elements: background, hair, face, eyelids, and lips. I learned to blend CSS and SVG filters to create a distinctive look for an image.

To optimize the HTML code, I worked with a single image that is duplicated four times using jQuery. The basic colors are then applied according to the image sequence (1, 2, 3, 4).

I had fun creating functions that allow users to experiment with colors by varying the "hue-rotate" of each image, resulting in a unique artwork. The "Play" button changes the "hue-rotate" of the images randomly, and a "Show Original" button lets users view the original image.

This project was fun and gave me a better understanding of CSS and SVG filters.

Forem: Alexandre Vacassin

CSS Art - Warholizer

Inspiration

Demo

Journey