SVG gaussian blur filter on background image

index.pug

svg.svgs
  filter#blur
    feGaussianBlur(stdDeviation="10")
    
    
.container

  .content
  
    h1 
      | To Autumn
      small By John Keats
    img.pic(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/nature002.jpg")
    p.
        Season of mists and mellow fruitfulness,<br />
        Close bosom-friend of the maturing sun;<br />
        Conspiring with him how to load and bless<br />
        With fruit the vines that round the thatch-eves run;<br />
        To bend with apples the moss'd cottage-trees,<br />
        And fill all fruit with ripeness to the core;<br />
        To swell the gourd, and plump the hazel shells<br />
        With a sweet kernel; to set budding more,<br />
        And still more, later flowers for the bees,<br />
        Until they think warm days will never cease,<br />
        For summer has o'er-brimm'd their clammy cells.<br />

    p.
        Who hath not seen thee oft amid thy store?<br />
        Sometimes whoever seeks abroad may find<br />
        Thee sitting careless on a granary floor,<br />
        Thy hair soft-lifted by the winnowing wind;<br />
        Or on a half-reap'd furrow sound asleep,<br />
        Drows'd with the fume of poppies, while thy hook<br />
        Spares the next swath and all its twined flowers:<br />
        And sometimes like a gleaner thou dost keep<br />
        Steady thy laden head across a brook;<br />
        Or by a cyder-press, with patient look,<br />
        Thou watchest the last oozings hours by hours.<br />

    p.
        Where are the songs of spring? Ay, Where are they?<br />
        Think not of them, thou hast thy music too,—<br />
        While barred clouds bloom the soft-dying day,<br />
        And touch the stubble-plains with rosy hue;<br />
        Then in a wailful choir the small gnats mourn<br />
        Among the river sallows, borne aloft<br />
        Or sinking as the light wind lives or dies;<br />
        And full-grown lambs loud bleat from hilly bourn;<br />
        Hedge-crickets sing; and now with treble soft<br />
        The red-breast whistles from a garden-croft;<br />
        And gathering swallows twitter in the skies.

    p
        | Via 
        a(href='http://www.familyfriendpoems.com/poem/to-autumn-by-john-keats#ixzz3GzZpo1jC') Family Friend Poems 

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import "compass/css3";

$clr1: #ddf;
$clr2: #241;

@import url(http://fonts.googleapis.com/css?family=Amatic+SC:400,700);

body {
  
  background-attachment: fixed;
  background-clip: border-box;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/nature001.jpg);
  background-origin: padding-box;
  background-repeat: repeat;
  background-size: cover;
  color: darken(invert($clr1), 10);
  font-family: 'Amatic SC', cursive, serif;
  font-size: 2.5em;
  font-weight: 400;

}

.svgs { display: none; }

.container {
  
  background: inherit;
  border-radius: 1em;
  margin: 3em;
  padding: 0;
  position: relative;
  
  &:before {
    
    background: inherit;
    bottom: 0;
    content: '';
    filter: url('#blur');
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    
  }
  
}

.content {
  
  background-color: fade-out($clr1, 0.5);
  border-radius: 1em;
  margin: 0;
  padding: 2em 3em;
  position: relative;
  
}


.pic { 
  
  border: solid 0.25em fade-out($clr1, 0.7);
  border-radius: 0.25em;
  float: right; 
  margin: 0 0 0.5em 0.5em;
  width: 400px;
  
}

h1, h2 {
  
  color: $clr2;
  font-size: 1.5em;
  font-weight: 700;
  
  small {
  
    font-size: 0.6em;
    margin-left: 1em;
  
  }
  
} 

a { 
  
  color: $clr2; 
  font-weight: 700;
  text-decoration: none;
  
  &:hover {
    text-decoration: underline;
  }
  
}

svg-gaussian-blur-filter-on-background-image.markdown

SVG gaussian blur filter on background image

Having fun with SVG filters. Based on the awesome work Andreas Storm [http://codepen.io/andreasstorm/details/FbBdy/].

A Pen by John Stammerman on CodePen.

License.