DEV Community

Cover image for CSS Surprise Manga Lines
Alvaro Montoro
Alvaro Montoro

Posted on • Originally published at alvaromontoro.com

18 3 3 2 3

CSS Surprise Manga Lines

There's a common effect in manga and anime when a person is surprised, shocked, or even disgusted: lines "radiate" from their face to canvas and highlight their facial expression.

I like that effect, and I've seen this done using web technologies with <canvas> or SVG, so I wanted to see if it was possible to do it only with CSS. The answer is yes... although it's not super efficient —and I wouldn't recommend it for anything in production.

The effect is displayed in the video below (it will open in a new tab):

I coded it using two elements (but I'm positive that Temani Afif or Ana Tudor could find a cool way of doing it with only one using masks). One element is the image, and the other one is its container. The lines are drawn with the ::before and ::after pseudo-elements, superposed over the image.

In particular, I used repeating conic gradients (just three) and boosted them with several CSS custom properties. That way, I could control several things:

  • The separation between the lines
  • The thickness of the lines
  • The center point for the conic gradient
  • The size of the ellipse cropping the lines

These last two points are important: by allowing the epicenter and the size of the "face canvas" to be set, the effect is easily customizable and can be applied to any image.

I could have added more custom properties (to set line colors or more options), but I chose against it.

You can see a demo in action on CodePen:

Once all the custom properties were in place, I added an animation to update them at different points and applied them to the pseudo-elements with different speeds, delays, and timing functions to give a stronger impression of randomness. The effect is far from perfect, and it could be improved by changing the conic gradients and the timings... still, such fast animations —and for background images to make things worse!— are inefficient. So we could get a nicer effect, but still be bad for performance.

A better way would be to generate a GIF with the lines and position it accordingly on top of the image (using these same variables). Browsers would be optimized for that over these costly CSS animations.

This mini-project was a fun way to practice backgrounds, custom properties, and animations. If you like creating things with CSS and different effects using that language, check this other article:

Old Photo Effect with CSS A picture of a woman with an arrow and the text CSS pointing to the same picture but old-looking (in sepia, blurry, and with noise)

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (4)

Collapse
 
madsstoumann profile image
Mads Stoumann

Love it!

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks!

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

Nice and educative, thanks Alvaro!! ❤️

Collapse
 
henrywoody profile image
Henry Woody

Very cool effect!

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay