Drawing with CSS: Anime Character

Drawing in CSS is stress-free (a minimum of for me) and a very good solution to apply CSS. Typically it is useful to attempt new options that can’t at all times make it into manufacturing as a result of not all browsers could assist them.

On this article, I’ll clarify how I drew the manga/anime drawing from the picture above utilizing HTML and CSS and dive into the inventive course of, moving into some element about why I made a number of the selections and their professionals and cons. On the finish of the article, you’ll discover a video with the entire course of.



The Drawing

The drawing began from scratch. No HTML, No CSS. Only a clean web page. Initially, I did not know what I might draw in any respect! However I had quantity 2 of the manga Pluto subsequent to me, so I made a decision to code one thing manga-related, getting some inspiration from the duvet (e.g., for the nostril and the mouth).

I just like the end result, however I am biased. Here’s a reside demo of the drawing (you’ll be able to see the full version on CodePen):

Let’s examine how completely different components of the picture got here to life.



Canvas

Don’t fret. There is not any place for <canvas> in CSS artwork. I like setting the foundation factor of the drawing as a “canvas” and including a grid initially:

.canvas {
  width: 80vmin;   /* so it is responsive */
  aspect-ratio: 1; /* so it is a sq..  */
  background:
    repeating-linear-gradient(#0003 0 0.125%, #0000 0 0.9875%, #0003 0 10%),
    repeating-linear-gradient(90deg, #0003 0 0.125%, #0000 0 0.9875%, #0003 0 10%);
}
Enter fullscreen mode

Exit fullscreen mode

This code generates a background with a 10×10 grid. Every sq. is 10%, and understanding that helps me place the objects later: depend the variety of squares and multiply by 10 to calculate the proportion wanted in high, left, width, or top.



Head/Face

The face breaks into three components: the brow, left, and proper sides. For them, I used a single factor (brow), after which the ::earlier than (left) and ::after (proper) pseudo-elements for the edges.

I may have simply achieved an egg form, which is tremendous straightforward to do in CSS with border-radius and completely different values for horizontal and vertical:

.egg-shape {
  width: 80vmin;
  top: 80vmin;
  border-radius: 100% / 80% 80% 120% 120%;
  background: crimson;
}
Enter fullscreen mode

Exit fullscreen mode

As a substitute, I overcomplicated issues a bit. Nonetheless, having three components allowed for sharper edges (e.g., the chin), and I needed to do this method as I at all times go the “egg-shape route.” The end result appears good, however it may not have been value it.

Alternatively, having completely different components permitted some additional customization (like including rework or inset shadows) that might have been extra sophisticated if it was just one factor. So not all the things is unhealthy.



Mouth

The mouth isn’t a easy line. Additionally it is conformed of three components to offer some “texture,” so it is not only a flat factor. On this case, I did it by enjoying with the border widths, however I may have achieved it with clip-paths (it might have been a ache later with the pseudo-elements) or linear gradients (it might have been a ache later with the shadows). Browsers could show barely otherwise, however it’s a value I am going to pay.

The item is later used to supply some lip shadow with box-shadow: one on high and one other on the facet.



Ears

Each ears are the identical. The trick to rapidly flipping a component horizontally is to use a rework of scaleX(-1) and voilà! It is achieved!

.ear {
  /* code to attract the ear: border-radius, backgrounds... */
}

/* choose the second ear and flip it */
.ear + .ear {
  rework: scaleX(-1);
}
Enter fullscreen mode

Exit fullscreen mode

As soon as that is achieved, to make them look barely completely different, I rotated the second at a barely completely different angle and likewise pushed it a bit bit farther (from the opposite facet). Mixed with the varied components from each side, that gives the look of getting two completely different ears.



Eyes

Drawing eyes is at all times tough. They make or break the drawing, and the stability between one and the opposite is delicate. The eyes on this drawing are removed from excellent, however they’re Okay.

Every eye is 2 components: a div (for the attention in itself) and one pseudo-class (for the pupil and iris). The attention may have an overflow:hidden so the pseudo-element would not prolong past its scope.

The pupil and the iris are radial gradients, with extra radial gradients for the sunshine reflections and box-shadows to hint small traces on every eye facet. Nonetheless, after duplicating the attention and flipping the second, there’s one thing completely different left to do: to keep away from having an undesirable symmetry that appears bizarre (gentle reflections coming from completely different instructions), the pseudo-element of the second eye must be flipped too:

.eye {
  /* eye kinds */
}

.eye + .eye {
  rework: scaleX(-1); /* flip the attention */
}

.eye + .eye::earlier than {
  rework: scaleX(-1); /* flip the iris within the second eye */
}
Enter fullscreen mode

Exit fullscreen mode



Neck

The neck factor is simply going to be a container for its ::earlier than and ::after pseudo-elements, which would be the sides of the neck.

Utilizing box-shadow, the weather’ shadow would be the colours of the neck, and it’ll present some shadow. Utilizing rework to rotate and skew, the shapes shall be softer and look extra like a cartoon neck than if I simply had a rounded nook.



Hair

The hair consists of eight occasions the identical factor with slight variations (in place and measurement, however generally additionally within the background). I initially used borders and field shadows to attract the bangs, however that was an issue when attempting to make them look completely different (plus, it appears horrible in browsers apart from Chrome). One other downside with this method is that the highest a part of the hair bangs has an undesired black line on Chrome (it has some bother at occasions with issues like that.)
So I opted for field shadows and gradients to attract the hair:

.bangs {
  width: 30%;
  top: 30%;
  border-radius: 0 0 100% 0;
  /* to attract the exterior border */
  box-shadow: inset -0.5vmin -0.25vmin; 
  /* the hair and inside border */
  background: radial-gradient(100% 170% at -10% 0, #0000 58.75%, #000 59% 60.25%, var(--hair-dark) 60.5%, var(--hair) 78%); 
}
Enter fullscreen mode

Exit fullscreen mode

Flipping the hair (bear in mind the trick of scaleX(-1)) and rotating it makes it look completely different sufficient to be reusable… and that is what I did.



Face Traces

There are a number of traces within the drawing: eyebrow, nostril, chin, and many others. The “easy” manner could be to have a component for every line (or group of traces), however the drawing will find yourself with many components.

As a substitute, I opted for decreasing the variety of traces to a minimal and to shapes that may be replicated with background pictures (gradients). Then with a single factor that covers the entire face, I added these traces one after the other as radial-gradient or linear-gradient.



Accessibility

CSS artwork isn’t very accessible on the whole, however that does not imply that it would not must be accessible. By including a task of picture and an aria-label with an outline of the drawing, the drawing shall be extra accessible for assistive expertise customers.

<article function="img" aria-label="....">
  ...
</article>
Enter fullscreen mode

Exit fullscreen mode

I opted for utilizing an <article> as a result of it’s a self-contained factor. Ideally, as a substitute of utilizing aria-label I ought to have used aria-labelledby and positioned an <h1> or <h2> with the title/description.

On this different article, I clarify ways of making CSS art more accessible for everybody.



Reside Coding Video

The entire course of took round three hours, I sped the video by 2, so there is a 1.5 hours video displaying how it’s achieved step-by-step:


If that is too lengthy or too gradual, there may be additionally an 8x speed video that solely lasts round 20 minutes. 


When you like these movies or CSS artwork, examine my Youtube channel! I publish movies about CSS and live-coding of CSS artwork.

Add a Comment

Your email address will not be published. Required fields are marked *