Skip to content

Instantly share code, notes, and snippets.

@Sphinxxxx
Created November 5, 2021 10:53
Show Gist options
  • Save Sphinxxxx/be84ff33e9ac14ffbd253dbd1aef2c72 to your computer and use it in GitHub Desktop.
Save Sphinxxxx/be84ff33e9ac14ffbd253dbd1aef2c72 to your computer and use it in GitHub Desktop.
SVG Coffee stain
<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>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: lightyellow;
}
svg {
width: 80vmin;
height: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment