rocket.svg

<svg xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 316.05 320">
  <defs>
    <style>
    .a{fill:#293bab;}
    .a,.b,.c,.d,.e,.f,.g{fill-rule:evenodd;}
    .b{fill:#098c82;}
    .c{fill:#08a59d;}
    .d{fill:url(#a);}
    .e{fill:#4aa3a5;}
    .f{fill:#53b5c2;}
    .g{fill:#08bfba;}
    .h{fill:#0bd8ce;}
    .i{
      fill: #ccc;
      filter: url(#cloud);
    }
    .j{
      transform: translate(100px, 0);
    }
    </style>
    <linearGradient id="a" x1="27.66" y1="162.67" x2="88.14" y2="162.67" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#08bfba"/>
      <stop offset="1" stop-color="#08a59d"/>
    </linearGradient>
  </defs>
  <filter id="cloud" width="200%" height="200%">
    <feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="10" />
    <feDisplacementMap in="SourceGraphic" out="temp1" scale="50"/>
    <feGaussianBlur in="temp1" stdDeviation="5"/>
  </filter>
  <title>rocket</title>
  <g class="j">
    <circle class="i" cx="58" cy="270" r="20">
      <animateTransform attributeName="transform" type="translate" values="0,-50;0,0;150,0" keyTimes="0;0.25;1" dur="10s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="1;1;0" keyTimes="0;.25;1" dur="10s" repeatCount="indefinite" />
    </circle>
    <circle class="i" cx="58" cy="270" r="20">
      <animateTransform attributeName="transform" type="translate" values="110,0;150,0;0,-50;0,0;110,0" keyTimes="0;0.2;0.2;0.45;1" dur="10s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="0.27;0;1;1;0.27" keyTimes="0;0.2;0.2;.45;1" dur="10s" repeatCount="indefinite" />
    </circle>
    <circle class="i" cx="58" cy="270" r="20">
      <animateTransform attributeName="transform" type="translate" values="70,0;150,0;0,-50;0,0;70,0" keyTimes="0;0.4;0.4;0.65;1" dur="10s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="0.53;0;1;1;0.53" keyTimes="0;0.4;0.4;.65;1" dur="10s" repeatCount="indefinite" />
    </circle>
    <circle class="i" cx="58" cy="270" r="20">
      <animateTransform attributeName="transform" type="translate" values="30,0;150,0;0,-50;0,0;30,0" keyTimes="0;0.6;0.6;0.85;1" dur="10s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="0.8;0;1;1;0.8" keyTimes="0;0.6;0.6;.85;1" dur="10s" repeatCount="indefinite" />
    </circle>
    <circle class="i" cx="58" cy="270" r="20">
      <animateTransform attributeName="transform" type="translate" values="0,-10;0,0;150,0;0,-50;0,-10" keyTimes="0;0.05;0.8;0.8;1" dur="10s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="1;1;0;1;1" keyTimes="0;0.05;0.8;0.8;1" dur="10s" repeatCount="indefinite" />
    </circle>

    <circle class="i" cx="58" cy="270" r="20">
      <animateTransform attributeName="transform" type="translate" values="-130,0;-150,0;0,-50;0,0;-130,0" keyTimes="0;0.1;0.1;0.35;1" dur="10s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="0.13;0;1;1;0.13" keyTimes="0;0.1;0.1;.35;1" dur="10s" repeatCount="indefinite" />
    </circle>
    <circle class="i" cx="58" cy="270" r="20">
      <animateTransform attributeName="transform" type="translate" values="-90,0;-150,0;0,-50;0,0;-90,0" keyTimes="0;0.3;0.3;0.55;1" dur="10s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="0.4;0;1;1;0.4" keyTimes="0;0.3;0.3;.55;1" dur="10s" repeatCount="indefinite" />
    </circle>
    <circle class="i" cx="58" cy="270" r="20">
      <animateTransform attributeName="transform" type="translate" values="-50,0;-150,0;0,-50;0,0;-50,0" keyTimes="0;0.5;0.5;0.75;1" dur="10s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="0.67;0;1;1;0.67" keyTimes="0;0.5;0.5;.75;1" dur="10s" repeatCount="indefinite" />
    </circle>
    <circle class="i" cx="58" cy="270" r="20">
      <animateTransform attributeName="transform" type="translate" values="-10,0;-150,0;0,-50;0,0;-10,0" keyTimes="0;0.7;0.7;0.95;1" dur="10s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="0.93;0;1;1;0.93" keyTimes="0;0.7;0.7;.95;1" dur="10s" repeatCount="indefinite" />
    </circle>
    <circle class="i" cx="58" cy="270" r="20">
      <animateTransform attributeName="transform" type="translate" values="0,-30;0,0;-150,0;0,-50;0,-30" keyTimes="0;0.15;0.9;0.9;1" dur="10s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="1;1;0;1;1" keyTimes="0;0.15;0.9;0.9;1" dur="10s" repeatCount="indefinite" />
    </circle>

    <path class="a" d="M77.17,253.09s2.66,10.76,3.77,14.29c2.15,6.82-11,12.57-23,12.57s-23.92-5.69-23-12.57c.47-3.67,3.77-14.29,3.77-14.29,0,6.94,7.24,12.57,19.26,12.57S77.17,260,77.17,253.09Z"/>
    <path class="b" d="M105.83,255.46c-2.71,3.33-20.38-12.72-35.85-5.11V207.16C84.29,204.45,116,242.94,105.83,255.46Z"/>
    <path class="c" d="M9.62,256.16c2.7,3.33,20.38-12.72,35.85-5.11v-43.2C31.15,205.14-.53,243.64,9.62,256.16Z"/>
    <path class="d" d="M88.14,58.66V249.22c0,9.64-13.54,17.46-30.24,17.46s-30.24-7.82-30.24-17.46V58.66c0,9.64,13.54,17.45,30.24,17.45S88.14,68.3,88.14,58.66Z"/>
    <path class="a" d="M57.9,0C54.16,0,27.66,51.76,27.66,58.66c0,9.64,13.54,17.45,30.24,17.45S88.14,68.3,88.14,58.66C88.14,51.76,61.64,0,57.9,0Z"/>
    <path class="e" d="M49.91,145.61v-6.14h0C40.6,138,33.11,134,29.68,128.91v28.38Z"/>
    <path class="f" d="M29.68,157.29h0c3.43,5.12,10.92,9.08,20.21,10.55a0,0,0,0,0,0,0V145.61Z"/>
    <path class="g" d="M113.22,294a1.41,1.41,0,0,1-.63.19c-2.24.16-16.93-28.35-29.78-36.37,0-12.42,0-18.19,0-33.78a20.89,20.89,0,0,1,1.82,1.89c11.47,13.23,32.11,58.93,29.36,67A1.84,1.84,0,0,1,113.22,294Z"/>
    <path class="h" d="M115,292.93l-1.81,1a1.84,1.84,0,0,0,.76-1c2.75-8.1-17.89-53.8-29.36-67A20.89,20.89,0,0,0,82.8,224l1.82-1C96.18,233.47,121.39,289.26,115,292.93Z"/>
    <path class="c" d="M2.83,294a1.41,1.41,0,0,0,.62.19c2.25.16,16.94-28.35,29.79-36.37V224a22.35,22.35,0,0,0-1.81,1.89C20,239.13-.68,284.83,2.07,292.93A1.76,1.76,0,0,0,2.83,294Z"/>
    <path class="h" d="M1,292.93l1.82,1a1.76,1.76,0,0,1-.76-1c-2.75-8.1,17.88-53.8,29.36-67A22.35,22.35,0,0,1,33.24,224l-1.81-1C19.86,233.47-5.34,289.26,1,292.93Z"/>
  </g>
</svg>