<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);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.