Skip to content

Instantly share code, notes, and snippets.

@marcorinck
Created December 6, 2016 09:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save marcorinck/d99e8f549cd5b6e9a780fa3a6eecaa62 to your computer and use it in GitHub Desktop.
Save marcorinck/d99e8f549cd5b6e9a780fa3a6eecaa62 to your computer and use it in GitHub Desktop.
svg wave with dropshadow
<svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
<defs xmlns="http://www.w3.org/2000/svg">
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="2" dy="2" result="offsetblur" />
<feComponentTransfer xmlns="http://www.w3.org/2000/svg">
<feFuncA type="linear" slope="0.4" />
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<path d="M0,150 C150,250 350,0 500,150 L500,00 L0,0 Z" style="stroke: none; fill:#008193;filter: url(#dropshadow);"></path>
</svg>
<style>
svg {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
body {
height: 100%;
width: 100%;
background-color: #008193;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment