<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>
@keyframes scribble {
  to {
    stroke-dashoffset: 0;
  }
}
body { background: #000; }
div#stripped {
  max-width: 750px;
  margin: 0 auto;
  background: #000;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/olga.jpg);
  background-size: cover;
  font-size: 0;
}
div#stripped svg {
  background: #000;
  mix-blend-mode: darken;
}

div#stripped svg polyline {
  fill: none;
  stroke: #f00;
  stroke-width: 200;
  stroke-dasharray: 20000;
  stroke-dashoffset: 20000;
  animation: scribble 3s linear forwards;
}
@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
  div#stripped {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/olga-2x.jpg);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.