Pure CSS Landscape – An Evening in Southwold • Hacker News Board

Pure CSS Landscape – An Evening in Southwold

#1

Post by tambourine_man » Thu, Mar 12, 2020, 12:18 PM UTC

Pure CSS Landscape – An Evening in Southwold
codepen.io

Re: Pure CSS Landscape – An Evening in Southwold

#2

Post by WillDaSilva » Thu, Mar 12, 2020, 1:13 PM UTC

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.

Re: Pure CSS Landscape – An Evening in Southwold

#3

Post by degenerate » Thu, Mar 12, 2020, 1:16 PM UTC

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.

Re: Pure CSS Landscape – An Evening in Southwold

#4

Post by zapstar » Thu, Mar 12, 2020, 1:18 PM UTC

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

Re: Pure CSS Landscape – An Evening in Southwold

#5

Post by skrowl » Thu, Mar 12, 2020, 1:23 PM UTC

WillDaSilva wrote: post #2

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.

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.

Re: Pure CSS Landscape – An Evening in Southwold

#6

Post by davecardwell » Thu, Mar 12, 2020, 1:31 PM UTC

zapstar wrote: post #4

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

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

Re: Pure CSS Landscape – An Evening in Southwold

#7

Post by detritus » Thu, Mar 12, 2020, 1:31 PM UTC

zapstar wrote: post #4

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

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

Re: Pure CSS Landscape – An Evening in Southwold

#8

Post by acta_non_verba » Thu, Mar 12, 2020, 1:32 PM UTC

zapstar wrote: post #4

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

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)

Re: Pure CSS Landscape – An Evening in Southwold

#9

Post by skrebbel » Thu, Mar 12, 2020, 1:39 PM UTC

WillDaSilva wrote: post #2

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.

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

Re: Pure CSS Landscape – An Evening in Southwold

#10

Post by danShumway » Thu, Mar 12, 2020, 1:58 PM UTC

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.