[CSS Drawing] 키보드로 그린 그림

CSS는 웹페이지에서 글꼴, 레이아웃, 각 요소의 색상, 간격 등의 스타일을 다루는 방법을 정의한 언어라고 볼 수 있습니다.
애초에 그림 그리기용을 목적으로 나온 언어가 아님에도, 이 CSS로 그림을 그리는 취미를 가지신 분들이 많더군요.

이 비효율적으로만 보이는 취미를 저도 가져보게 되었습니다.
작업이 꽤나 즐거워서 한동안 이런 작업물 위주로 보여드리게 될 것 같네요 :D

다음은 '엑스레이 토끼' 라고 이름 붙인 제 첫 작품인데요.

좌측과 같이 열심히 타이핑을 하면, 오른쪽의 토끼가 그려지게 됩니다.



커다란 두 귀와, 수염에는 애니메이션 효과도 넣어봤어요.
왠지 고양이의 얼굴을 가진 토끼이군요.



토끼 위에 마우스 커서를 올려놓으면, 해골이 보이는 효과도 넣어보았습니다.
나름 건치를 가진 녀석이었어요 :)

다음 경로에서, 그림과 소스코드를 직접 확인해 보실 수 있습니다.
(구형 브라우저에서는 제대로 보이지 않을 수 있습니다.)
https://codepen.io/magical-salt/pen/zQzMrv