Solution 1 :

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>

Problem :

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.
enter image description here
enter image description here

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::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);

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.


Comment posted by domsson

I’d suggest doing this via SVG instead.

Comment posted by Temani Afif

technically there is no gradient in your picture but two solid colors, right?

Comment posted by Temani Afif

what is “gradation function”?