.pie-marker {
    position: relative;

    overflow: hidden;

    width: 50px;
    height: 50px;

    border-radius: 50%;
    background-color: currentColor;
}

.pie-marker-title {
    position: absolute;
    top: 120%;
    left: 50%;

    padding: 2px 4px;

    background-color: #fff;

    transform: translateX(-50%);
}

:root {
    --radius: 20px;
    --icon: #fff;
}

.circle {
    position: relative;

    width: var(--radius, 20px);
    height: var(--radius, 20px);

    border-radius: 50%;
    background-color: currentColor;
}

.circle::before {
    position: absolute;
    top: 50%;
    left: 50%;

    display: inline-block;

    width: 50%;
    height: 50%;

    content: '';

    border-radius: 50%;
    background: no-repeat center center #fff;
    background-image: var(--icon);

    transform: translate3d(-50%, -50%, 0);
}

:root {
    --size: 50px;
}

.icon {
    position: relative;

    width: var(--size, 20px);
    height: var(--size, 20px);

    background: no-repeat center center;
    background-size: contain;
}

.icon-title {
    position: absolute;
    top: 120%;
    left: 50%;

    padding: 2px 4px;

    background-color: #fff;

    transform: translateX(-50%);
}