How to Recreate the Banksy Artwork Shredder Using CSS Grid

CodePen included

Lee Martin
Oct 7, 2018 · 3 min read
Featuring a shredding of “After the Rain” by Anne Blenker. (Sorry Anne)
<div id="piece">
<div id="window">
<div id="painting">
<div id="shredded">
<div class="shred"></div>
<div class="shred"></div>
<div class="shred"></div>
<div class="shred"></div>
<div class="shred"></div>
<div class="shred"></div>
<div class="shred"></div>
<div class="shred"></div>
<div class="shred"></div>
<div class="shred"></div>
<div class="shred"></div>
</div>
<div id="original"></div>
</div>
</div>
<div id="frame"></div>
</div>
#shredded{
background: url(ARTWORK_URL);
bottom: 0;
display: grid;
grid-column-gap: 3px;
grid-template-columns: repeat(11, 1fr);
position: absolute;
}
#shredded .shred:nth-child(1){ background-position: 0% 0%; }
#shredded .shred:nth-child(2){ background-position: 10% 0%; }
#shredded .shred:nth-child(3){ background-position: 20% 0%; }
#shredded .shred:nth-child(4){ background-position: 30% 0%; }
#shredded .shred:nth-child(5){ background-position: 40% 0%; }
#shredded .shred:nth-child(6){ background-position: 50% 0%; }
#shredded .shred:nth-child(7){ background-position: 60% 0%; }
#shredded .shred:nth-child(8){ background-position: 70% 0%; }
#shredded .shred:nth-child(9){ background-position: 80% 0%; }
#shredded .shred:nth-child(10){ background-position: 90% 0%; }
#shredded .shred:nth-child(11){ background-position: 100% 0%; }
anime({
targets: '#original',
height: 0,
duration: 100000,
easing: 'linear'
})
anime({
targets: '#painting',
translateY: '100%'
duration: 100000,
easing: 'linear'
})

Lee Martin

Written by

I develop websites for rock 'n' roll bands and get paid in sex and drugs. Previously Silva Artist Management, SoundCloud, and Songkick. Currently: Available