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?)

Bigger Smilky / Smaller Smilky



生放送サイトのツイッチ(Twitch)では、スミルキーシェイク(Smilkyshake)という素晴らしいアーティストがいる。彼のアバターが超可愛い。最近私はバトル(CSS Battle)というサイトでCSSを触っているので、そのアバターをCSSで作ってみた。


一般的に単純な形状があるので修正したDIVが使えたが、一番難しいのが口だった。スタック・オーバーフロー(Stack Overflow)やCSSトリックス(CSS Tricks)を活かしても、カスタム曲線が作りづらいだったが、アントニー・ドゥグワー(Anthony Dugois)SVGパス・ビルダー(SVG Path Builder)を見つけて、できるようになった。



(注意 インターネットエクスプローラーがダメなので、他のブラウザーをダウンロードしてください。そして、この正直に効率が悪いコードにはバグがある、イースターエッグもかも。見つけられる?)

大スミルキー / 小スミルキー