How was the penguin created?

I’m on the “Basic CSS : Use CSS variables to change several elements at once” lesson and i was wondering how the penguin was created if there are nothing but

tags. I don’t see any imported images or anything like that. Was the penguin really created with nothing but CSS? I would love to see a video creating the penguin from scratch so it can open my mind up to more use cases with CSS.

There are different ways to do this. But in this case it looks like they are just creating shapes with the css properties. You can mess with things like the border radiuses and positioning to see how it affects the image.

1 Like

Fantastic! Thank you for the quick response.
Do you mind making mention of the “different ways”? Just something brief enough to do help me do research on.

Well, this isn’t really my specialty. Certainly you could construct it with individual images and position them (or just the whole image). With images for the different parts, there are ways to apply filters and fills to get the colors you want. SVG files are good for that. You can also do things like inline SVG code and the canvas API. I’m sure there are also JS libraries to do it.

I wouldn’t worry about this at this point in your studies - you could easily get bogged down in that.

1 Like

Welcome @MatthewGeneNavarro !
Isn’t it awesome how you can draw a pinguin in CSS right?
I don’t know how to explain how you can do it, but here there is a video of a person drawing a penguin in CSS step by step and it can help you to undestand it basics.

Click here to have some tutorials of drawing projects for beginers. And here there is a webpage that is a good reference when asking about coding.

Hope this can help you. :wink:

3 Likes

There are a lot of CSS properties that can be used to draw and shape/position elements in such a way that they look like something else. Borders, shadows, gradients, clip-path, shapes using pseudo-elements, the list goes on. It’s not always practical (e.g. compared to SVG illustrations) but people can make pretty crazy stuff using pure CSS.

More links

https://css-art.com/

1 Like

Awesome!
Really helpful :+1:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.