<svg id="blimp" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510 259">
<g>
<path d="M263.4,253.4V193.5A5.6,5.6,0,0,1,269,188H403.6a5.6,5.6,0,0,1,5.5,5.5v59.9a5.6,5.6,0,0,1-5.5,5.6H269A5.6,5.6,0,0,1,263.4,253.4Z" style="fill: #595959;fill-rule: evenodd"/>
<polygon points="48.6 10.5 94.7 10.5 105.8 115.9 94.7 220.7 48.6 220.7 70.8 114.2 48.6 10.5" style="fill: #595959;fill-rule: evenodd"/>
<polygon points="105.7 115.6 105.8 115.9 94.7 220.7 48.6 220.7 70.5 115.6 105.7 115.6" style="fill: #595959;fill-rule: evenodd"/>
<path d="M338.1,0C478.8,0,509.7,51.7,509.7,115.6S478.8,231.1,338.1,231.1,0,179.4,0,115.6,197.3,0,338.1,0Z" style="fill: #ffa146;fill-rule: evenodd"/>
<path d="M338.1,53.3c140.7,0,171.6,27.9,171.6,62.2s-30.9,62.2-171.6,62.2S0,149.9,0,115.6,197.3,53.3,338.1,53.3Z" style="fill: #f57f31;fill-rule: evenodd"/>
<path d="M0,115.6H509.7c0,63.8-30.9,115.6-171.6,115.6S0,179.4,0,115.6Z" style="fill: #d82d33;fill-rule: evenodd"/>
<path d="M0,115.6H509.7c0,34.4-30.9,62.2-171.6,62.2S0,149.9,0,115.6Z" style="fill: #ff4248;fill-rule: evenodd"/>
</g>
</svg>
:root {
--dist: 1000;
}
svg#blimp {
width: 10%;
--dur: 1s;
animation: fly var(--dur) cubic-bezier(.06,.29,.47,.86) both;
}
@keyframes fly {
100% {transform: translateX(calc(var(--dist) * 1px));}
}
@media screen and (min-width: 700px) {
svg#blimp {
--dur: 2s;
}
}
@media screen and (min-width: 1000px) {
svg#blimp {
--dur: 3s;
}
}
@media screen and (min-width: 1500px) {
svg#blimp {
--dur: 4s;
}
}
body {
background: #AECDFF;
margin: 3em 1em;
}
View Compiled
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var style = document.documentElement.style;
style.setProperty('--dist', width * .75);
// window.onresize = function(event) {
// width = window.innerWidth
// || document.documentElement.clientWidth
// || document.body.clientWidth;
// };
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.