DIRGAHAYU REPUBLIK #INDONESIA {72th}

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"> INDONESIA #72th </text> </symbol> <clippath id="cp-text"> <text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text--line"> #72 </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> <p>DIRGAHAYU REPUBLIK INDONESIA</p>
CSS
.indonesia{ width:1000px; height:250px; background-color:#ce1126; box-shadow:0px 100px 0px 0px white; opacity: 0.90; } body { overflow: hidden; background: #fff url("")no-repeat; background-attachment: fixed; background-size: 90%; background-position: center; } .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