Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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