Skip to content

Instantly share code, notes, and snippets.

@LeaVerou
Created July 30, 2012 10:38
Show Gist options
  • Save LeaVerou/3206117 to your computer and use it in GitHub Desktop.
Save LeaVerou/3206117 to your computer and use it in GitHub Desktop.
SVG noise (Warning: Might be slow!)
/**
* SVG noise (Warning: Might be slow!)
*/
html { background: slategray; }
body { margin: 0 }
<!-- Meant to be used as a CSS background through an external file or URLencoded data URI -->
<svg width="100%" height="100%">
<defs>
<filter id="noise">
<feTurbulence type="fractalNoise" baseFrequency=".7" />
<feComponentTransfer>
<feFuncR type="linear" slope="2" intercept="-.5"/>
<feFuncG type="linear" slope="2" intercept="-.5"/>
<feFuncB type="linear" slope="2" intercept="-.5"/>
</feComponentTransfer>
<feColorMatrix type="saturate" values="0"/>
<feComponentTransfer>
<feFuncA type="table" tableValues="0 .3"/>
</feComponentTransfer>
</filter>
</defs>
<rect width="100%" height="100%" filter="url(#noise)" />
</svg>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment