Pure CSS Landscape – An Evening in Southwold

https://codepen.io/ivorjetski/pen/xxGYWQG

219 39 6 years ago

How was this made? Manually? Or somehow converted from a vector graphic? In any case, it's beautiful. I love the dots in the water.

skrowl• 6 years ago

I was wondering the same thing. I can't imagine the amount of trial and error that would go into making something like this manually.

skrebbel• 6 years ago

The code is super clean, I'm pretty sure it was done manually.

degenerate• 6 years ago

This is next level. If you expand the frame you can see how the reflection and water are created with simple shapes, but the houses on the right are extremely detailed. Some of this is basically pixel art... I would love knowing how long this took, or if any tools assisted in the creation.

zapstar• 6 years ago

This is incredible. But can you explain the “groin” tag?

davecardwell• 6 years ago

https://en.wikipedia.org/wiki/Groyne

detritus• 6 years ago

If you delete them you'll see which bits disappear respectively from the image - in this case: https://en.wikipedia.org/wiki/Groyne

acta_non_verba• 6 years ago

The groin is the sea defence you can see in the foreground. It stops long shore drift (but there is some debate about if they just shift the problem elsewhere)

danShumway• 6 years ago

Holy heck, this is amazing.

I'll second other people that I would love to see more of the design and planning that went into this.

hooch• 6 years ago

The artist describes this piece as "The final part to my pointless trilogy" and links to these works in the comments:

Still Life https://codepen.io/ivorjetski/pen/xMJoYO

Portrait https://codepen.io/ivorjetski/pen/dBYWWZ

dubcanada• 6 years ago

Whole moly, changing the sunset colour changes the whole thing. This is crazy.

100% would love to know how this is built and know more about the planning.

tambourine_man• 6 years ago

The artist's account on Twitter:

https://twitter.com/ivorjetski/status/1238063321015889921

I too am eager to read a blog post on the technique.

yonderboy• 6 years ago

He also posted a video of the work being created. Wondering what tools he used to make it.

https://www.youtube.com/watch?v=rUCVBNNyjC4

larodi• 6 years ago

this is really taking the Befunge way

iamroot• 6 years ago

Instant vaporwave aesthetic:

$sun1: cyan;

disillusion• 6 years ago

$sun1: green; for an instant aurora.

dylan6042• 6 years ago

I see CSS examples like this, and just want to cry that I can barely make a UI that works. I know CSS is powerful, yet it is absolutely mind numbing in getting consistent results. Anything I make looks like it was designed by a developer. The only good thing is that I know this to be the case, and I'm constantly on the look out for ways to improve.

jsiepkes• 6 years ago

I know what you mean but you shouldn't forget that you can also find people painting the Mona Lisa in MS Paint on YouTube with stunning results.

Though it still remains a pretty impressive feat...

dylan6042• 6 years ago

I totally get the concept of spending countless hours on something that "sane" people would never attempt. I have plenty of electronic projects in my workspace at various levels of completion. They were all started from my looking at off-the-shelf options that were either too expensive for my budget or only providing ~80% of the features I needed. The most dangerous thing for me is someone else to tell me I "can't" anything. I'll run my fingers to the bone just to prove I "could" (to various degrees of success).

TLDR: it's the learning along the way that matters more than the result in and of itself.

dmitriid• 6 years ago

UI is very different from position:absolute on a thousand divs. That's why these examples can serve as only art. They are not representative of CSS' applicability to building UIs (it still sucks).

floatingatoll2• 6 years ago

There’s a stage of investment in some specific skill mindset that results in being able to produce things that seem to be absurd or impossible or “I could never do that”.

There aren’t many real-life opportunities to productively exercise that degree of skill in obvious ways; if you cut down a tree perfectly, few will truly notice how perfect the stump is, even if they may appreciate the result unthinkingly.

So crafting something maximum-insanity like this is a way to exercise all those hard-earned muscles of some random skills, in coordination, for the pure joy of being able to produce a pointless but awesome result.

It isn’t so much about “a thousand hours” as it is about “learning how things work at the deepest level”, and sometimes to do that you have to learn something unrelated and cross-apply the skills.

