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);
