This is my second pure CSS project, hedgehog Miguel. I created this project to have better understanding for animation, SVG and to test how much I can create and design with pure CSS.

How to create spines

I used font-awesome for spines. I applied two certificate icons for head and body using <i> tag.

How to create face

Those ears, eyes and nose are empty DOM element and set the size and color in CSS. I created paired items, ears and eyes, using unordered list so that it's going to easy to style them together.
I used SVG to create a cute little smile.

How to create the moving feet

Those tootsies are all <div>s. The reason I didn't use list is that I could add different animation for each of them and I could enjoy the different moves.

The original positions are set used transform: rotate(Xdeg);. Then I added animation for 5000 millisecond. Within the 5 second, those little feet moves back and forth because I change the transform: rotate(Xdeg) in every 20% of the time.