Show HN: CSS Pokemon – created with clip-path and CSS variables (opens in new tab)

(projects.lukehaas.me)

79 pointslukehaas9y ago43 comments

43 comments

6DM9y ago

Should be called CSS pikachu unless you can somehow swap them. Good job though, better than I could do!

Edit: Major correction: it appears Firefox only supports clip-path behind a flag. Enabling this flag makes the experiment appear in Firefox.

---

It's Webkit/Blink-only - no support for other browsers. It says it uses clip-path and variables, both supported in Firefox, so I see no compelling reason for this.

Also viewing it in Chrome, I don't see anything that would actually require the use of clip-path or variables - arbitrary triangles have been possible in CSS since the beginning, and much more impressive drawings have been created[0][1] than this. The added animation doesn't add much.

Why is this currently #6 on the HN front page?

[0] http://www.subcide.com/experiments/fail-whale/

[1] https://pattle.github.io/simpsons-in-css/

Gammarays9y ago

  Why is this currently #6 on the HN front page?

Because someone took time to make this, and we tend to approach Show HN projects with an open mind.

If it doesn't work on your browser, then try another one. The OP isn't asking you to buy anything or force anything down your throat.

lucideer9y ago

I understand, as others have said elsewhere, that it's just an experiment, and as such cross-browser support isn't as much of a priority - it's not a product that people need to work. I've made plenty of experiments myself that only work in one browser.

However, for many experiments like this, they're doing something somewhat novel using a tech a single browser has just introduced - in those cases, it's limitations that lead to lack of interop. In this case, it just seemed a bit disappointing. That is subjective of course, but it was my - I think warranted - first reaction.

2 more replies

lukehaasOP9y ago

Unfortunately Firefox only supports clip-path behind a flag.

lucideer9y ago

I was unaware of this. Thanks for the info. Edited.

erlehmann_9y ago

It seems to me that nowadays Webkit/Blink has replaced IE for developers not caring about interoperability – with some even going so far as to claim „IE? but nobody uses that!“.

Manishearth9y ago

FWIW clip-path is specced and in CR stage right now. I think it's okay to implement it provided that there is an understanding that any further changes are reflected even if it breaks existing code using the new property.

