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; | |
} |