<button class="drone-container">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="300" height="130" viewBox="160 200 480 140" enable-background="new -102.833 -102.889 341.333 300.667" xml:space="preserve">
      <g>
        <path fill="#010101" d="M577.6,233.28c0-1.44-1.439-2.88-2.88-2.88c-1.439,0-2.88,1.44-2.88,2.88v3.36h5.76V233.28z"></path>
        <path fill="#010101" d="M578.08,271.2v-15.84c-0.96,0-1.44,0-2.4,0s-2.399,0-3.359,0v15.36c-2.4-0.48-3.84-0.48-3.84-0.48H463.84   l-11.52-20.64c-0.96-1.44-3.36-2.88-5.28-2.88h-28.32c-5.279-4.8-11.52-8.16-18.72-8.16s-13.92,3.36-18.72,8.16h-28.32   c-1.92,0-4.32,1.44-5.28,2.88l-11.52,20.64H232c0,0-1.44,0-3.84,0.48v-15.36c-1.44,0-2.4,0-3.84,0c-0.48,0-1.44,0-2.4,0v16.32   c-7.68,1.44-16.8,4.32-16.8,10.08c0,10.08,6.24,27.84,15.36,27.84s11.04-4.8,11.04-4.8l11.04-25.92c0,0,49.44,0,108.96,0   l8.16,23.521c-7.2,7.68-15.84,19.68-15.84,31.68c0,22.08,3.84,28.8,3.84,28.8s3.84,9.601,4.32-1.439s-3.36-10.561-3.36-28.32   c0-9.12,7.2-19.2,13.92-26.88h74.4c6.72,7.68,13.92,17.76,13.92,26.88c0,17.28-3.84,16.8-3.359,28.32   c0.479,11.52,4.319,1.439,4.319,1.439s3.84-6.72,3.84-28.8c0-12-8.159-23.521-15.84-31.68L448,278.88c59.521,0,108.96,0,108.96,0   L568,304.8c0,0,1.44,4.8,11.04,4.8c9.601,0,15.36-18.24,15.36-27.84C594.4,275.52,585.28,272.64,578.08,271.2z"></path>
        <path fill="#010101" d="M228.16,233.28c0-1.44-1.44-2.88-2.88-2.88c-1.44,0-2.88,1.44-2.88,2.88v2.88h5.76V233.28z"></path>
      </g>
    </svg>
    <svg class="blade bladeLeft" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       height="8" width="75" viewBox="0 0 75 8" enable-background="new 0 0 75 8" xml:space="preserve">
      <rect height="8px" width="75px" ry="8px"></rect>
    </svg>

    <svg class="blade bladeRight" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       height="8" width="75" viewBox="0 0 75 8" enable-background="new 0 0 75 8" xml:space="preserve">
      <rect height="8px" width="75px" ry="8px"></rect>
    </svg>
    <span class="camera-container">
      <svg class="camera" height="40px" width="60px" xmlns="http://www.w3.org/2000/svg">
        <rect x="22" y="1" rx="2" height="5" width="20px"></rect>
        <rect x="0" y="5" rx="2" height="35" width="60px"></rect>
        <circle cx="33" cy="24" r="9" stroke="#fff" stroke-width="4" fill="none" />
      </svg>
      <svg class="flash" height="5" width="5">
        <rect height="5" width="5"></rect>
      </svg>
    </span>
  </button>
body:before {
  content: "";
  position: fixed;
  z-index:-1;
  left:0;
  top: 0;
  right: 0;
  bottom: 0;
  background: url(https://picsum.photos/id/238/2000/1500) no-repeat 50% 50%;
  background-size:cover;
}
.drone-container {
  position: fixed;
  left:0;
  bottom:0;
  border-radius:50%;
  z-index:999;
  transform: translate(-30%, 20%) scale(0.3);
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  background:none;
  border: none;
  cursor: pointer;
  animation:fly 35s infinite;
}
@keyframes fly{
  0%{  transform: translate(-30%, 20%) scale(0.3);}
  5%{  transform: translate(-20%, 10%) scale(0.3);}
  10%{  transform: translate(-10%, 10%) scale(0.3);}
  15%{  transform: translate(0%, 0%) scale(0.3);}
  20%{  transform: translate(10%, -10%) scale(0.4);}
  25%{  transform: translate(40%, -55%) scale(0.5);}
  30%{  transform: translate(130%, -70%) scale(0.6);}
  35%{  transform: translate(140%, -140%) scale(0.6);}
  40%{  transform: translate(270%, -30%) scale(0.7);}
  45%{  transform: translate(360%, -300%) scale(0.3);}
  50%{  transform: translate(400%, -200%) scale(0.3);}
  55%{  transform: translate(0%, -300%) scale(0.3);}
  60%{  transform: translate(30%, -100%) scale(0.3);}
  65%{  transform: translate(20%, -50%) scale(0.3);}
  75%{  transform: translate(-30%, 20%) scale(0.3);}
  100%{  transform: translate(-30%, 20%) scale(0.3);}
}
.drone-container:hover{
  animation-play-state:paused;
}
.drone-container:before{
  content:"";
  position:absolute;
  z-index:-1;
  left:0;
  top:-50%;
  width:300px;
  height:300px;
  border-radius:50%;
 background:rgba(255,255,255,0.5);
  box-shadow:0 0 10px 10px rgba(0,0,0,0.5);
}


.camera-container {
  position: absolute;
  width: 60px;
  top: 110px;
  left: 120px;
}

.flash {
  position: absolute;
  bottom: 30px;
  left: 45px;
  animation-name: flash;
  animation-duration: 0.5ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: running;
}

.blade {
  position: absolute;
  top: 46px;
  animation-duration: 0.2s;
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: running;
}

.bladeLeft {
  left: 5px;
}

.bladeRight {
  left: 224px;
}

@keyframes spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}

@keyframes flash {
  0% {
    fill: #fff;
    opacity: 1;
  }
  11% {
    fill: #fff;
  }
  22% {
    fill: #fff;
  }
  55% {
    fill: yellow;
  }
  77% {
    fill: yellow;
  }
  100% {
    fill: #fff;
  }
}
// Drone forked from //https://codepen.io/tvweinstock/pen/KpyrRx

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.