Skip to content

Instantly share code, notes, and snippets.

@Sphinxxxx

Sphinxxxx/index.html

Created December 12, 2017 18:10
Show Gist options
  • Save Sphinxxxx/f9e74a45e65ce1217d26b6124bb9a8a6 to your computer and use it in GitHub Desktop.
Save Sphinxxxx/f9e74a45e65ce1217d26b6124bb9a8a6 to your computer and use it in GitHub Desktop.
Download ZIP
SVG Coffee stain
Raw
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.05" numOctaves="3" />
<feDisplacementMap in="SourceGraphic" scale="12" />
</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>
Raw
style.css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: lightyellow;
}
svg {
width: 80vmin;
height: auto;
}
Raw
svg-coffee-stain.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment