figure.svg<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="128" viewBox="0,0,256,128">
<foreignObject x="0" y="0" width="256px" height="128px">
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
div {
width: 256px;
height: 128px;
--A: #DDFFFF;
--B: white;
background-color: var(--A);
background-image:
radial-gradient(circle at 100% 150%, var(--A) 24%, var(--B) 24%, var(--B) 28%, var(--A) 28%, var(--A) 36%, var(--B) 36%, var(--B) 40%, transparent 40%, transparent),
radial-gradient(circle at 0 150%, var(--A) 24%, var(--B) 24%, var(--B) 28%, var(--A) 28%, var(--A) 36%, var(--B) 36%, var(--B) 40%, transparent 40%, transparent),
radial-gradient(circle at 50% 100%, var(--B) 10%, var(--A) 10%, var(--A) 23%, var(--B) 23%, var(--B) 30%, var(--A) 30%, var(--A) 43%, var(--B) 43%, var(--B) 50%, var(--A) 50%, var(--A) 63%, var(--B) 63%, var(--B) 71%, transparent 71%, transparent),
radial-gradient(circle at 100% 50%, var(--B) 7%, var(--A) 7%, var(--A) 15%, var(--B) 15%, var(--B) 20%, var(--A) 20%, var(--A) 29%, var(--B) 29%, var(--B) 34%, var(--A) 34%, var(--A) 44%, var(--B) 44%, var(--B) 49%, transparent 49%, transparent),
radial-gradient(circle at 0 50%, var(--B) 7%, var(--A) 7%, var(--A) 15%, var(--B) 15%, var(--B) 20%, var(--A) 20%, var(--A) 29%, var(--B) 29%, var(--B) 34%, var(--A) 34%, var(--A) 44%, var(--B) 44%, var(--B) 49%, transparent 49%, transparent);
background-size: 256px 128px;
}
</style>
<div></div>
</html>
</foreignObject>
</svg>