border-shape-two-shapes-shadow-ref.html

Enable keyboard shortcuts

<!DOCTYPE html>

<style>

body {

    margin: 0;

svg {

    display: block;

    width: 220px;

    height: 220px;

</style>

<svg viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg">

    <defs>

        <clipPath id="inner-clip">

            <circle cx="100" cy="100" r="50" />

        </clipPath>

    </defs>

    <!-- Outer shadow: r=105 at (110,110) -->

    <circle cx="110" cy="110" r="105" fill="blue" />

    <!-- Outer border shape (filled with border color) -->

    <circle cx="100" cy="100" r="100" fill="yellow" />

    <!-- Background (filled inside inner shape) -->

    <circle cx="100" cy="100" r="50" fill="green" />

    <!-- Inset shadow: 10px stroke on r=50 circle, clipped to inside -->

    <circle cx="100" cy="100" r="50" fill="none" stroke="purple" stroke-width="10" clip-path="url(#inner-clip)" />

</svg>