STEP 1. Create a head
create a triangle and rotate it so that it looks like a head
STEP 2. Create smile and ear
We have a pseudo elements in CSS, so we can create smile and ear using head::after and head::before
STEP 3. Create eyes
This is the most trickiest part because in order to make an eye we have to create
- One bigger white circle
- then a small black pupil inside white circle
- then a small white reflection in black pupil
Let's create a outer white circle first
STEP 3(I). Create a black pupil
We can create pupil using pseudo element
STEP 3(II). Create white reflection in black pupil
Again make use of pseudo element and create small little white reflection inside pupil
STEP 4. Create moles
Well CSS art is all about creative ideas and solution. In previous step we made oval shape white reflection. We can also create moles using shadow of the white element(reflection) and align them properly
STEP 5. Create second eye
Same as step 3
STEP 6. Create hair spike
This is the easiest part in my opinions because all you need to make are just random spikes.
What I have done here is just created a border-top 20px and rotate it in order to give it a spike look.
STEP 7. Create hairs
Repeat step 6 and create multiple spikes so that they look like hairs😁
That's all😍
Thanks for reading this thread. Drop a link of your creations below. I love to check them out