the new code – “Scribble” Image Reveal with SVG and Blend Modes

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.

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 JavaScript, 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.