
Pure CSS Landscape – An Evening in Southwold - tambourine_man
https://codepen.io/ivorjetski/pen/xxGYWQG
======
hooch
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](https://codepen.io/ivorjetski/pen/xMJoYO)

Portrait
[https://codepen.io/ivorjetski/pen/dBYWWZ](https://codepen.io/ivorjetski/pen/dBYWWZ)

------
dylan604
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.

~~~
floatingatoll
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 :)

~~~
Stevvo
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.

~~~
floatingatoll
Perfection in lumberwork isn't just about yield:
[https://www.youtube.com/watch?v=9NRmYzLrvfM](https://www.youtube.com/watch?v=9NRmYzLrvfM)

~~~
Stevvo
Very entertaining! Seeing the position of the buildings, I was certain the
video was going to end terribly.

------
degenerate
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.

------
dubcanada
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.

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

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

------
tambourine_man
The artist's account on Twitter:

[https://twitter.com/ivorjetski/status/1238063321015889921](https://twitter.com/ivorjetski/status/1238063321015889921)

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

~~~
yonderboy
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](https://www.youtube.com/watch?v=rUCVBNNyjC4)

------
076ae80a-3c97-4
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
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/](http://underthepier.com/)

~~~
frosted-flakes
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...](https://www.youtube.com/playlist?list=PLByTa5duIolYRtq45Cz_GmtzfWJyA4bik)

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

------
palerdot
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...](https://economictimes.indiatimes.com/magazines/panache/womens-
day-arundhati-bhattacharya-on-why-she-celebrates-her-aunt-parbati-
dutt/articleshow/74531753.cms?from=mdr)

------
muizelaar
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.

------
WillDaSilva
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.

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

------
sireat
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](https://html.spec.whatwg.org/multipage/custom-elements.html)
you'd need Javascript.

~~~
jazzyjackson
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...](https://developer.mozilla.org/en-
US/docs/Web/API/HTMLUnknownElement)

------
danShumway
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.

------
epidemian
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
Grey sun makes it B/W!

------
iamroot
Instant vaporwave aesthetic:

$sun1: cyan;

~~~
disillusion
$sun1: green; for an instant aurora.

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

~~~
acta_non_verba
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)

------
mrweasel
Zooming in on the image crashed my phone.

~~~
vijaybritto
Rightfully so

------
Hitton
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.

------
zohairshaikh72
This is amazing

------
larodi
this is really taking the Befunge way

