SVG Coffee stain

index.html

<svg xmlns="http://www.w3.org/2000/svg" width="250" height="220" viewBox="0 0 250 220">
    <defs>
        <!-- https://css-tricks.com/squigglevision-in-css-and-svg/ -->
        <!-- https://codepen.io/mullany/pen/MyWxxX/ -->
        <filter id="squiggler">
            <feTurbulence baseFrequency="0.035" numOctaves="3" />
            <feDisplacementMap in="SourceGraphic" scale="12" xChannelSelector="G" />
        </filter>
    </defs>

    <path filter="url(#squiggler)" stroke="chocolate" stroke-width="4" fill="none" 
          d="M105,60  a50,50 0 1,1 -12,-40  a100,100 0 1,1 -50,120  a30,30 0 1,1 20,-10  M153,203 a92,92 0 1,1 80,-80"
    />
    <!-- d="M105,60  a45,45 0 1,1 -12,-40  a100,100 0 1,1 -50,120  a25,25 0 1,1 15,-14  m0,25  a91,91 0 1,0 80,-130" -->
</svg>

style.css

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: lightyellow;
}

svg {
    width: 80vmin;
    height: auto;
}

svg-coffee-stain.markdown

SVG Coffee stain

Using SVG's feTurbulence filter.

A Pen by Andreas Borgen on CodePen.

License.