Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="piece">
  <div id="holder">
    <div id="painting">        
      <div id="original">
        <svg id="MK" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 746 1023" width="745.234" height="1022.382">
  <path d="M204.148 723.554L192.683 982.65l429.915 33.247-1.146-191.456" fill="#e0cfba" stroke="#000"/>
  <path d="M246.566 743.044c9.704-20.866 26.12-60.726 16.443-87.13l-124.208-1.146-26.368 136.426 11.464 19.49C-1.5 898.028 15.357 925.949 0 944.458l1.425 76.859 743.809 1.065-.36-71.669c-62.812-50.362-68.708-90.047-98.2-162.958-10.878-12.413-44.454-41.558-65.29-43.696-23.276-2.387 26.38 123.112 12.692 165.504-18.778 58.158-63.286 47.737-97.586 82.258L380.7 841.638l4.585-6.879z" fill="#FFF"/>
  <path d="M249.317 653.622l-105.93 4.585-32.1 136.427 142.158 176.551 127.254-137.572-204.524-133.74 205.67 133.74 115.791 159.355c38.553-22.151 59.134-24.175 93.568-65.194 19.962-23.779 42.088-116.219 60.648-136.04-7.684-9.09-54.698-42.105-73.039-55.28l72.426 52.374 31.577 125.381-31.985-125.425-57.096 135.06-6.616-96.386" fill="none" stroke="#000" stroke-width="10" stroke-linejoin="round"/>
  <path d="M247.376 741.374c-1.928 5.066 9.273-3.651 9.066-15.532-.481-27.63 14.146-40.26-28.385-69.107-27.376-54.97-25.537-120.014-26.202-175.08l-2.293-199.48 166.234-144.451 193.748-17.197 82.544 37.833 11.464 141.012s5.309 121.956-6.878 181.137c-8.702 79.8-4.176 202.741-56.176 240.753-29.882 20.408-12.252 70.673-2.93 108.518" fill="#e0cfba" stroke="#000" stroke-width="10"/>
  <path d="M529.737 369.305c15.443 50.056 106.534 157.583 37.271 187.673-28.71 1.846-36.775 2.015-58.225-4.318-29.482-8.704-40.64-33.956 1.308-37.01" fill="none" stroke="#000" stroke-width="10"/>
  <path d="M341.147 380.769c28.132-11.764 44.285-35.972 156.49-8.598 35.2 110.698-184.807 141.289-156.49 8.598z" fill="#fff" stroke="#000" stroke-width="10"/>
  <path d="M399.018 363.192c14.404-3.205 27.676-4.37 39.025-2.068 7.094 39.424-45.47 40.17-39.025 2.068z" fill="#010101" stroke="#000" stroke-width=".95"/>
  <path d="M449.345 632.055l7.072-24.702-1.28 14.645c14.702-7.594 24.42 3.196 35.514 8.914 9.359-21.088 40.874 15.376 59.865 9.631 11.593-3.507 28.496-25.553 28.496-25.553l19.41 4.67-4.744-14.97 7.885 26.412" fill="none" stroke="#000" stroke-width="15.081" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M337.075 386.992c11.278-95.194 135.973-98.149 165.773-3.73 3.752 98.997-159.205 128.275-165.773 3.73z" fill="none" stroke="#000" stroke-width="16"/>
  <path d="M501.076 379.05c8.266-14.406 22.445-10.17 36.686-5.16" fill="none" stroke="#000" stroke-width="25"/>
  <path d="M338.264 369.862s-63.57-19.968-94.036-25.941c-27.66-5.423-84.308 6.485-84.308 6.485" fill="none" stroke="#000" stroke-width="24" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M598.523 115.941C514.233 215 467.664 329.874 295.863 392.233l74.519-91.715-94.009 24.075 33.247-64.2c-36.456-6.67-86.116 63.041-143.305 89.422-45.044-54.025-37.026-106.437 3.44-123.815-30.572-58.851-9.554-101.27 51.59-147.891l-19.49-65.347 53.883 47.004 32.1-57.322 2.293 44.711C381.656 21.72 424.789 39.3 462.097 62.059c20.23-24.515 177.21-102.965 226.995 184.576l-32.1-55.029-27.515 97.448c-1.377-84.107-5.191-130.177-58.469-141.012" fill="#9e9c9a" stroke="#000" stroke-width="10" stroke-linejoin="bevel"/>
  <path d="M675.908 340.644c42.438 77.903-65.658 173.404-108.625 77.957-103.537-104.754 66.187-155.861 108.625-77.957z" fill="#e0cfba" stroke="#000" stroke-width="16"/>
  <path d="M538.908 380.196c53.076-34.478 105.447-22.644 145.025 2.866-3.84 33.561-19.777 75.741-74.438 72.636-40.386-4.196-70.587-75.502-70.587-75.502z" fill="#fff" stroke="#000" stroke-width="10"/>
  <path d="M579.607 362.426l35.13-1.425c8.019 36.191-43.885 35.04-35.13 1.425z" fill="#010101"/>
  <path d="M262.616 385.355c-36.722-73.193-77.109-80.068-102.033 0-12.026 31.716-9.276 73.137 17.197 81.397 99.706 31.11 83.996-75.998 27.514-59.615" fill="#e0cfba" stroke="#000" stroke-width="10"/>
