Codepad Animation v3 using SVG mask and SVG clippath

HTML
<div class="content"> <svg viewBox="0 0 1500 300"> <symbol id="s-text"> <text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text--line"> Codepad </text> </symbol> <clippath id="cp-text"> <text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text--line"> Codepad </text> </clippath> <g clip-path="url(#cp-text)" class="shadow"> <rect width="100%" height="100%" class="anim-shape anim-shape--shadow"></rect> </g> <g clip-path="url(#cp-text)" class="colortext"> <rect width="100%" height="100%" class="anim-shape"></rect> <rect width="80%" height="100%" class="anim-shape"></rect> <rect width="60%" height="100%" class="anim-shape"></rect> <rect width="40%" height="100%" class="anim-shape"></rect> <rect width="20%" height="100%" class="anim-shape"></rect> </g> <use xlink:href="#s-text" class="text--transparent"></use> </svg> </div>
CSS
body { overflow: hidden; background: #ddd; } .content { font: 800 14.5em/1 'Open Sans', Impact; } .text--transparent { fill: transparent; } .anim-shape { transform-origin: 50% 50%; transform: scale(0, 1) translate(0, 0); animation: moving-panel 3s infinite alternate; } .colortext .anim-shape:nth-child(1) { fill: #0e1826; } .colortext .anim-shape:nth-child(2) { fill: #166973; } .colortext .anim-shape:nth-child(3) { fill: #65bfa6; } .colortext .anim-shape:nth-child(4) { fill: #f2cd5c; } .colortext .anim-shape:nth-child(5) { fill: #f26444; } .shadow { transform: translate(10px, 10px); } .anim-shape--shadow { fill: #000; fill-opacity: 0.2; } @keyframes moving-panel { 100% { transform: scale(1, 1) translate(20px, 0); } } svg { width: 100%; margin: 300px auto; display: block; text-transform: uppercase; transform: rotate(-30deg); }
JAVASCRIPT
Expand for more options Login