html-css-javascript-online-editor-compiler

.piechart {
    position: relative;
    margin: 30px auto 0;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    background-image: conic-gradient( #FFBA1C 0% 50%, #4BD985 50% 70%, #B827FF 70% 100%);
}
.piechart:before {
	content:"";
    position: absolute;
    top: -15px;
    left: -15px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    box-shadow: 0px 1px 50px rgb(0 0 0 / 8%);
}
.piechart .name{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    outline: 20px solid rgb(255 255 255 / 30%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
}

.legend{
    position: relative;
    margin: 50px auto 0;
    width: 400px;
    display: flex;
}
.legend > span{
	position:relative;
    flex-grow: 1;
    padding-left: 30px;
}
.legend > span.legend-item-one:before{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #ffba1c;
    outline: 5px solid rgb(255 186 28 / 30%);
}
.legend > span.legend-item-two:before{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #b827ff;
    outline: 5px solid rgb(184 39 255 / 30%);
}
.legend > span.legend-item-three:before{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #4bd985;
    outline: 5px solid rgb(75 217 133 / 30%);
}

Press Ctrl+Space Key for Auto complete and Intelli Sense