example.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500">
  <defs>
    <circle id='bubble0' cx='0' cy='0' r='25' fill='#ffaaff' stroke='#990000' stroke-width='10'/>
    <circle id='bubble1' cx='0' cy='0' r='25' fill='#aaffff' stroke='#000099' stroke-width='10'/>
    <circle id='bubble2' cx='0' cy='0' r='25' fill='#ffaaff' stroke='#990099' stroke-width='5'/>

    <linearGradient id="myGradient1.1" x1="0" x2="0" y1="0" y2="1"><stop offset="30.0%"     stop-color="#990000"/> <stop offset="70.0%" stop-color="#990000"/> </linearGradient>
    <linearGradient id="myGradient1.3" x1="0" x2="0" y1="0" y2="1"><stop offset="30.0%"     stop-color="#990000"/> <stop offset="70.0%" stop-color="#000099"/> </linearGradient>
    <linearGradient id="myGradient1.4" x1="0" x2="0" y1="0" y2="1"><stop offset="30.0%"     stop-color="#990000"/> <stop offset="70.0%" stop-color="#990099"/> </linearGradient>
    <linearGradient id="myGradient3.1" x1="0" x2="0" y1="0" y2="1"><stop offset="30.0%"     stop-color="#000099"/> <stop offset="70.0%" stop-color="#990000"/> </linearGradient>
    <linearGradient id="myGradient3.3" x1="0" x2="0" y1="0" y2="1"><stop offset="30.0%"     stop-color="#000099"/> <stop offset="70.0%" stop-color="#000099"/> </linearGradient>
    <linearGradient id="myGradient3.4" x1="0" x2="0" y1="0" y2="1"><stop offset="30.0%"     stop-color="#000099"/> <stop offset="70.0%" stop-color="#990099"/> </linearGradient>
    <linearGradient id="myGradient4.1" x1="0" x2="0" y1="0" y2="1"><stop offset="30.0%"     stop-color="#990099"/> <stop offset="70.0%" stop-color="#990000"/> </linearGradient>
    <linearGradient id="myGradient4.3" x1="0" x2="0" y1="0" y2="1"><stop offset="30.0%"     stop-color="#990099"/> <stop offset="70.0%" stop-color="#000099"/> </linearGradient>
    <linearGradient id="myGradient4.4" x1="0" x2="0" y1="0" y2="1"><stop offset="30.0%"     stop-color="#990099"/> <stop offset="70.0%" stop-color="#990099"/> </linearGradient>

    <style>
        .mytext {
          font-style:normal; font-variant:normal; font-weight:bold; font-stretch:normal;
          line-height:125%;
          font-family:"Latin Modern Sans"; -inkscape-font-specification:"Latin Modern Sans";
          font-variant-ligatures:normal; font-variant-caps:normal; font-variant-numeric:normal; font-feature-settings:normal;
          text-align:start; letter-spacing:0px; word-spacing:0px; writing-mode:lr-tb; text-anchor:middle;
          fill-opacity:1; stroke:#FFFFFF;
          stroke-width:0; stroke-linecap:butt; stroke-linejoin:miter; stroke-opacity:1;
          stroke-miterlimit:4; stroke-dasharray:none
        }
    </style>
  </defs>

  <g transform="rotate(-0.0,50,100)"> <path d=" M 35.95228825920576 176.35868457873516 a 28.98201941632512, 28.98201941632512  0 0 0 -0.627511814702959 -50.19310005256077 h 29.3504471109944 a 28.98201941632512, 28.98201941632512  0 0 0 -0.627511814702959 50.19310005256077 z" fill="url('#myGradient1.4')" /> </g>
  <use x="50" y="100" xlink:href="#bubble0" />
  <use x="50" y="200" xlink:href="#bubble2" />
  <text x="50" y="100" class="mytext" font-size="12px" fill="#000000">
    <tspan x="50" dy="-0.75em"> 123 </tspan>
    <tspan x="50" dy="1em"> abc </tspan>
    <tspan x="50" dy="1em"> ,./ </tspan>
  </text>
  <text x="50" y="200" class="mytext" font-size="8px" fill="#000000">
    <tspan x="50" dy="-0.75em"> 123 </tspan>
    <tspan x="50" dy="1em"> abc </tspan>
    <tspan x="50" dy="1em"> ,./ </tspan>
  </text>
  <g transform="rotate(-90.0,150,250)"> <path d=" M 123.06811276089215 336.78359164749963 a 90.2481466684331, 90.2481466684331  0 0 0 1.7201635994442164 -75.8009238879215 h 50.42344727932726 a 90.2481466684331, 90.2481466684331  0 0 0 1.7201635994442164 75.8009238879215 z" fill="url('#myGradient4.1')" /> </g>
  <use x="250" y="250" xlink:href="#bubble0" />
  <use x="150" y="250" xlink:href="#bubble2" />
  <text x="250" y="250" class="mytext" font-size="12px" fill="#000000">
    <tspan x="250" dy="0.25em"> 123 </tspan>
  </text>
  <text x="150" y="250" class="mytext" font-size="6px" fill="#000000">
    <tspan x="150" dy="0.25em"> 123 </tspan>
  </text>
  <g transform="rotate(-180.0,400,250)"> <path d=" M 385.9522882592058 326.35868457873516 a 28.98201941632512, 28.98201941632512  0 0 0 -0.627511814702959 -50.19310005256077 h 29.3504471109944 a 28.98201941632512, 28.98201941632512  0 0 0 -0.627511814702959 50.19310005256077 z" fill="url('#myGradient1.4')" /> </g>
  <use x="400" y="250" xlink:href="#bubble0" />
  <use x="400" y="150" xlink:href="#bubble2" />
  <g transform="rotate(-243.43494882292202,300,200)"> <path d=" M 281.59677052142257 288.11118190909815 a 42.811067406107355, 42.811067406107355  0 0 0 0.9337812746069817 -66.8728114572759 h 34.93889640794091 a 42.811067406107355, 42.811067406107355  0 0 0 0.9337812746069817 66.8728114572759 z" fill="url('#myGradient4.1')" /> </g>
  <use x="300" y="200" xlink:href="#bubble2" />
  <use x="200" y="150" xlink:href="#bubble0" />
  <g transform="rotate(-0.0,50,300)"> <path d=" M 71.71700276799743 320.69714450775257 a 42.473765617191404, 42.473765617191404  0 0 0 0 58.60571098449486 h -43.43400553599485 a 42.473765617191404, 42.473765617191404  0 0 0 0 -58.60571098449486 z" fill="url('#myGradient1.3')" /> </g>
  <use x="50" y="300" xlink:href="#bubble0" />
  <use x="50" y="400" xlink:href="#bubble1" />
  <g transform="rotate(-90.0,150,450)"> <path d=" M 171.71700276799743 470.69714450775257 a 42.473765617191404, 42.473765617191404  0 0 0 0 58.60571098449486 h -43.43400553599485 a 42.473765617191404, 42.473765617191404  0 0 0 0 -58.60571098449486 z" fill="url('#myGradient3.1')" /> </g>
  <use x="250" y="450" xlink:href="#bubble0" />
  <use x="150" y="450" xlink:href="#bubble1" />
  <g transform="rotate(-180.0,400,450)"> <path d=" M 415.67600487210717 475.57856272838 a 28.642857142857142, 28.642857142857142  0 0 0 0 48.84287454323995 h -31.352009744214374 a 28.642857142857142, 28.642857142857142  0 0 0 0 -48.84287454323995 z" fill="url('#myGradient1.3')" /> </g>
  <use x="400" y="450" xlink:href="#bubble0" />
  <use x="400" y="350" xlink:href="#bubble1" />
  <g transform="rotate(-243.43494882292202,300,400)"> <path d=" M 326.45889792231253 414.1395445731694 a 88.6071428571429, 88.6071428571429  0 0 0 0 83.5243097286507 h -52.91779584462512 a 88.6071428571429, 88.6071428571429  0 0 0 0 -83.5243097286507 z" fill="url('#myGradient3.1')" /> </g>
  <use x="300" y="400" xlink:href="#bubble1" />
  <use x="200" y="350" xlink:href="#bubble0" />
</svg>