<div class ="bubble">
 <svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   viewBox="0 0 90.238838 89.958336"
   version="1.1"
   id="svg8"
   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
   sodipodi:docname="bable.svg">
  <defs
     id="defs2" />
  <sodipodi:namedview
     id="base"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.7"
     inkscape:cx="371.68565"
     inkscape:cy="286.98659"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     inkscape:document-rotation="0"
     showgrid="false"
     inkscape:window-width="1920"
     inkscape:window-height="1017"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="レイヤー 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-60.098209,-111.50298)">
    <path
       style="fill:#d9ffff;fill-opacity:1;stroke-width:2.83462;stroke-dashoffset:0.755906"
       id="bg-circle"
       sodipodi:type="arc"
       sodipodi:cx="105.21763"
       sodipodi:cy="156.48215"
       sodipodi:rx="45.119419"
       sodipodi:ry="44.979168"
       sodipodi:start="0"
       sodipodi:end="6.2563596"
       sodipodi:open="true"
       sodipodi:arc-type="arc"
       d="m 150.33705,156.48215 a 45.119419,44.979168 0 0 1 -44.81683,44.97815 45.119419,44.979168 0 0 1 -45.417952,-44.37487 45.119419,44.979168 0 0 1 44.207652,-45.57335 45.119419,44.979168 0 0 1 46.01089,43.76361" />
    <path
       id="m-circle"
       style="fill:#00f2ff;fill-opacity:1;stroke-width:3.42141;stroke-dashoffset:0.755906"
       d="m 140.31567,163.23455 c 0,20.73981 -14.62556,35.45589 -34.44167,35.59499 -19.816087,0.13908 -37.393043,-14.35095 -37.658829,-35.08891 -0.265788,-20.73796 15.510804,-37.81276 35.323339,-38.23001 19.81252,-0.41724 36.23265,15.97951 36.76419,36.71188"
       sodipodi:nodetypes="csssc" />
    <path
       id="bottom-circle"
       style="fill:#00a3ff;fill-opacity:1;stroke-width:2.55765;stroke-dashoffset:0.755906"
       transform="matrix(0.90825218,0.41842321,-0.71812416,0.695915,0,0)"
       d="m 235.95718,134.93026 c 0,5.70447 -10.52882,13.32773 -21.82148,13.32773 -11.29266,0 -24.77717,-7.99544 -24.77717,-13.69992 0,-5.70448 14.72079,-1.18352 26.01345,-1.18352 11.29266,1e-5 20.5852,-4.14877 20.5852,1.55571 z"
       sodipodi:nodetypes="sssss" />
    <circle
       style="fill:#fcffff;fill-opacity:1;stroke-width:2.64583;stroke-dashoffset:0.755906"
       id="white-l"
       cx="125.86607"
       cy="135.31548"
       r="10.583333" />
    <circle
       style="fill:#fcffff;fill-opacity:1;stroke-width:2.64583;stroke-dashoffset:0.755906"
       id="white-s"
       cx="126.24404"
       cy="158.37202"
       r="4.9136906" />
  </g>
</svg>
   <span class="shadow"></span>
</div>

body{
   background: linear-gradient(-45deg, rgba(246, 255, 0, .4), rgba(255, 0, 161, .4));
}
.bubble{
  width:900px;
  margin-top:50px;
  margin-right:auto;
  margin-left:auto;
}

#svg8{
    position: absolute;
    left: 50px;
    right: 0;
    top:50px;
    bottom: 0;
    margin: auto;
    width:100px;
    height:100px;
    -webkit-animation: bound-anim 1s infinite;
            animation: bound-anim 1s infinite;
  }
  
  @-webkit-keyframes bound-anim {
   0%,100% {top: 0;transform: scale(1);}
    30% {top: -60%; transform: scale(0.96,1.04);}
    60% {transform: scale(1);}
    90% {top: 0;transform: scale(1.15,0.9);}
  }
  
  @keyframes bound-anim {
   0%,100% {top: 0;transform: scale(1);}
    30% {top: -60%; transform: scale(0.96,1.04);}
    60% {transform: scale(1);}
    90% {top: 0;transform: scale(1.15,0.9);}
  }
  
  /*影*/
  .shadow{
    position: absolute;
    left: 50px;
    right: 0;
    top:0;
    bottom: -95px;/*対象のheightと微調節*/
    margin: auto;
    width: 60px;
    height: 10px;
    border-radius: 50%;
    background: #000;
    -webkit-filter: blur(6px);
            filter: blur(6px);
    opacity:0.9;
    -webkit-animation: shadow-anim 1s infinite;
            animation: shadow-anim 1s infinite;
  }
  
  @-webkit-keyframes shadow-anim {
    0%,100%  {transform: scale(1);-webkit-filter: blur(4px);filter: blur(4px);}
    30% {transform: scale(1.6,1);-webkit-filter: blur(8px);filter: blur(8px);}
  }
  
  @keyframes shadow-anim {
    0%,100%  {transform: scale(1);-webkit-filter: blur(4px);filter: blur(4px);}
    30% {transform: scale(1.6,1);-webkit-filter: blur(8px);filter: blur(8px);}
  }