生成 拼图

30个CSS碎片拼图，30种濒临灭绝动物

30种 稀有 物种 面临 生存 危机。

这里 我们 用 30个碎片拼图呈现它们...

你能 看到 它们 在挣扎， 它们 在反抗 ...

它们 在这个 互动的 作品里申诉...

碎片拼图

30个CSS碎片拼图，30种濒临灭绝动物。 一场物种危机。

A CSS-based interactive exhibition celebrating evolutionary distinction.

进入 浏览
直接进入30个CSS碎片拼图，30种濒临灭绝动物

碎片拼图

  • 拼图23

  • Vaquita

碎片拼图

30 Species 30 Pieces

1 Fragmented Survival

Select a piece from the ring, or
select a piece randomly
  • Scientific Name:
  • I
  • Range:

200410%

200510%

200610%

200710%

200810%

200910%

201010%

201110%

VALUE HEREText goes here

    •

About this project

In Pieces is an interactive exhibition turned study into 30 of the world’s most interesting but unfortunately endangered species — their survivals laying literally, in pieces.

Each species has a common struggle and is represented by one of 30 pieces which come together to form one another. The collection is a celebration of genic diversity and an attempting reminder of the beauty we are on the verge of losing as every moment passes. These 30 animals have been chosen for their differences, so that we can learn about species we didn't know about previously as well as the struggles they have surviving. Many of them evolved in a particular way which makes them evolutionarily distinct.

Take for example the Kakapo, an animal which evolved without natural predators and thus didn’t require instincts to defend itself. Unfortunately — and as is the case with most of the species showcased here — humans began easily hunting upon encroaching their range, then introduced the stoat and other forms of pest control for other species. The Kakapo was almost completely wiped out through this introduction and fights on today because of this catastrophic lack of judgement.

When you dig into a lot of research around this topic, it’s not long before you see the real darkness that is going on. Millions of years of evolution has occurred and humans are in danger of ruining it through desperation for financial gain or greed.

There are some species here who as grim as it sounds, would require a small miracle to survive because the numbers are too low to rationally continue to exist, Vaquita being one such example.

In Pieces hopes to educate and inspire, and provoke thought on this complex and intricate topic. I sincerely hope that you can take something new away and enjoy this collection as much as I enjoyed researching, designing and building it.

How it's made

Born out of tinkering with a simple property, this project is unabashedly part-digital experiment. The core technology used here is just good old CSS — no canvas or WebGL witchcraft.

Since hearing about CSS polygons, I've been a little surprised at the lack of furore around the technology, so I wanted to create something which not only worked as a project in itself, but also pushed this underused line of code as far as possible.

The shard-shifting capabilities work in webkit-browsers only, which of course is a limitation but at the same time, it works on mobile which are almost completely webkit-based. Firefox does support the clip-path property, but as an SVG referenced shape and thus, the coding for movement works in an entirely different manner. I wanted to focus purely on the CSS route.

Not heard of it? Here, take a line: -webkit-clip-path: polygon( 40% 40%, 50% 60%, 60% 40% );

So, in essence — each shape is being morphed, moved and toyed with by a new set of co-ordinates, and as they are maintained as triangles throughout, this means 3 points, with CSS transitions to link up the movements. No tricks or tools have been used to get the illustrated results, code-wise or graphically. Point by point, shape by shape, each one has been handcrafted via a personally-created tracing JS function after illustration.

Polygon demonstration

If you have any questions on the technique or the project at all, please feel free to whip me a Tweet!

Causes

In Pieces is not linked to a specific charity or organisation, but I would like to highlight some of the great efforts being made out there for species under threat of extinction.

Edge of Existence* – a programme run by Zoological Society of London, deals directly with evolutionarily distinct animals, and has a great list of 100 mammals and other types of species which you can look through if your interests have been perked. *This project is not associated with Edge of Existence.

Of the animals featured here, a number have great causes dealing specifically with their battles, or otherwise aid in respect to the species' family.

Sources

I have used an extensive range of sources to gather the information within this site, specifically the statistical data which is fairly tough to find. I thank each source sincerely, and wish to highlight their great resources here:

Give this species a digital home with a desktop wallpaper.

Wallpaper Image

濒危动物拼图是用纯CSS技术实现的！如果想得到最优的现实效果，请使用手机浏览器或谷歌浏览器观看。

重新排列拼图