Hibiscus SVG pattern, flat

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect width="200" height="200" fill="#FFF1D8"/><defs><path id="petal" d="M0 0 C-13-12-37-36-36-57 C-36-78-18-84 0-68 C18-84 36-78 36-57 C37-36 13-12 0 0Z"/><g id="leaves" fill="#376B52"><path d="M0 0 C8-18 21-24 31-22 C27-9 15-1 0 0Z"/><path d="M0 0 C-5-18-2-29 8-35 C16-22 13-10 0 0Z"/><path d="M0 0 C-17-7-27-5-34 4 C-20 12-8 9 0 0Z"/></g></defs><use href="#leaves" x="0" y="0"/><use href="#leaves" x="200" y="0"/><use href="#leaves" x="0" y="200"/><use href="#leaves" x="200" y="200"/><use href="#leaves" x="0" y="105"/><use href="#leaves" x="200" y="105"/><use href="#leaves" x="102" y="0"/><use href="#leaves" x="102" y="200"/><g transform="translate(100 101)" fill="#E86F70"><use href="#petal"/><use href="#petal" transform="rotate(72)"/><use href="#petal" transform="rotate(144)"/><use href="#petal" transform="rotate(216)"/><use href="#petal" transform="rotate(288)"/></g><circle cx="100" cy="101" r="9" fill="#376B52"/><path d="M102 99 C122 93 144 83 164 66 L180 50" fill="none" stroke="#F5C653" stroke-width="5" stroke-linecap="round"/><g fill="#F5C653"><circle cx="168" cy="58" r="4"/><circle cx="174" cy="65" r="4"/><circle cx="179" cy="47" r="4"/><circle cx="186" cy="52" r="4"/><circle cx="183" cy="41" r="3"/></g></svg>

.hibiscus {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/2xdbEhCkYQcz/amnt.svg");
  background-size: 200px 200px;
}

import HibiscusSvg from "./hibiscus.jsx"; // from the React tab above

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