Transform a pie chart into a multiple gradient chart

Question

I'm having troubles by finding a way of transforming a pie chart data into a section with multiple gradient colors. Heres an example:

As you can see, in the right is shown the common pie chart. I need to transform the data into a new kind of blurred graph shown in the left. This should be dynamic as the pie chart could have more values and colors, so the blured colors displayed in the left could be more.

Is there any way to achieve this with css or javascript?

user_8620333 · Answer

conic-gradient and blur can approximate this:

.box {
  width:300px;
  height:200px;
  margin:5px;
  background: conic-gradient(from -20deg,#8681ee 200deg, #ffeab5 0 250deg,#4391d6 0);
}
.blur {
  filter:blur(20px);
}

Transform a pie chart into a multiple gradient chart

1 Answers