If you want to learn to paint-by-stylesheet, pick up a children’s paint by numbers coloring book and color it in however you like and then try to work out what the CSS for it would be. Whether you succeed or not, you’ll be forced to rethink CSS at a basic level, which will expand your mindset and eventually your skill set.

Or study how GL shaders work, and try to comprehend what’s going on when people build cool GL demos like the fish benchmark. You may not ever end up using that GL knowledge, but you’ll be more prepared for SVG and canvas elements, which cross-applies to CSS gradients and layout skills.

Or study how DOOM level maps (“wad files”) are built. There are stellar writeups of how ultra-basic technology and ridiculous hacks (“no bridges”) were used to make 3D perform brilliant things with the tiniest of CPU resources. There is zero practical value in this on the surface, but it carries some valuable lessons in how to make a great UI with careful selection of tradeoffs, and you’ll probably end up being better at time-design compromises as a result.

One thousand of those later, you will be able to paint the Mona Lisa in CSS, and it’ll be enjoyable as an evening project over several weeks or months :)

Stevvo2• 6 years ago

Cut down a tree perfectly, and you maximise the yield of lumber you get from it. I think that is somewhat obvious. But I'm being pedantic, you make a good point.

muizelaar• 6 years ago

For a fun browser painting performance test try resizing the pane with the illustration. It's nice to see WebRender doing quite a bit better on it compared to other browsers.

jiofih• 6 years ago

If you thought postscript was bad, welcome the world’s most terrible vector image format.

arethuza• 6 years ago

Please don't upset the NeWS fans on HN or we'll come and tweak your transformation matrix ;-)

076ae80a-3c97-4• 6 years ago

Always strange to see things close to home on HN. I spent New Years in Southwold, a lovely place to visit on the Suffolk coast with the fantastic Adnams Brewery right in the heart of the town.

Lio• 6 years ago

Also don't forget the wonderful Under The Pier Show[1]

It's a set of weird and wonderful custom arcade machines such as the "Rent-a-dog" game and, my favourite, the "Small Hadron Collider".

[1] http://underthepier.com/

frosted-flakes• 6 years ago

For those who don't know, these custom arcade machines were made by Tim Hunkin, a mechanical genius who co-created the show "A Secret Life of Machines" in the 80s and 90s. Most of them up are on Youtube, go check them out: [0].

Also, I absolutely love that website, as well as Tim Hunkin's personal website[1]. It has a charm about it that few websites have these days.

[0] https://www.youtube.com/playlist?list=PLByTa5duIolYRtq45Cz_G...

[1] http://timhunkin.com/control/o_about_the_site.htm. Take a look at the "about the site" page!

Hitton• 6 years ago

This is absolutely crazy in a good way.

And if you let me paraphrase a bit:

Your developers were so preoccupied with whether or not they could, they didn’t stop to think if they should.

epidemian• 6 years ago

Fascinating. And very impressive the way the sun color is parameterized so you can do, e.g., `$sun1: aquamarine;` in the CSS and still get something that makes sense and looks quite psychedelic.

carapace• 6 years ago

Grey sun makes it B/W!

palerdot• 6 years ago

This reminded me of a recent article where an old lady breathtakingly creates beautilful drawings[0] using 'MS Word'.

Edit: Scroll down the article to see one of her wonderful illustrations using MS Word

[0] https://economictimes.indiatimes.com/magazines/panache/women...

mrweasel• 6 years ago

Zooming in on the image crashed my phone.

vijaybritto• 6 years ago

Rightfully so

sireat• 6 years ago

Where do the custom HTML tags (sea,beach etc) come from?

I do not see any preprocessor in codepen.io settings.

I thought that in order to use something like https://html.spec.whatwg.org/multipage/custom-elements.html you'd need Javascript.

jazzyjackson• 6 years ago

They are rendered as HTMLUnknownElement and just don’t have any behavior or style as default, you can still refer to the tags in your css

https://developer.mozilla.org/en-US/docs/Web/API/HTMLUnknown...

zohairshaikh72• 6 years ago

This is amazing

Pure CSS Landscape – An Evening in Southwold

Related Stories