Bubbles SVG background, flat

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/YV5iXToOH-Lh/amnt.svg" alt="Bubbles" width="48" height="48">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Solid aqua background with outlined bubbles floating up both sides"><rect width="1600" height="900" fill="#55BFC0"/><g fill="none" stroke="#D5F1E9" stroke-width="3" opacity=".75"><circle cx="75" cy="835" r="55"/><circle cx="190" cy="755" r="27"/><circle cx="60" cy="630" r="18"/><circle cx="145" cy="530" r="43"/><circle cx="45" cy="405" r="34"/><circle cx="205" cy="325" r="20"/><circle cx="105" cy="205" r="49"/><circle cx="225" cy="90" r="15"/><circle cx="35" cy="65" r="24"/><circle cx="1510" cy="830" r="48"/><circle cx="1400" cy="750" r="22"/><circle cx="1560" cy="655" r="30"/><circle cx="1455" cy="540" r="54"/><circle cx="1565" cy="435" r="19"/><circle cx="1385" cy="340" r="29"/><circle cx="1515" cy="230" r="42"/><circle cx="1405" cy="105" r="17"/><circle cx="1580" cy="75" r="32"/></g><g fill="none" stroke="#A9E0D9" stroke-width="2" opacity=".65"><circle cx="255" cy="865" r="14"/><circle cx="85" cy="725" r="11"/><circle cx="225" cy="610" r="13"/><circle cx="120" cy="375" r="10"/><circle cx="260" cy="215" r="12"/><circle cx="1360" cy="865" r="13"/><circle cx="1530" cy="735" r="11"/><circle cx="1350" cy="625" r="15"/><circle cx="1490" cy="355" r="10"/><circle cx="1345" cy="190" r="12"/></g></svg>

.bubbles {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/YV5iXToOH-Lh/amnt.svg");
  background-size: contain;
}

import BubblesSvg from "./bubbles.jsx"; // from the React tab above

<BubblesSvg width={48} height={48} />