All browsers do this. Firefox implements around 88 properties (30 of these are "logical properties", which aren't exactly new properties) that Chrome doesn't[1] and Chrome implements around 68 properties that Firefox doesn't[2].

The numbers are a bit skewed here. My method of collecting the list of "properties that Firefox implements" included preffed-off properties, but the same is not true for Chrome, so for example the `grid` property shows up as implemented in Firefox but not Chrome even though both have it behind a pref/flag.

However, there are some properties implemented in Firefox without being behind a pref (ruby-align, scroll-snap-foo, image-orientation are examples).

-------------------

I do feel that in general Blink does push a lot of nonstandard (or not on the standards path) features into the web at times. But I don't have anything to back that assertion up.

Blink is being interoperable in this particular case.

[1]: https://manishearth.github.io/css-properties-list/?stylo=sho...

[2]: https://manishearth.github.io/css-properties-list/?stylo=sho...

1 more reply

Semaphor9y ago

Eh, it always only seems to be the case for experiments. Stuff that has no use case besides "looking fun" and probably being a fun challenge to work at. There are a few FF only, and many that are Chrome only.

staticelf9y ago

> much more impressive drawings have been created[0][1] than this.

Dude, that is highly subjective and you can't deny it's really impressive done. Stop being a fucking douchebag. I for one thinks this beats both your links.

taf29y ago

Seems to work for me in mobile safari

mhurron9y ago

Safari is webkit.

lucideer9y ago

Edited, cheers.

marvindanig9y ago

Damn cool, I just love polygon cuts! CSS has become quite powerful in the last few years. Guess we're not so far from being able to replace images/icons/logos with "design code" written in CSS in the coming ten years.

Here's a book on ABCs for babies done entirely in CSS:

https://bubbl.in/book/abcd-animal-book-by-judith-neumann/1

TheCoreh9y ago

We can sorta already do that by inlining SVGs inside CSS (but perhaps it's cheating)

odabaxok9y ago

I am not sure what I am looking at. I see a big yellow rectangle. Should I be looking at the code only? Should I press a button?

CM309y ago

View it in Chrome. It appears as a Pikachu made out of shapes, like in the screenshot I took here:

https://dl.dropboxusercontent.com/u/67216205/csspokemon.png

In Firefox or other browsers, it just appears as a yellow square.

odabaxok9y ago

Thanks for the screenshot.

_ZeD_9y ago

I think the old "Best Viewed With Internet Explorer" is back (only ... with chrome as the new ie)

taf29y ago

Except chrome is open source and actually improves multiple times a year...

1 more reply

serg_chernata9y ago

I think it's supposed to look like a Pikachu made out of polygons. Seems to work as it should in latest version of Chrome over here. JS enabled.

blauditore9y ago

I made another pokemon in CSS (view from behind): https://jsfiddle.net/t2mngvwn/show/

jaytaylor9y ago

I found this very cool and surprisingly beautiful!

I'd love to understand the techniques and processes @lukehaas used to create it.

datpuz9y ago

Anyone notice how a website meant to showcase some CSS messed up the code display and gave it double scroll bars? Haha.

The Pikachu looks great though ;)

slinger9y ago

Awesome!

sauronlord9y ago

I never realized they introduced a yellow rectangle as a Pokémon.

Galaxy S7

gm-conspiracy9y ago

Meh.

This works in Firefox:

http://pattle.github.io/simpsons-in-css/

j / k navigate · click thread line to collapse

43 comments

6DM9y ago

Should be called CSS pikachu unless you can somehow swap them. Good job though, better than I could do!

lucideer9y ago

Edit: Major correction: it appears Firefox only supports clip-path behind a flag. Enabling this flag makes the experiment appear in Firefox.

---

It's Webkit/Blink-only - no support for other browsers. It says it uses clip-path and variables, both supported in Firefox, so I see no compelling reason for this.

Why is this currently #6 on the HN front page?

[0] http://www.subcide.com/experiments/fail-whale/

[1] https://pattle.github.io/simpsons-in-css/

Gammarays9y ago

  Why is this currently #6 on the HN front page?

Because someone took time to make this, and we tend to approach Show HN projects with an open mind.

If it doesn't work on your browser, then try another one. The OP isn't asking you to buy anything or force anything down your throat.

lucideer9y ago

2 more replies

lukehaasOP9y ago

Unfortunately Firefox only supports clip-path behind a flag.

lucideer9y ago

I was unaware of this. Thanks for the info. Edited.

erlehmann_9y ago

It seems to me that nowadays Webkit/Blink has replaced IE for developers not caring about interoperability – with some even going so far as to claim „IE? but nobody uses that!“.

Manishearth9y ago

However, there are some properties implemented in Firefox without being behind a pref (ruby-align, scroll-snap-foo, image-orientation are examples).

-------------------

I do feel that in general Blink does push a lot of nonstandard (or not on the standards path) features into the web at times. But I don't have anything to back that assertion up.

Blink is being interoperable in this particular case.

[1]: https://manishearth.github.io/css-properties-list/?stylo=sho...

[2]: https://manishearth.github.io/css-properties-list/?stylo=sho...

1 more reply

Semaphor9y ago

staticelf9y ago

> much more impressive drawings have been created[0][1] than this.

Dude, that is highly subjective and you can't deny it's really impressive done. Stop being a fucking douchebag. I for one thinks this beats both your links.

taf29y ago

Seems to work for me in mobile safari

mhurron9y ago

Safari is webkit.

lucideer9y ago

Edited, cheers.

marvindanig9y ago

Here's a book on ABCs for babies done entirely in CSS:

https://bubbl.in/book/abcd-animal-book-by-judith-neumann/1

TheCoreh9y ago

We can sorta already do that by inlining SVGs inside CSS (but perhaps it's cheating)

odabaxok9y ago

I am not sure what I am looking at. I see a big yellow rectangle. Should I be looking at the code only? Should I press a button?

CM309y ago

View it in Chrome. It appears as a Pikachu made out of shapes, like in the screenshot I took here:

https://dl.dropboxusercontent.com/u/67216205/csspokemon.png

In Firefox or other browsers, it just appears as a yellow square.

odabaxok9y ago

Thanks for the screenshot.

_ZeD_9y ago

I think the old "Best Viewed With Internet Explorer" is back (only ... with chrome as the new ie)

taf29y ago

Except chrome is open source and actually improves multiple times a year...

1 more reply

serg_chernata9y ago

I think it's supposed to look like a Pikachu made out of polygons. Seems to work as it should in latest version of Chrome over here. JS enabled.

blauditore9y ago

I made another pokemon in CSS (view from behind): https://jsfiddle.net/t2mngvwn/show/

jaytaylor9y ago

I found this very cool and surprisingly beautiful!

I'd love to understand the techniques and processes @lukehaas used to create it.

datpuz9y ago

Anyone notice how a website meant to showcase some CSS messed up the code display and gave it double scroll bars? Haha.

The Pikachu looks great though ;)

slinger9y ago

Awesome!

sauronlord9y ago

I never realized they introduced a yellow rectangle as a Pokémon.

Galaxy S7

gm-conspiracy9y ago

Meh.

This works in Firefox:

http://pattle.github.io/simpsons-in-css/

j / k navigate · click thread line to collapse