<svg width="700px" height="500px" viewport="0 0 700 500"id= 'svg' class="wrapper">
<g id="plane" >
<path transform="matrix(0.14910651,0,0,0.15947994,232.63246,199.73735)"
id="plane-body"
d="M 506.352,5.648 C 467.096,-7.444 424.546,2.603 395.284,31.865 L 288.379,138.768 65.64,43.31 23.213,85.735 203.526,223.621 106.066,321.081 42.426,299.866 0,342.294 l 106.066,63.64 63.64,106.066 42.426,-42.427 -21.213,-63.638 97.46,-97.46 137.886,180.313 42.426,-42.427 L 373.233,223.622 480.137,116.718 C 509.399,87.456 519.446,44.906 506.352,5.648 Z"
/>
<circle
id="left-light"
cx="240.41537"
cy="220.728"
r="3"
/>
<circle
id="right-light"
cx="289.41537"
cy="272.728"
r="3"
/>
<circle
id="tail-light"
cx="248.16072"
cy="264.05817"
r="3"
/>
</g>
</svg>
body {
height; 100vh;
display: flex;
justify-content: center;
align-items: center;
background: white;
}
svg {
background: #112836;
}
.wrapper {
overflow: hidden;
}
#plane {
z-index: 1;
transform-origin: 0% 0%;
}
#plane-body {
fill: #999999;
}
#right-light {
fill: white;
}
#left-light {
fill: white;
}
#tail-light {
fill: red;
}
.stars {
fill: white;
box-shadow: 10px 10px 34px 35px rgba(255,255,255,1);
}
const getRandom = (ul) => {
return Math.floor(Math.random() * (ul-1) + 1);
}
for (var i=0; i<50; i++) {
let rx = getRandom(700);
let ry = getRandom(700);
let r = getRandom(3);
var svg = document.getElementById("svg");
var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttributeNS(null, 'cx', rx);
circle.setAttributeNS(null, 'cy', ry);
circle.setAttributeNS(null, 'r', r);
circle.setAttributeNS(null, 'class','stars');
svg.appendChild(circle);
}
gsap.fromTo("#plane",
{
x:-280,
y:250
},
{
x:550,
y:-320,
duration: 4,
repeat: -1,
});
gsap.to("#left-light, #right-light, #tail-light", {
duration: 0.2,
repeatDelay: 0.3,
repeat: -1,
yoyo: true,
alpha: 0,
})
This Pen doesn't use any external CSS resources.