Cet article est également disponible en français

Using a combination of CSS animation, SVG dash-array and blend modes, we can recreate a “scratch to reveal” effect for images or other content in just five steps:

The Process

  1. Make an SVG element the same dimensions as your chosen content and draw a polyline, line or path element that covers the canvas from one side to the other, given a sufficiently thick stroke-width.
    The “scribble” in Illustrator, before export as an SVG
  2. Save the SVG and embed it on an HTML page inside a <div> element. The code will look something like this:
    <div id="stripped">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1500 1062">
            <polyline points="0,154 131,0 0,348 269,0 0,562 437,0 0,766 565,14 0,1062 719,0 289,1062 843,0 543,1062 995,0 729,1062 1161,0 947,1062 1307,0 1143,1062 1500,162 1299,1062 1500,830"/>
        </svg>
    </div>
  3. Style the elements and place the image as a <div> background`:
    div#stripped { 
        background: #000;
        background-image: url(olga.jpg);
        background-size: cover;
        font-size: 0;
    }
    div#stripped svg {
        background: #fff; 
    }
    div#stripped svg polyline {  
        fill: none;
        stroke: #000; 
        stroke-width: 200;
    }
  4. At this point your image will be almost entirely obscured by the polyline. Let’s eliminate that by setting the stroke-dasharray and stroke-dashoffset of the polyline to a sufficiently high value:
    div#stripped svg polyline {  
        stroke-dasharray: 20000;
        stroke-dashoffset: 20000;
    }
  5. Apply the correct blend mode to the <svg> element, and animate the polyline’s stroke-dashoffset to 0:
    @keyframes scribble {
        to { stroke-dashoffset: 0; }
    }
    div#stripped svg polyline {
        animation: scribble 3s linear forwards;
    }
    div#stripped svg {
        mix-blend-mode: lighten;
    }

The result is as shown at the top of this article: a scratch-out reveal of the content of the <div>.

Variations

There are many possible variants of this technique, for example, you could alter the colors and blend modes for different visual effects using this combination:

div#stripped { 
    background: #000; 
    background-image: url(olga.jpg);
}
div#stripped svg { 
    background: #000;
    mix-blend-mode: darken;
}
div#stripped svg polyline {  
    fill: none;
    stroke: #f00; 
}

…produces the example you see below.

See the Pen "Scribble" Image Reveal with SVG & Blend Modes by Dudley Storey (@dudleystorey) on CodePen.

Alternatively:

  • the <polyline> could be plotted automatically with , rather than by hand.
  • a collection of <line> elements criss-crossing the image could be animated sequentially for the reveal.

Limitations

Right now there’s no method in SVG to change the edges of the polyline stroke to give it a rougher appearance; that should be addressed in SVG2, however.

Photograph by Sean Archer, used under a Creative Commons Attribution Non-Commercial license.