</svg>
        <svg id="shredded" viewBox="0 0 160 250">
          <line x1="16" y1="0" x2="16" y2="250"></line>
          <line x1="32" y1="0" x2="32" y2="250"></line>
          <line x1="48" y1="0" x2="48" y2="250"></line>
          <line x1="64" y1="0" x2="64" y2="250"></line>
          <line x1="80" y1="0" x2="80" y2="250"></line>
          <line x1="96" y1="0" x2="96" y2="250"></line>
          <line x1="112" y1="0" x2="112" y2="250"></line>
          <line x1="128" y1="0" x2="128" y2="250"></line>
          <line x1="144" y1="0" x2="144" y2="250"></line>
        </svg>
      </div>
      <div id="wrapperSVG">

      </div>
    </div>
  </div>
  <div id="frame"></div>

</div>

<div id="info">The Story</div>

<div id="infoContent">

  <h1>"Banksy Painting Self-Destructs <br>After Fetching $1.4 Million at Sotheby’s"</h1>
  
  <a href="https://www.nytimes.com/2018/10/06/arts/design/uk-banksy-painting-sothebys.html" target="blank">more here ...</a>
 
  <br><br><br>
  <a href="https://medium.com/@leemartin/how-to-recreate-the-banksy-artwork-shredder-using-css-grid-ff20c0f5a19" target="blank">The trigger: Tutorial on Medium</a>
  
  <br><br>
  <a href="https://codepen.io/leemartin/pen/pxNvod" target="blank">A fork of a pen by Lee Martin</a>
</div>
              
            
!

CSS

              
                html, body{
  height: 100%;
  width: 100%;
  background: grey;
  overflow:hidden;
}

#piece{
  height: 50vh;
  max-height: 820px;
  position: relative;
  width: calc(50vh * 0.774);
  left: 50%;
  top:40px;
  visibility:hidden;
}

#frame{
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/141041/banksy-frame.png);
  background-size: cover;
  height: 100%;
  position: absolute;
  width: 100%;
  -webkit-box-shadow: 4px 6px 32px 0px rgba(0,0,0,0.45);
  -moz-box-shadow: 4px 6px 32px 0px rgba(0,0,0,0.45);
  box-shadow: 4px 6px 32px 0px rgba(0,0,0,0.45);
}

#holder{
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174563/240.jpeg);
  background-size: cover;
  height: calc(50vh * 0.69);
  left: 18.8%;
  position: absolute;
  top: 15.3%;
  width: calc(50vh * 0.774 * 0.617);
}

#painting{
  height: 100%;
  position: absolute;
  width: 100%;
}
  
#original{

  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  -webkit-box-shadow: 4px 1px 32px 0px rgba(0,0,0,0.45);
-moz-box-shadow: 4px 1px 32px 0px rgba(0,0,0,0.45);
box-shadow: 4px 1px 32px 0px rgba(0,0,0,0.45);
  overflow:hidden;
}
#MK{
  position:absolute;
  width:auto;
  height:100%;
  background:green;
}


header{
  position: absolute;
  top: 2em;
  color:black;
}
#wrapperSVG{
  position: absolute;
  width:100%;
  height:100%;
  height:90%;
  top: 0;
  overflow:hidden;
}
#shredded{
  position: absolute;
  top:100%;
  stroke-width:3px;
  stroke:grey;
}

#info{
  position: absolute;
  width: 80px;
  left: auto;
  right: 6px;
  top: 0px;
  padding: 10px;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  z-index: 2;
}
#infoContent{
  position: absolute;
  top:0;
  height:100%;
  width:100%;
  background:grey;
  text-align: center;
  z-index: 1;
  visibility:hidden;
}
h1{
  font-size: 20px;
  font-family: sans-serif;
  margin-top: 30px;
}
a{
  font-size: 17px;
  font-family: sans-serif;
  font-weight: bold;
  margin-top: 30px;
  color: black;
  text-decoration: none;
}
              
            
!

JS

              
                
window.onload = function () {

  var paintHeight = $("#painting").height();
  var shred;

  TweenMax.set("#piece",{autoAlpha:1,xPercent:-50});
  TweenMax.set("#shredded",{yPercent:0});

  resize();
  $(window).resize(resize);

  function resize() {

    shred = paintHeight * 0.9;

    TweenMax.to("#original",4,{y:shred, ease: Power2.easeOut, delay:3})
    TweenMax.to("#shredded",4,{y:-shred, ease: Power2.easeOut, delay:3})
  }

  var $button = $('#info'),
      $info = $('#infoContent');

  var credit = new TimelineMax({paused:true,reversed:true})
  .set("#info",{text:"close"})
  .to($info, 0.4, {autoAlpha:1});

  $('#info').on('click', function(){
    credit.reversed() ? credit.play() : credit.reverse();
  });

}
              
            
!
999px

Console