Recreating Smilky Bear in CSS

日本語

There's a really cool artist on Twitch called Smilkyshake with an absolutely adorable avatar. Recently I'd been playing with CSS styling on CSS Battle, so decided I'd have a crack at recreating his avatar in CSS.

And below is the result! There are no actual images on this page (right clicking on the bear below won't have the usual picture options such as 'copy image' or 'save image as'), it's all done with code.

For the most part, the shapes were simple so I could just use modified divs, but the most difficult part was the mouth. Trying to find a way to make a custom curved line was tricky (even with Stack Overflow and CSS Tricks), but then found Anthony Dugois's SVG Path Builder which was a real game changer.

Click here if you want to see the CSS code, or open the developer tools in your browser to see it in action.

If you think the bear below is cute as a button, be sure to check out Smilkyshake on Twitch (he streams most days) or have a look at his commission information.

(Note that this doesn't work properly in Internet Explorer so ... um ... be sure to download a new browser. Also there are still some bugs in this admittedly inefficient code, and maybe an easter egg. Can you find them?)

Back

Bigger Smilky / Smaller Smilky