CSS Surprise Manga Lines
Tags: css, showdev, webdev
Published: 2024-07-02 10:14:59

---
title: CSS Surprise Manga Lines
published: true
description: When a manga or anime character is surprised, lines focus on and highlight their face. Is it possible to create a similar effect with HTML and CSS?
tags: CSS,showdev,webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9tfiz66r7j3ua2llwb4s.jpg
canonical_url: https://alvaromontoro.com/blog/68054/css-manga-lines
---

<p>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.</p>
<p>I like that effect, and I've seen this done using web technologies with <code>&lt;canvas&gt;</code> 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 &mdash;and I wouldn't recommend it for anything in production.</p>
<p>The effect is displayed in the video below (it will open in a new tab):</p>
<p>

{% youtube https://www.youtube.com/watch?v=WRAuQKH6yYY %}

<p>I coded it using two elements (but I'm positive that <a href="https://twitter.com/ChallengesCss" rel="external nofollow">Temani Afif</a> or <a href="https://twitter.com/anatudor" rel="external nofollow">Ana Tudor</a> 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 <code>::before</code> and <code>::after</code> pseudo-elements, superposed over the image.</p>
<p>In particular, I used <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-conic-gradient" rel="external nofollow">repeating conic gradients</a> (just three) and boosted them with several <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" rel="external nofollow">CSS custom properties</a>. That way, I could control several things:</p>

<ul>
<li>The separation between the lines</li>
<li>The thickness of the lines</li>
<li>The center point for the conic gradient</li>
<li>The size of the ellipse cropping the lines</li>
</ul>

<p>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.</p>
<p>I could have added more custom properties (to set line colors or more options), but I chose against it.</p>
<p>You can see a <a href="https://codepen.io/alvaromontoro/pen/dyEEepP" rel="external nofollow">demo in action on CodePen</a>:</p>

{% codepen https://codepen.io/alvaromontoro/pen/dyEEepP %}

<p>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 &mdash;and for background images to make things worse!&mdash; are inefficient. So we could get a nicer effect, but still be bad for performance.</p>
<p>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.</p>
<p>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:</p>
<p><a href="https://dev.to/alvaromontoro/old-photo-effect-with-css-2699"><b>Old Photo Effect with CSS</b>
<img src="https://media.dev.to/cdn-cgi/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fljopi0w9usxsrvdghnj4.png" alt="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)" class="blog-post-image"></a></p>