css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>paper shredder animation</title>
    <meta name="description" content="paper shredder animation">
    <meta name="author" content="Philip Ardeljan">
  </head>

  <style>
    html, body {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .paper1 {
      animation-name: shred1;
      animation-duration: 2s;
      animation-fill-mode: forwards;
      animation-timing-function: linear;
      animation-delay: 1s;
      transform: translate3d(64px, 0, 0);
    }

    @keyframes shred1 {
      0% { transform: translate3d(64px, 0, 0); }
      100% { transform: translate3d(64px, 180px, 0); }
    }

    .shredded-paper1 {
      animation-name: shred2;
      animation-duration: 3.8s;
      animation-fill-mode: forwards;
      animation-timing-function: ease-in;
      animation-delay: 300ms;
    }

    @keyframes shred2 {
      0% { transform: translate3d(74px, 180px, 0); }
      50% { transform: translate3d(74px, 180px, 0); opacity: 1; }
      80% { opacity: 1; }
      100% { transform: translate3d(74px, 390px, 0); opacity: 0; }
    }

    #shred-face {
      animation-name: shred-face;
      animation-duration: 3.6s;
      animation-fill-mode: forwards;
      animation-timing-function: ease-out;
      animation-delay: 900ms;
      opacity: 0;
    }

    @keyframes shred-face {
      0% { opacity: 0; }
      9% { opacity: 0; }
      10% { opacity: 1; }
      90% { opacity: 1; }
      91% { opacity: 0; }
      100% { opacity: 0; }
    }

    #no-shred-face {
      animation-name: no-shred-face;
      animation-duration: 3.6s;
      animation-fill-mode: forwards;
      animation-timing-function: ease-out;
      animation-delay: 900ms;
    }

    @keyframes no-shred-face {
      0% { opacity: 1; }
      9% { opacity: 1; }
      10% { opacity: 0; }
      90% { opacity: 0; }
      91% { opacity: 1; }
      100% { opacity: 1; }
    }

    #main-body {
      animation-name: body-shake;
      animation-duration: 2.3s;
      animation-fill-mode: forwards;
      animation-timing-function: linear;
      animation-delay: 1200ms;
      transform-origin: 50% 50%;
    }

    @keyframes body-shake {
      0% { transform: rotate(.5deg); }
      5% { transform: rotate(-.5deg); }
      10% { transform: rotate(.5deg); }
      15% { transform: rotate(-.5deg); }
      20% { transform: rotate(.5deg); }
      25% { transform: rotate(-.5deg); }
      30% { transform: rotate(.5deg); }
      35% { transform: rotate(-.5deg); }
      40% { transform: rotate(.5deg); }
      45% { transform: rotate(-.5deg); }
      50% { transform: rotate(.5deg); }
      55% { transform: rotate(-.5deg); }
      60% { transform: rotate(.5deg); }
      65% { transform: rotate(-.5deg); }
      70% { transform: rotate(.5deg); }
      75% { transform: rotate(-.5deg); }
      80% { transform: rotate(.5deg); }
      85% { transform: rotate(-.5deg); }
      90% { transform: rotate(.5deg); }
      95% { transform: rotate(-.5deg); }
      100% { transform: rotate(0deg); }
    }

  </style>

  <body>
    <svg xmlns="http://www.w3.org/2000/svg" width="272" height="372" viewBox="0 0 472 572">

      <g fill="none" fill-rule="evenodd">
        <rect width="320" height="16" x="16" y="556" fill="#E6EBF2" rx="8"/>
        <g id="main-body">
          <g fill="#4D3487" transform="translate(80 540)">
            <path d="M0 0L48 0 48 6C48 11.5228475 43.5228475 16 38 16L10 16C4.4771525 16 2.45271059e-15 11.5228475 1.77635684e-15 6L0 0zM144 0L192 0 192 6C192 11.5228475 187.522847 16 182 16L154 16C148.477153 16 144 11.5228475 144 6L144 0z"/>
          </g>
          <g transform="translate(21)">
            <path fill="#9A5CB4" d="M0.5,356 L40.4940568,529.15074 C41.960984,535.501672 47.6167639,540 54.1349086,540 L202,540 L224,356 L0.5,356 Z" opacity=".1"/>

            <g id="shredded-paper1" class="shredded-paper1" fill="none" fill-rule="evenodd" transform="translate(75 188)">
              <path fill="#E6EBF2" d="M16.4210525,2.41970613 L16.4210525,150.828341 C16.4210525,152.164708 15.7560422,153.248047 14.9357105,153.248047 L1.9063945,153.248047 C1.08606276,153.248047 0.4210525,152.164708 0.4210525,150.828341 L0.4210525,2.41970613 C0.4210525,1.08333941 1.08606276,1.31578958e-07 1.9063945,1.31578958e-07 L14.9357105,1.31578958e-07 C15.7560422,1.31578958e-07 16.4210525,1.08333941 16.4210525,2.41970613 Z"/>
              <rect width="16" height="18.882" x=".5" y="42.484" fill="#8CABFF" rx="2"/>
              <path fill="#E6EBF2" d="M41.4210525,1.13290351 L41.4210525,70.6176441 C41.4210525,71.2433294 40.7560422,71.7505475 39.9357105,71.7505475 L26.9063945,71.7505475 C26.0860628,71.7505475 25.4210525,71.2433294 25.4210525,70.6176441 L25.4210525,1.13290351 C25.4210525,0.507218251 26.0860628,1.31578958e-07 26.9063945,1.31578958e-07 L39.9357105,1.31578958e-07 C40.7560422,1.31578958e-07 41.4210525,0.507218251 41.4210525,1.13290351 Z"/>
              <rect width="16" height="15.105" x="25.5" y="23.602" fill="#8CABFF" rx="2"/>
              <path fill="#E6EBF2" d="M41.4210525,81.9963668 L41.4210525,131.367103 C41.4210525,131.811669 40.7560422,132.172061 39.9357105,132.172061 L26.9063945,132.172061 C26.0860628,132.172061 25.4210525,131.811669 25.4210525,131.367103 L25.4210525,81.9963668 C25.4210525,81.5518009 26.0860628,81.1914091 26.9063945,81.1914091 L39.9357105,81.1914091 C40.7560422,81.1914091 41.4210525,81.5518009 41.4210525,81.9963668 Z"/>
              <rect width="16" height="13.217" x="25.5" y="95.353" fill="#B4C3D9" rx="2"/>
              <path fill="#E6EBF2" d="M67.4210525,2.01239429 L67.4210525,125.439236 C67.4210525,126.550651 66.7560422,127.45163 65.9357105,127.45163 L52.9063945,127.45163 C52.0860628,127.45163 51.4210525,126.550651 51.4210525,125.439236 L51.4210525,2.01239429 C51.4210525,0.900979687 52.0860628,1.31578958e-07 52.9063945,1.31578958e-07 L65.9357105,1.31578958e-07 C66.7560422,1.31578958e-07 67.4210525,0.900979687 67.4210525,2.01239429 Z"/>
              <rect width="16" height="29.267" x="51.5" y="42.484" fill="#8CABFF" rx="2"/>
              <path fill="#E6EBF2" d="M93.4210525,1.66954195 L93.4210525,104.068107 C93.4210525,104.99017 92.7560422,105.737649 91.9357105,105.737649 L78.9063945,105.737649 C78.0860628,105.737649 77.4210525,104.99017 77.4210525,104.068107 L77.4210525,1.66954195 C77.4210525,0.747479466 78.0860628,1.31578958e-07 78.9063945,1.31578958e-07 L91.9357105,1.31578958e-07 C92.7560422,1.31578958e-07 93.4210525,0.747479466 93.4210525,1.66954195 Z"/>
              <rect width="16" height="15.105" x="77.5" y="50.981" fill="#B4C3D9" rx="2"/>
              <path fill="#E6EBF2" d="M119.421052,0.804957795 L119.421052,50.1756945 C119.421052,50.6202603 118.756042,50.9806522 117.935711,50.9806522 L104.906394,50.9806522 C104.086063,50.9806522 103.421052,50.6202603 103.421052,50.1756945 L103.421052,0.804957795 C103.421052,0.360391953 104.086063,1.31578958e-07 104.906394,1.31578958e-07 L117.935711,1.31578958e-07 C118.756042,1.31578958e-07 119.421052,0.360391953 119.421052,0.804957795 Z"/>
              <rect width="16" height="15.105" x="103.5" y="13.217" fill="#B4C3D9" rx="2"/>
              <path fill="#E6EBF2" d="M119.421052,76.3318499 L119.421052,125.702587 C119.421052,126.147152 118.756042,126.507544 117.935711,126.507544 L104.906394,126.507544 C104.086063,126.507544 103.421052,126.147152 103.421052,125.702587 L103.421052,76.3318499 C103.421052,75.887284 104.086063,75.5268922 104.906394,75.5268922 L117.935711,75.5268922 C118.756042,75.5268922 119.421052,75.887284 119.421052,76.3318499 Z"/>
              <rect width="16" height="15.105" x="103.5" y="88.744" fill="#B4C3D9" rx="2"/>
              <path fill="#E6EBF2" d="M145.421052,1.72916845 L145.421052,107.784825 C145.421052,108.739818 144.756042,109.513994 143.935711,109.513994 L130.906394,109.513994 C130.086063,109.513994 129.421052,108.739818 129.421052,107.784825 L129.421052,1.72916845 C129.421052,0.774175157 130.086063,1.31578958e-07 130.906394,1.31578958e-07 L143.935711,1.31578958e-07 C144.756042,1.31578958e-07 145.421052,0.774175157 145.421052,1.72916845 Z"/>
              <rect width="16" height="15.105" x="129.5" y="32.099" fill="#FFB652" rx="2"/>
              <path fill="#E6EBF2" d="M171.421052,2.22108702 L171.421052,138.44775 C171.421052,139.674422 170.756042,140.668836 169.935711,140.668836 L156.906394,140.668836 C156.086063,140.668836 155.421052,139.674422 155.421052,138.44775 L155.421052,2.22108702 C155.421052,0.994414604 156.086063,1.31578958e-07 156.906394,1.31578958e-07 L169.935711,1.31578958e-07 C170.756042,1.31578958e-07 171.421052,0.994414604 171.421052,2.22108702 Z"/>
              <rect width="16" height="24.546" x="155.5" y="13.217" fill="#FFB652" rx="2"/>
              <rect width="16" height="24.546" x="155.5" y="88.744" fill="#B4C3D9" rx="2"/>
            </g>

            <g id="paper1" class="paper1" fill="none" fill-rule="evenodd" transform="translate(0 0)">
              <path fill="#E6EBF2" d="M192,169 L0,169 L0,6.5 C-4.05812251e-16,3.1862915 2.6862915,0.5 6,0.5 L160,0.5 L160,25.6850746 C160,28.9987831 162.686292,31.6850746 166,31.6850746 L192,31.6850746 L192,169 Z"/>
              <rect width="48" height="64" x="128" y="24" fill="#FFF" rx="4"/>
              <path fill="#FFB653" d="M136,88 L168,88 L168,63 L160,53.5 C161.333333,52.8333333 162,50.3333333 162,46 C162,39.5 157.737793,36 152,36 C146.262207,36 142,41.2714844 142,46 C142,49.1523438 142.666667,51.6523438 144,53.5 L136,63 L136,88 Z"/>
              <path fill="#B4C3D9" d="M160,0.5 L160,26 C160,29.3137085 162.686292,32 166,32 L192,32 L160,0.5 Z"/>
              <g transform="translate(16 23)">
                <rect width="96" height="33" fill="#678FFF" rx="10"/>
                <rect width="56" height="16" y="49" fill="#B4C3D9" rx="4"/>
                <rect width="112" height="16" y="81" fill="#B4C3D9" rx="4"/>
                <rect width="32" height="16" x="128" y="81" fill="#B4C3D9" rx="4"/>
                <rect width="64" height="16" x="96" y="113" fill="#B4C3D9" rx="4"/>
                <rect width="80" height="16" y="113" fill="#B4C3D9" rx="4"/>
                <rect width="24" height="16" x="72" y="49" fill="#B4C3D9" rx="4"/>
              </g>
            </g>

            <g fill="#DFCBE8" fill-rule="nonzero" transform="translate(70 399)">
              <path d="M27.7907788 56.314677L35.6106239 60.9311726 25.4333496 40.7340044 2.64923894 41.412708 10.0067788 45.7767389 0 64.2984602C0 64.2984602 8.03624336 78.8627168 13.5150531 87.5579912 15.7544469 91.1121681 18.7512345 93.1253274 21.626708 93.1253274L50.8863717 93.1253274 50.8863717 72.0297788 19.1053407 72.0199425 27.7907788 56.314677zM54.7258009 32.4748053L76.9000619 33.8027035 87.5330841 13.6481593 80.109969 17.9007124 68.9195575.0675309735C68.9195575.0675309735 52.2864027-.122637168 42.0271593.372455752 37.8303451.575738938 34.5974867 2.18888938 33.1843407 4.68402655L18.7676283 30.1501637 37.1254115 40.5438363 52.7913319 12.8874867 62.1784248 28.1829071 54.7258009 32.4748053zM102.395708 58.2065221L88.4773673 32.4682478 69.9228584 42.5078142 85.0281106 70.4658097 67.0834513 70.2920354 67.3523097 62.1639867 54.4995664 79.7807699 65.9326062 99.4992389 66.2703186 90.9547876 87.3265221 90.9449513C87.3265221 90.9449513 96.316885 76.9446416 101.349783 67.9936239 103.418681 64.3312478 103.762951 60.7410044 102.395708 58.2065221z"/>
            </g>
            <path fill="#744A87" d="M309.5,356 L269.984501,529.115519 C268.530964,535.483395 262.867224,540 256.335562,540 L202,540 L224,356 L309.5,356 Z" opacity=".3"/>
          </g>
          <g transform="translate(17 340)">
            <polygon fill="#2E065C" points="230.5 0 317.5 0 313.5 16 226.5 16 226.5 0"/>
            <polygon fill="#744A87" points=".5 0 4.5 16 228 16 230.5 0"/>
          </g>
          <g transform="translate(15 196)">
            <path fill="#744A87" d="M235,0 L335.9375,0 L337,3.51832461 L337,90 C337,93.3137085 334.313708,96 331,96 L235,96 L235,36.6910995 L235,0 Z"/>
            <circle cx="284" cy="24" r="8" fill="#8CABFF"/>
            <circle cx="308" cy="24" r="8" fill="#FFB652"/>
            <path fill="#9A5CB4" d="M241,0 L2.5,7.14262855e-15 L0.5,4.02094241 L0.5,90 C0.5,93.3137085 3.1862915,96 6.5,96 L235,96 C238.313708,96 241,93.3137085 241,90 L241,0 Z"/>
          </g>

          <g id="no-shred-face" transform="translate(47 230)">
            <path fill="#FFF" d="M68.5,14 L109.5,14 C111.833333,15.6035156 113,17.6035156 113,20 C113,23.5947266 107.730713,38 89,38 C70.2692871,38 65,23.4956055 65,20 C65,17.6695964 66.1666667,15.6695964 68.5,14 Z"/>
            <path fill="#2E065C" d="M13 0C25.8741455 0 26 8.53 26 13 26 17.47 22.6506348 26 13 26 3.34936523 26 2.73878661e-16 17.472778 0 13 0 8.52722203.125854492 1.57662811e-15 13 0zM165 0C177.874146 0 178 8.53 178 13 178 17.47 174.650635 26 165 26 155.349365 26 152 17.472778 152 13 152 8.52722203 152.125854 1.57662811e-15 165 0z"/>
          </g>

          <g id="shred-face" fill="none" fill-rule="evenodd" transform="translate(47 230)">
            <path fill="#2E065C" d="M1 14L24.5 14C25.5 12.9383358 26 11.7716691 26 10.5 26 8.59249631 24.7890723 0 13 0 1.2109277 7.21872483e-16 1.77635684e-14 7.72368849 7.10542736e-15 10.5 4.46722264e-16 12.3508743.333333333 13.517541 1 14zM153 14L176.5 14C177.5 12.9383358 178 11.7716691 178 10.5 178 8.59249631 176.789072 0 165 0 153.210928 7.21872483e-16 152 7.72368849 152 10.5 152 12.3508743 152.333333 13.517541 153 14z"/>
            <path fill="#FFF" d="M58.5,14 L119.5,14 C121.833333,15.6035156 123,17.6035156 123,20 C123,23.5947266 119.808105,38 89,38 C58.1918945,38 55,23.4956055 55,20 C55,17.6695964 56.1666667,15.6695964 58.5,14 Z"/>
          </g>

          <g transform="translate(43 292)">
            <rect width="177" height="16" fill="#744A87"/>
            <rect width="96" height="16" x="177" fill="#2E065C"/>
          </g>
          <g transform="translate(0 308)">
            <path fill="#9A5CB4" d="M256,0 L336,0 C344.836556,-1.623249e-15 352,7.163444 352,16 L352,26 C352,29.3137085 349.313708,32 346,32 L256,32 L256,0 Z"/>
            <path fill="#C296E6" d="M16,0 L258,0 C265.731986,-1.42034288e-15 272,6.2680135 272,14 L272,26 C272,29.3137085 269.313708,32 266,32 L6,32 C2.6862915,32 4.05812251e-16,29.3137085 0,26 L0,16 C-1.082166e-15,7.163444 7.163444,1.623249e-15 16,0 Z"/>
          </g>
          <g transform="translate(17 180)">
            <path fill="#9A5CB4" d="M233,-1.42108547e-14 C285.946658,2.59032502e-14 313.613325,2.59032502e-14 316,-1.42108547e-14 C318.386675,-5.42153128e-14 324.386675,5.33333333 334,16 L233,16 L233,-1.42108547e-14 Z"/>
            <path fill="#C296E6" d="M239,6 L239,16 L5.68434189e-14,16 C7.93760851,5.33333333 13.4376085,8.6297662e-14 16.5,6.2783112e-14 C88.6666667,5.16381777e-14 160.833333,4.04932434e-14 233,2.93483091e-14 L233,2.93098879e-14 C236.313708,2.87011695e-14 239,2.6862915 239,6 Z"/>
          </g>
        </g>
        <g transform="translate(315 380)">
          <g transform="translate(69)">
            <path fill="#B4C3D9" d="M67,0 L78,0 C83.5228475,-1.01453063e-15 88,4.4771525 88,10 L88,116 C88,122.627417 82.627417,128 76,128 L67,128 C60.372583,128 55,122.627417 55,116 L55,12 C55,5.372583 60.372583,1.21743675e-15 67,0 Z"/>
            <path fill="#E6EBF2" d="M12,0 L70,0 C75.5228475,-1.01453063e-15 80,4.4771525 80,10 L80,116 C80,122.627417 74.627417,128 68,128 L12,128 C5.372583,128 8.11624501e-16,122.627417 0,116 L0,12 C-8.11624501e-16,5.372583 5.372583,1.21743675e-15 12,0 Z"/>
          </g>
          <g transform="translate(0 16)">
            <path fill="#2E065C" d="M102,0 L118,0 C128.666667,3.29840971 134,9.96507637 134,20 C134,30.0349236 128.666667,36.7015903 118,40 L102,40 L102,0 Z"/>
            <path fill="#744A87" d="M101,40 C107.624243,40 117,31.045695 117,20 C117,8.954305 108.737705,1.13686838e-13 101,0 C93.2622948,-1.12862014e-13 85,8.954305 85,20 C85,31.045695 94.3757572,40 101,40 Z"/>
            <path fill="#2E065C" d="M0,28 L104.5,28 C107.5,26.6889648 109,24.3556315 109,21 C109,15.9665527 106.062012,12 104.5,12 C103.458659,12 69.7919922,12 3.5,12 L0,28 Z"/>
          </g>
          <g transform="translate(85 72)">
            <path fill="#8CABFF" d="M24,0 C40.3212891,0 48,7.97070312 48,20 C48,32.0292969 40.2050781,40 24,40 C7.79492187,40 8.87486227e-16,32.078125 0,20 C0,7.921875 7.67871094,1.6656512e-15 24,0 Z"/>
            <rect width="8" height="20" x="12" y="10" fill="#678FFF" rx="4"/>
            <rect width="8" height="20" x="28" y="10" fill="#678FFF" rx="4"/>
          </g>
        </g>
      </g>
    </svg>

  </body>
</html>

            
          
!
            
              //original illustration by Matt Anderson https://dribbble.com/shots/5346054-Paper-Shredder-Character
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console