<svg viewBox='0 0 100 100'>
    <defs>
        <filter id='blur'>
            <feGaussianBlur in='SourceGraphic' stdDeviation='15' />
        </filter>
        <mask id='mask-1'>
            <radialGradient id='gradient'>
                <stop offset='30%' stop-color='#000000'/>
                <stop offset='50%' stop-color='#333333'/>
                <stop offset='95%' stop-color='#FFFFFF'/>
            </radialGradient>
            <circle cx='50' cy='50' r='50' fill='url(#gradient)' />
        </mask>
        <mask id='mask-2'>
            <circle cx='50' cy='50' r='49.5' fill='#FFFFFF' />
        </mask>
        <g id='circle' transform='translate(50, 50)' >
            <path d='M0 0-35 35A50 50 0 0 1-35-35Z' fill='#FFFFFF'/>
            <path d='M0 0-35-35A50 50 0 0 1 35-35Z' fill='#414288'/>
            <path d='M0 0 35-35A50 50 0 0 1 35 35Z' fill='#000000'/>
            <path d='M0 0 35 35A50 50 0 0 1-35 35Z' fill='#0CA4A5'/>
        </g>
    </defs>
    <g mask='url(#mask-2)'>
        <use x='0' y='0' xlink:href='#circle' />
        <use x='0' y='0' xlink:href='#circle' mask='url(#mask-1)' filter='url(#blur)' />
    </g>
</svg>
svg {
    display: block;
    margin: 10vmin auto 0;
    height: 80vmin;
    width: 80vmin;
}

body {
    background: #F9DBBD;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.