Create a custom pie style circle
I am trying to cut a slice from a circle, but it turns out to be more difficult than I expected ...
It is advisable that I do not use google charts and any other equivalents as I need to control the style of this circle as much as possible (the end result is a boot ring). I also need to be able to animate using jQuery or CSS the slice size.
Please forgive me, but I'm not that far, this is all I have:
The circles I'm worried about are #layer_2
and #layer_3
. Here is the code for this circle:
#layer_2 {
border-radius: 50%;
width: 212px;
height: 212px;
margin: 14px;
background: #5c00d2;
background: -moz-linear-gradient(45deg, #5c00d2 0%, #d586f4 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #5c00d2), color-stop(100%, #d586f4));
background: -webkit-linear-gradient(45deg, #5c00d2 0%, #d586f4 100%);
background: -o-linear-gradient(45deg, #5c00d2 0%, #d586f4 100%);
background: -ms-linear-gradient(45deg, #5c00d2 0%, #d586f4 100%);
background: linear-gradient(45deg, #5c00d2 0%, #d586f4 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#5c00d2', endColorstr='#d586f4', GradientType=1);
-webkit-box-shadow: inset 0px 0px 5px 3px rgba(5, 71, 110, 0.5);
-moz-box-shadow: inset 0px 0px 5px 3px rgba(5, 71, 110, 0.5);
box-shadow: inset 0px 0px 5px 3px rgba(5, 71, 110, 0.5);
}
#layer_3 {
border-radius: 50%;
width: 212px;
height: 212px;
margin: 0;
background: transparent;
-webkit-box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
}
<div id="layer_2">
<div id="layer_3"></div>
</div>
I would like the end result to look something like this:
source to share
Hi I think this will help you figure out the problem, but I don't know how to adjust the gradient. See link
https://jsfiddle.net/w0yu95u3/3/
Change the two values wedge
.container1 .wedge
and .container2 .wedge
to change transform: rotateZ(N)
, but remember that you need to concatenate the two parts in a circle. just check it out.
Here is the main resource https://cssanimation.rocks/watch/
source to share