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);
}
5 Responses