A fun little optimistic riff off of Chris Gannon's SVG Paper Shredder: http://codepen.io/chrisgannon/pen/bdGqBo
which he made off this dribbble shot: https://dribbble.com/shots/1732544-Shredder
| <div class="container"> | |
| <svg version="1.1" x="0px" y="0px" viewBox="0 0 600 600"> | |
| <defs> | |
| <clipPath id="pageClipPath" clipPathUnits="userSpaceOnUse"> | |
| <rect class="pageMask" width="210" height="280" x="200" y="0" fill="red" /> | |
| </clipPath> | |
| <clipPath id="mclip" clipPathUnits="userSpaceOnUse"> | |
| <rect class="mMask" width="400" height="280" x="0" y="343" fill="red" /> | |
| </clipPath> | |
| </defs> | |
| <g class="shredderGroup"> | |
| <rect x="125" y="281" fill="#003A72" width="350" height="98" /> | |
| <circle class="lightBlink" fill="#65BF6B" cx="183" cy="308" r="8" /> | |
| <circle fill="#FFFFFF" cx="157" cy="308" r="8" /> | |
| <rect x="149" y="342.3" fill="#638EB3" width="301.3" height="12" /> | |
| </g> | |
| <g class="pageGroup" clip-path="url(#pageClipPath)"> | |
| <rect x="206" y="24" fill="#FFFFFF" width="201.3" height="210" /> | |
| <g> | |
| <g> | |
| <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M229,79c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2 | |
| c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2" /> | |
| </g> | |
| <g> | |
| <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M229,91c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2 | |
| c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2" /> | |
| </g> | |
| <g> | |
| <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M229,103c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2 | |
| c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2" /> | |
| </g> | |
| <g> | |
| <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M229,115c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2 | |
| c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2" /> | |
| </g> | |
| <g> | |
| <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M229,127c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2 | |
| c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2" /> | |
| </g> | |
| <g> | |
| <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M229,139c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2 | |
| c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2" /> | |
| </g> | |
| <g> | |
| <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M229,151c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2 | |
| c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2" /> | |
| </g> | |
| <g> | |
| <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M229,163c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2 | |
| c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2" /> | |
| </g> | |
| <g> | |
| <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M229,175c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2 | |
| c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2 | |
| c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2" /> | |
| </g> | |
| </g> | |
| <g> | |
| <path fill="none" stroke="#BF6C65" stroke-width="2" stroke-miterlimit="10" d="M307,211c2.5,0,2.5,2,5,2c2.5,0,2.5-2,5-2 | |
| c2.5,0,2.5,2,5,2c2.5,0,2.5-2,5-2c2.5,0,2.5,2,5,2c2.5,0,2.5-2,5-2c2.5,0,2.5,2,5,2c2.5,0,2.5-2,5-2" /> | |
| </g> | |
| <g> | |
| <path fill="none" stroke="#BF6C65" stroke-width="2" stroke-miterlimit="10" d="M307,223c2.5,0,2.5,2,5,2c2.5,0,2.5-2,5-2 | |
| c2.5,0,2.5,2,5,2c2.5,0,2.5-2,5-2c2.5,0,2.5,2,5,2c2.5,0,2.5-2,5-2c2.5,0,2.5,2,5,2c2.5,0,2.5-2,5-2" /> | |
| </g> | |
| <rect x="229.3" y="37.7" fill="#BF6C65" width="69.3" height="6.7" /> | |
| <g> | |
| <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M229,60c2.4,0,2.4,2,4.8,2c2.4,0,2.4-2,4.8-2 | |
| s2.4,2,4.8,2c2.4,0,2.4-2,4.8-2c2.4,0,2.4,2,4.8,2c2.4,0,2.4-2,4.8-2c2.4,0,2.4,2,4.8,2c2.4,0,2.4-2,4.8-2c2.4,0,2.4,2,4.8,2" /> | |
| </g> | |
| <g> | |
| <g> | |
| <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M368,91c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2 | |
| c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2 | |
| c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2" /> | |
| </g> | |
| <g> | |
| <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M368,103c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2 | |
| c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2 | |
| c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2" /> | |
| </g> | |
| <g> | |
| <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M368,79c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2 | |
| c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2 | |
| c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2" /> | |
| </g> | |
| <g> | |
| <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M368,115c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2 | |
| c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2 | |
| c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2" /> | |
| </g> | |
| <g> | |
| <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M368,127c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2 | |
| c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2 | |
| c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2" /> | |
| </g> | |
| <g> | |
| <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M368,139c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2 | |
| c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2 | |
| c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2" /> | |
| </g> | |
| <g> | |
| <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M368,151c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2 | |
| c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2 | |
| c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2" /> | |
| </g> | |
| <g> | |
| <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M368,163c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2 | |
| c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2 | |
| c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2" /> | |
| </g> | |
| <g> | |
| <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M368,175c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2 | |
| c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2 | |
| c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2" /> | |
| </g> | |
| </g> | |
| </g> | |
| <g id="money" clip-path="url(#mclip)"> | |
| <rect x="235.526" y="130.018" fill="#5EA04B" width="128.472" height="206.036"/> | |
| <path opacity="0.69" fill="#91C848" d="M347.027,308.183c0,4.434-3.595,8.029-8.029,8.029h-80.187 | |
| c-4.435,0-8.029-3.596-8.029-8.029V164.545c0-4.436,3.595-8.029,8.029-8.029h80.187c4.435,0,8.029,3.594,8.029,8.029V308.183z"/> | |
| <ellipse opacity="0.28" fill="#8FC67D" stroke="#FFFFFF" stroke-miterlimit="10" cx="301.77" cy="227.656" rx="32.52" ry="45.768"/> | |
| <ellipse opacity="0.52" fill="#77AA66" stroke="#FFFFFF" stroke-miterlimit="10" cx="334.289" cy="307.75" rx="18.467" ry="13.65"/> | |
| <g> | |
| <path fill="#FFFFFF" d="M316.826,240.261c-1.521,0-2.283-1.803-2.283-5.405c0-0.304,0.037-0.772,0.114-1.408 | |
| c0.077-0.635,0.114-1.102,0.114-1.408c0-0.861-0.229-1.598-0.685-2.206c-6.902-0.56-10.86-0.838-11.876-0.838 | |
| c-0.607,2.131-1.191,4.263-1.75,6.395c-0.863,2.739-2.207,4.109-4.035,4.109c-2.08,0-3.679-1.32-4.794-3.957 | |
| c-0.762-2.184-1.522-4.364-2.284-6.547h-2.359c-2.741-0.052-5.355,0.229-7.841,0.838l-0.457,0.913 | |
| c-1.319-0.152-1.952-1.143-1.902-2.969v-0.457c0.608-0.304,1.547-0.636,2.815-0.989c1.523-0.304,4.44-0.533,8.754-0.686 | |
| c0.307-0.305,0.458-1.369,0.458-3.196c0-2.335,0.38-4.923,1.142-7.765c0.964-3.806,2.232-5.708,3.807-5.708 | |
| c1.318,0,1.979,1.04,1.979,3.121c0,0.71-0.407,1.598-1.219,2.664c-1.269,1.571-1.929,2.385-1.979,2.436 | |
| c-0.864,1.42-1.294,3.831-1.294,7.231c0,0.405,0.152,0.76,0.456,1.064h7.384c1.522-3.653,2.386-5.683,2.588-6.089 | |
| c1.37-2.283,3.07-3.426,5.1-3.426c2.438,0,4.541,1.192,6.318,3.577c0.152,0.152,1.446,2.386,3.882,6.7h10.429 | |
| c0.761,0,1.396,0.379,1.902,1.142c0.507,0.76,0.762,1.546,0.762,2.358c0,0.507-0.433,1.422-1.294,2.741h-0.837 | |
| c-0.151,0-0.344-0.179-0.571-0.533c-0.229-0.356-0.394-0.583-0.495-0.686c-0.305-0.253-1.676-0.508-4.11-0.76 | |
| c-1.979-0.204-3.478-0.305-4.49-0.305c0,0.659,0.126,1.608,0.38,2.854c0.254,1.242,0.381,2.169,0.381,2.776 | |
| C319.034,238.79,318.297,240.261,316.826,240.261z M294.98,232.725c1.522,0,2.612-1.244,3.273-3.729h-5.938v1.064 | |
| c0,0.559,0.316,1.144,0.951,1.752C293.901,232.421,294.472,232.725,294.98,232.725z M303.049,225.875h10.2v-0.762 | |
| c-1.473-2.893-3.3-4.339-5.48-4.339c-0.863,0-1.865,0.432-3.007,1.294c-1.143,0.862-1.713,1.725-1.713,2.588V225.875z"/> | |
| </g> | |
| <ellipse opacity="0.52" fill="#77AA66" stroke="#FFFFFF" stroke-miterlimit="10" cx="269.25" cy="163.728" rx="18.468" ry="13.65"/> | |
| </g> | |
| </svg> | |
| </div> |
A fun little optimistic riff off of Chris Gannon's SVG Paper Shredder: http://codepen.io/chrisgannon/pen/bdGqBo
which he made off this dribbble shot: https://dribbble.com/shots/1732544-Shredder
| var container = document.querySelector('.container'); | |
| var pageGroup = document.querySelector('.pageGroup'); | |
| var shredderGroup = document.querySelector('.shredderGroup'); | |
| var money = document.querySelector('#money'); | |
| var pageMask = document.querySelector('.pageMask'); | |
| var mClip = document.querySelector('.mMask'); | |
| var lightBlink = document.querySelector('.lightBlink'); | |
| TweenMax.set([container, 'svg'], { | |
| position: 'absolute', | |
| top: '50%', | |
| left: '50%', | |
| xPercent: -50, | |
| yPercent: -50 | |
| }); | |
| //blink the light | |
| TweenMax.to(lightBlink, 0.3, { | |
| fill: '#fff', | |
| repeat: -1, | |
| ease: SteppedEase.config(1), | |
| yoyo: true | |
| }) | |
| var tl = new TimelineMax({ | |
| delay: 0.2, | |
| repeat: -1, | |
| }); | |
| tl.set(pageMask, { | |
| y: 300 | |
| }) | |
| .set(pageGroup, { | |
| y: -300 | |
| }) | |
| .set('.strip', { | |
| y: -300 | |
| }) | |
| .to(pageMask, 1, { | |
| y: -300, | |
| ease: Power1.easeInOut | |
| }) | |
| .to(pageGroup, 1, { | |
| y: 300, | |
| ease: Power1.easeInOut | |
| }, '-=1') | |
| .to('.strip', 0.5, { | |
| y: -20, | |
| ease: Power1.easeOut | |
| }, '-=0.5') | |
| .add("moneydrop") | |
| .to(mClip, 1.5, { | |
| y: -500, | |
| ease: Power4.easeIn | |
| }, 'moneydrop-=1') | |
| .to(money, 1.5, { | |
| y: 500, | |
| ease: Power4.easeIn | |
| }, 'moneydrop-=1') | |
| ; | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script> | |
| <script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12"></script> |
| body { | |
| background-color: #F4D455; | |
| overflow: hidden; | |
| font-family: 'Roboto Condensed', sans-serif; | |
| } | |
| body, | |
| html { | |
| height: 100%; | |
| width: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .container { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| svg { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .link{ | |
| text-anchor:middle; | |
| font-size:12px; | |
| fill:#ffffff; | |
| letter-spacing:0.5px; | |
| opacity:0.7; | |
| cursor:pointer; | |
| } |