Batik Day (Hari Batik Nasional)

HTML
<div class="indonesia"></div> <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"> Batik Day (Hari Batik Nasional) </text> </symbol> <clippath id="cp-text"> <text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text--line"> Batik Day </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> <font color="white"><p>Batik Day - October 2, 2017 (Hari Batik Nasional)</p></font>
CSS
.indonesia{ width:1000px; height:250px; opacity: 0; } body { background-color:#701923; background-image: radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%), radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%); background-size:80px 80px; background-position:0 0, 40px 40px; } .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: #F2724F; } .colortext .anim-shape:nth-child(2) { fill: #fff; } .colortext .anim-shape:nth-child(3) { fill: #000; } .colortext .anim-shape:nth-child(4) { fill: #CB171E; } .colortext .anim-shape:nth-child(5) { fill: #000; } .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: -115px auto; display: block; text-transform: uppercase; transform: rotate(-0deg); } p { margin-left: 20px; margin-top: 100px; text-transform: uppercase; transform: rotate(-0deg); text-shadow: 2px 2px 4px #000000; text-align: center; }
JAVASCRIPT
Expand for more options Login