Stunning ‘Paintings’ Developed Entirely With HTML & CSS Left The Internet In Awe

Stunning ‘Paintings’ Developed Entirely With HTML & CSS Left The Internet In Awe

Image by Diana Adrianne Smith and featured with permission

It’s an established fact that jack-of-all-trade designers are increasingly coveted, but who knew aesthetics and coding could merge so beautifully?

The creative community on Twitter is in awe of the artworks of UI engineer Diana Adrianne Smith, who is known as ‘cyanharlow’ on social media.

Smith’s drawings are already impressive at first glance, but here’s the shocking thing: they’re entirely hand-coded in HTML and CSS.

The engineer set out some rules before embarking on her immersive works. Firstly, every element had to be typed by hand. ‘Atom’ text editor was her canvas, and Chrome developer tools were her art materials.

She also only allowed herself limited use of SVG—“all shapes can only use hand-plotted coordinates and bezier curves—without the aid of any graphics editor.”

Because of these restrictions, the “paintings” aren’t modeled for browsers other than Chrome. “I have not concerned myself with cross-browser-compatibility, so the live preview will most likely look laughable in anything other than Chrome.”

Curious fans have previewed the artworks on other browsers. True enough, they do look funny, and Smith herself had a laugh at the wonky images.

View her masterpieces, as well as reactions from other creatives, below. You might want to follow Smith on her portfolio, GitHub, and Twitter to enjoy more of her work.

Pure CSS Francine, created in the style of an 18th-century old painting

Stunning ‘Paintings’ Developed Entirely With HTML & CSS Left The Internet In Awe

Image by Diana Adrianne Smith and featured with permission

Pure CSS Zigario, created in the style of a mid-century advertisement

Stunning ‘Paintings’ Developed Entirely With HTML & CSS Left The Internet In Awe

Image by Diana Adrianne Smith and featured with permission

Pure CSS Vignes, created in the style of a 1930s poster

Stunning ‘Paintings’ Developed Entirely With HTML & CSS Left The Internet In Awe

Image by Diana Adrianne Smith and featured with permission

This stunning illustration by @cyanharlow is pure HTML/CSS. Every element was typed by hand, drawing with only a text editor and Chrome dev tools. https://t.co/kzf7BhkLA5 pic.twitter.com/CmYG6LcnRh

— Andy Baio (@waxpancake) May 1, 2018

It's only designed for Chrome, but don't let that stop you from trying it in other browsers: the older, the better! Here it is in Chrome 17, Firefox 3.6, Chrome 9, and (my favorite) Internet Explorer 5.1.7 for Mac. pic.twitter.com/dFNYKi8Myf

— Andy Baio (@waxpancake) May 1, 2018

i tried @cyanharlow's incredible pure css portrait in an old version of opera and well, the disclaimer wasn't lying: "so the live preview will most likely look laughable in anything other than chrome"https://t.co/fReKS0yCLz pic.twitter.com/MdPLNApQ2g

— David Zhou (@dz) May 1, 2018

You don't deserve me at my (1)
If you can't handle me at my (2) pic.twitter.com/gtQxhZCxqY

— 👀 🔀 🍊 EYES ON ORANGE (@korecave) May 1, 2018

My reaction when someone has painted a portrait using only CSS. ( https://t.co/gEqgbuGw2t ) pic.twitter.com/EZjFy8ABDo

— Ben Porter (@eigenbom) May 2, 2018

[Images by Diana Adrianne Smith and featured with permission]

[ad_2]

You might also like More from author

Leave A Reply

Your email address will not be published.