For shapes like this, I strongly recommend using SVG instead. SVG is a vector graphics format that uses XML syntax. SVG can be directly embedded into HTML, alternatively you can include SVG files via a regular <img> tag.

You can create SVG by hand, but that’s tedious. Personally, I use InkScape, which is free and open source software. However, the SVG files saved by InkScape are usually not well optimized for the web, so I recommend to then run your SVG file through an optimizer like SVGOMG.

Example, based on one of your bitmap drawings:

<svg  width="367.6" height="197.1" viewBox="0 0 97.3 52.2"><g stroke="#000" stroke-width="1.1"><path d="M.5 26.5C.5 15 28.8 1.5 49.1.6 75.6-.6 97.2 12.2 96.7 30.8c-.3 11.7-7.2 20.6-14.3 20.8-11 .3-17.6-20-36.9-19.2-13.7.4-19.2 18.6-27.4 18.5C10 50.8.5 34.5.5 26.5z" fill="#22b14c"/><path d="M6.8 30.2C6.9 35 13 45.8 18.7 43.8c8-2.7 16.8-17.2 30.6-17.2 20.2 0 23.1 12.5 30 13.2 2.5.3 4.2-4.7 1-8a44 44 0 00-31-8.8c-9.5.7-21.7 10.3-26.3 11.2-3.3.6-8.2-2-7.7-5.3.7-4.8 22.4-10.8 34.6-11 20.3-.3 22 5.6 32 9 0 0 7 .8 6.9-3.7-.2-11-25.9-14.2-37.8-14-11.6.2-44.6 7.7-44.2 21z" fill="#00a2e8"/></g></svg>

I wanted to achieve below image behavior. I don’t know the other way, so this picture is hand-painted. All corners in the figure assume round corners.

I googled and couldn’t find a way to do this, so I decided to implement it with the following steps:

1. Draw a circle with radial-gradient
2. Hide the parts other than the necessary parts with such as pseudo elements

div {
  width: 35vmax;
  height: 35vmax;
  background: radial-gradient(blue 20%, green 20% 40%, blue 40% 60%, green 60% 80%, blue 80%);
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

div::after,
div::before {
  content: "";
  background: white;
  position: absolute;
  top: 30%;
  left: -80%;
  width: 200%;
  height: 100%;
  transform: rotate(35deg);
}

div::before {  background: white;
left: auto;
  right: -80%;
  transform: rotate(-35deg);
}

<div></div>

However, while coding, I noticed problem. I have depend a guesswork position adjustment to reproduce the image. Since the layout of the image has regularity like gradation, I would like to realize it with CSS with more regularity instead of position adjustment by guesswork.