WordPress Hosting
Free Photos
WordPress Themes

CSS City Lights Animation

HTML
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="#C54BB0"/> <circle class="sun" cx="400" cy="300" r="270" fill="#FAEFBE"/> <rect x="0" y="400" width="800" height="200" fill="url(#exampleGradient)" /> <defs> <radialGradient id="exampleGradient"> <stop offset="30%" stop-color="#7a378b"/> <stop offset="99%" stop-color="#C54BB0"/> </radialGradient> </defs> <rect x="0" y="100" width="800" height="5" fill="#C54BB0"/> <rect x="0" y="140" width="800" height="10" fill="#C54BB0"/> <rect x="0" y="210" width="800" height="25" fill="#C54BB0"/> <!--road--> <rect x="0" y="450" width="800px" height="25px" fill="#321551"/> <rect x="14" y="458" width="10px" height="10px" fill="#f5e6c4 "/> <rect x="30" y="458" width="80px" height="10px" fill="#14d3c2"/> <rect x="140" y="458" width="150px" height="10px" fill="#f5e6c4 "/> <rect x="300" y="458" width="10px" height="10px" fill="#f5e6c4 "/> <rect x="330" y="458" width="90px" height="10px" fill="#14d3c2"/> <rect x="425" y="458" width="10px" height="10px" fill="#14d3c2"/> <rect x="440" y="458" width="10px" height="10px" fill="#f5e6c4"/> <rect x="460" y="458" width="120px" height="10px" fill="#14d3c2"/> <rect x="520" y="458" width="120px" height="10px" fill="#f5e6c4"/> <rect x="665" y="458" width="10px" height="10px" fill="#14d3c2"/> <rect x="680" y="458" width="115px" height="10px" fill="#f5e6c4"/> <!--back buildings--> <rect x="155" y="231" width="70px" height="220px" fill="#321551 "/> <rect x="185" y="151" width="170px" height="300px" fill="#321551 "/> <rect x="195" y="171" width="85px" height="6px" fill="#544e75 "/> <rect class="lights" x="195" y="191" width="35px" height="6px"fill="#544e75 "/> <rect x="165" y="251" width="55px" height="6px" fill="#544e75 "/> <rect class="lights" x="205" y="265" width="25px" height="6px" fill="#544e75 "/> <rect x="15" y="381" width="70px" height="70px" fill="#321551 "/> <rect x="55" y="351" width="40px" height="100px" fill="#321551 "/> <rect x="93" y="361" width="60px" height="90px" fill="#321551 "/> <rect x="690" y="371" width="60px" height="80px" fill="#321551 "/> <rect x="730" y="391" width="60px" height="59px" fill="#321551 "/> <rect x="25" y="399" width="55px" height="2px" fill="#14d3c2 "/> <rect class="lights" x="65" y="419" width="45px" height="2px" fill="#14d3c2 "/> <rect x="95" y="378" width="15px" height="2px" fill="#14d3c2 "/> <rect x="703" y="399" width="35px" height="2px" fill="#14d3c2 "/> <rect x="770" y="409" width="8px" height="2px" fill="#14d3c2 "/> <rect x="773" y="402" width="5px" height="2px" fill="#14d3c2 "/> <rect class="lights" x="713" y="429" width="65px" height="2px" fill="#14d3c2 "/> <rect x="95" y="429" width="15px" height="2px" fill="#14d3c2 "/> <rect x="385" y="111" width="120px" height="340px" fill="#321551 "/> <rect x="397" y="125" width="10px" height="6px" fill="#544e75 "/> <rect x="417" y="125" width="10px" height="6px" fill="#544e75 "/> <rect class="lights" x="437" y="125" width="10px" height="6px" fill="#544e75 "/> <rect x="457" y="125" width="10px" height="6px" fill="#544e75 "/> <rect x="477" y="125" width="10px" height="6px" fill="#544e75 "/> <rect x="397" y="145" width="10px" height="6px" fill="#544e75 "/> <rect x="417" y="145" width="10px" height="6px" fill="#544e75 "/> <rect x="437" y="145" width="10px" height="6px" fill="#544e75 "/> <rect class="lights" x="457" y="145" width="10px" height="6px" fill="#544e75 "/> <rect x="477" y="145" width="10px" height="6px" fill="#544e75 "/> <rect x="397" y="165" width="10px" height="6px" fill="#544e75 "/> <rect x="417" y="165" width="10px" height="6px" fill="#544e75 "/> <rect x="437" y="165" width="10px" height="6px" fill="#544e75 "/> <rect x="457" y="165" width="10px" height="6px" fill="#544e75 "/> <rect x="477" y="165" width="10px" height="6px" fill="#544e75 "/> <rect x="397" y="185" width="10px" height="6px" fill="#544e75 "/> <rect x="417" y="185" width="10px" height="6px" fill="#544e75 "/> <rect x="437" y="185" width="10px" height="6px" fill="#544e75 "/> <rect x="457" y="185" width="10px" height="6px" fill="#544e75 "/> <rect x="477" y="185" width="10px" height="6px" fill="#544e75 "/> <rect x="477" y="205" width="10px" height="6px" fill="#544e75 "/> <rect x="525" y="151" width="90px" height="300px" fill="#321551 "/> <rect class="lights" x="555" y="165" width="45px" height="6px" fill="#544e75 "/> <rect x="535" y="185" width="25px" height="6px" fill="#544e75 "/> <rect x="605" y="191" width="40px" height="250px" fill="#321551 "/> <rect x="605" y="225" width="25px" height="6px" fill="#544e75 "/> <!--buildings--> <rect x="245" y="191" width="220px" height="260px" fill="#5E40A4 "/> <rect x="120" y="281" width="110px" height="170px" fill="#5E40A4 "/> <rect x="470" y="221" width="110px" height="230px" fill="#5E40A4 "/> <rect x="590" y="251" width="110px" height="200px" fill="#5E40A4 "/> <!--lights1--> <rect x="379" y="191" width="85px" height="260px" fill="#423b66 "/> <rect x="245" y="211" width="70px" height="8px" fill="#FAEFBE "/> <rect x="315" y="211" width="150px" height="8px" fill="#281b41 "/> <rect x="245" y="231" width="170px" height="8px" fill="#FAEFBE "/> <rect x="415" y="231" width="50px" height="8px" fill="#281b41 "/> <rect x="245" y="251" width="40px" height="8px" fill="#281b41 "/> <rect x="285" y="251" width="40px" height="7px" fill="#faefbe "/> <rect x="315" y="251" width="150px" height="8px" fill="#281b41 "/> <rect x="385" y="251" width="60px" height="7px" fill="#faefbe "/> <rect x="245" y="271" width="150px" height="8px" fill="#281b41 "/> <rect x="295" y="271" width="60px" height="7px" fill="#faefbe "/> <rect x="385" y="271" width="20px" height="7px" fill="#faefbe "/> <rect x="445" y="271" width="20px" height="7px" fill="#faefbe "/> <rect x="405" y="271" width="50px" height="8px" fill="#281b41 "/> <rect x="215" y="291" width="150px" height="8px" fill="#281b41 "/> <rect x="315" y="291" width="150px" height="7px" fill="#faefbe "/> <rect x="395" y="291" width="20px" height="8px" fill="#281b41 "/> <rect x="245" y="311" width="150px" height="7px" fill="#faefbe "/> <rect x="345" y="311" width="60px" height="8px" fill="#281b41 "/> <rect x="405" y="311" width="60px" height="7px" fill="#faefbe "/> <rect x="245" y="331" width="150px" height="7px" fill="#faefbe "/> <rect x="305" y="331" width="160px" height="8px" fill="#281b41 "/> <rect x="365" y="331" width="30px" height="7px" fill="#faefbe "/> <rect x="245" y="351" width="150px" height="8px" fill="#281b41 "/> <rect x="315" y="351" width="150px" height="7px" fill="#faefbe "/> <rect x="245" y="371" width="30px" height="7px" fill="#faefbe "/> <rect x="275" y="371" width="90px" height="8px" fill="#281b41 "/> <rect x="365" y="371" width="70px" height="7px" fill="#faefbe "/> <rect x="435" y="371" width="30px" height="8px" fill="#281b41 "/> <rect x="245" y="391" width="50px" height="8px" fill="#281b41 "/> <rect x="295" y="391" width="120px" height="7px" fill="#faefbe "/> <rect x="415" y="391" width="20px" height="8px" fill="#281b41 "/> <rect x="435" y="391" width="30px" height="7px" fill="#faefbe "/> <rect x="245" y="411" width="100px" height="8px" fill="#281b41 "/> <rect x="345" y="411" width="120px" height="7px" fill="#faefbe "/> <rect x="245" y="431" width="40px" height="8px" fill="#281b41 "/> <rect x="285" y="431" width="180px" height="7px" fill="#faefbe "/> <!--lights2 <rect x="120" y="281" width="110px" height="170px" fill="#5E40A4 "/> --> <rect x="200" y="281" width="35px" height="170px" fill="#423b66 "/> <rect x="123" y="291" width="105px" height="2px" fill="#C54BB0 "/> <rect x="123" y="299" width="105px" height="2px" fill="#C54BB0 "/> <rect x="123" y="307" width="105px" height="2px" fill="#C54BB0 "/> <rect x="123" y="314" width="105px" height="2px" fill="#C54BB0 "/> <rect x="123" y="321" width="105px" height="2px" fill="#C54BB0 "/> <rect x="123" y="328" width="105px" height="2px" fill="#C54BB0 "/> <rect x="123" y="336" width="105px" height="2px" fill="#C54BB0 "/> <rect x="123" y="344" width="105px" height="2px" fill="#C54BB0 "/> <rect x="123" y="352" width="105px" height="2px" fill="#C54BB0 "/> <rect x="123" y="360" width="105px" height="2px" fill="#C54BB0 "/> <rect x="123" y="368" width="105px" height="2px" fill="#C54BB0 "/> <rect class="lights" x="123" y="376" width="105px" height="2px" fill="#C54BB0 "/> <rect x="123" y="384" width="105px" height="2px" fill="#C54BB0 "/> <rect x="123" y="392" width="105px" height="2px" fill="#C54BB0 "/> <rect x="123" y="400" width="105px" height="2px" fill="#C54BB0 "/> <rect x="123" y="408" width="105px" height="2px" fill="#C54BB0 "/> <rect class="lights" x="123" y="416" width="105px" height="2px" fill="#C54BB0 "/> <rect x="123" y="424" width="105px" height="2px" fill="#C54BB0 "/> <rect x="123" y="432" width="105px" height="2px" fill="#C54BB0 "/> <rect x="123" y="440" width="105px" height="2px" fill="#C54BB0 "/> <!--lights3 <rect x="470" y="221" width="110px" height="230px" fill="#5E40A4 "/> --> <rect x="534" y="221" width="45px" height="230px" fill="#423b66 "/> <rect x="475" y="225" width="5px" height="225px" fill="#faefbe "/> <rect x="475" y="285" width="6px" height="165px" fill="#3d3154 "/> <rect x="485" y="225" width="5px" height="225px" fill="#faefbe "/> <rect x="485" y="305" width="5px" height="145px" fill="#3d3154 "/> <rect x="495" y="225" width="5px" height="225px" fill="#faefbe "/> <rect x="495" y="275" width="6px" height="180px" fill="#3d3154 "/> <rect x="505" y="225" width="5px" height="225px" fill="#faefbe "/> <rect x="505" y="325" width="5px" height="125px" fill="#3d3154 "/> <rect x="515" y="225" width="5px" height="225px" fill="#faefbe "/> <rect x="515" y="310" width="6px" height="140px" fill="#3d3154 "/> <rect x="525" y="225" width="5px" height="225px" fill="#faefbe "/> <rect x="525" y="255" width="6px" height="195px" fill="#3d3154 "/> <rect x="535" y="225" width="5px" height="225px" fill="#faefbe "/> <rect x="535" y="345" width="5px" height="105px" fill="#3d3154 "/> <rect x="545" y="225" width="5px" height="225px" fill="#faefbe "/> <rect x="545" y="295" width="5px" height="155px" fill="#3d3154 "/> <rect x="555" y="225" width="5px" height="225px" fill="#faefbe "/> <rect x="555" y="365" width="5px" height="85px" fill="#3d3154 "/> <rect x="565" y="225" width="5px" height="225px" fill="#faefbe "/> <rect x="565" y="305" width="5px" height="145px" fill="#3d3154 "/> <rect x="575" y="225" width="3px" height="225px" fill="#faefbe "/> <rect x="575" y="265" width="3px" height="185px" fill="#3d3154 "/> <!--lights4 <rect x="590" y="251" width="110px" height="200px" fill="#5E40A4 "/> --> <rect x="590" y="251" width="25px" height="200px" fill="#423b66 "/> <rect x="674" y="251" width="25px" height="200px" fill="#423b66 "/> <rect x="592" y="261" width="105px" height="3px" fill="#273466 "/> <rect x="592" y="281" width="105px" height="3px" fill="#faefbe "/> <rect x="592" y="301" width="105px" height="3px" fill="#273466"/> <rect x="592" y="321" width="105px" height="3px" fill="#273466 "/> <rect class="lights" x="592" y="341" width="105px" height="3px" fill="#faefbe "/> <rect x="592" y="361" width="105px" height="3px" fill="#273466 "/> <rect x="592" y="381" width="105px" height="3px" fill="#faefbe "/> <rect class="lights" x="592" y="401" width="105px" height="3px" fill="#faefbe "/> <rect x="592" y="421" width="105px" height="3px" fill="#273466 "/> <rect x="592" y="441" width="105px" height="3px" fill="#faefbe "/> <!--lights4 <rect x="155" y="231" width="70px" height="220px" fill="#321551 "/> <rect x="379" y="191" width="85px" height="260px" fill="#423b66 "/> --> <circle class="star" cx="40" cy="100" r="2" fill="#fff"/> <circle class="star" cx="120" cy="150" r="2" fill="#fff"/> <circle class="star" cx="740" cy="60" r="2" fill="#fff"/> <circle class="star" cx="240" cy="40" r="2" fill="#fff"/> <circle class="star" cx="70" cy="240" r="2" fill="#fff"/> <circle class="star" cx="690" cy="140" r="2" fill="#fff"/> <circle class="star" cx="790" cy="240" r="2" fill="#fff"/> <!-- <polygon points="200 500, 230 530, 200 530" fill="#811c73"></polygon> <polygon points="400 500, 450 550, 400 550" fill="#811c73"></polygon> <polygon points="600 510, 550 530, 600 530" fill="#811c73"></polygon> --> </svg>
CSS
body { background-color:#C54BB0 ; overflow: hidden; text-align:center; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; } svg{ position:absolute; width:100%; height:100%; visibility:hidden; transform:translate(-50%, 0%); } @keyframes sun { 0% {transform: translateY(0)} 25% {transform: translateY(85px)} 75% {transform: translateY(-15px)} 100% {transform: translateY(0)} } .sun { animation: sun 10s linear infinite; } @keyframes lights {0% {opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} .lights { animation: lights 2s infinite ease-in-out; } @keyframes star { 0% {transform: translateY(0)} 25% {transform: translateY(15px)} 75% {transform: translateY(-15px)} 100% {transform: translateY(0)} } .star { animation: star 10s linear infinite; }
JAVASCRIPT
//DESIGN FROM THIS DRIBBLE SHOT: https://dribbble.com/shots/3209056-Synthwave //If anyone would like to invite me to dribbble i will be forever grateful: https://dribbble.com/nikitagupp var xmlns = "http://www.w3.org/2000/svg", xlinkns = "http://www.w3.org/1999/xlink", select = function(s) { return document.querySelector(s); }, selectAll = function(s) { return document.querySelectorAll(s); } TweenMax.set('svg', { visibility: 'visible' }) var tl = new TimelineMax(); ScrubGSAPTimeline(tl);
Expand for more options Login