#Codevember 08 - Animated SVG Turbulence Filter

codevember-08-animated-svg-turbulence-filter.markdown

#Codevember 08 - Animated SVG Turbulence Filter

A Pen by Sean Free on CodePen.

License.

index.pug

#container
  #water
svg(xlmns='http://www.w3.org/2000/svg' version='1.1')
  filter#turbulence(filterUnits='objectBoundingBox' x='0' y='0' width='100%' height='100%')
    feTurbulence#feturbulence(type='fractalNoise' numOctaves='3' seed='2')
    feDisplacementMap(xChannelSelector='G' yChannelSelector='B' scale='20' in='SourceGraphic')
    
a#codepen-link(href='https://www.codepen.io/seanfree' target='_blank')

script.js

var timeline = new TimelineMax({
    repeat: -1,
    yoyo: true
  }),
  feTurb = document.querySelector('#feturbulence');

timeline.add(
  TweenMax.to(feTurb, 8, {
    onUpdate: function() {
      var bfX = this.progress() * 0.005 + 0.015, //base frequency x
        bfY = this.progress() * 0.05 + 0.1, //base frequency y
        bfStr = bfX.toString() + ' ' + bfY.toString(); //base frequency string
      feTurb.setAttribute('baseFrequency', bfStr);
    }
  }), 0
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

style.sass

$lakeImg: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/lake.jpg'

body
  background: #cfcfcf
  
#container, #water
  background-image: url($lakeImg)
  background-position: center bottom
  
#container
  position: absolute
  top: calc(50% - 206px)
  left: calc(50% - 275px)
  height: 412px
  width: 550px
  
  &:after
    position: absolute
    top: 10%
    left: 2.5%
    z-index: -1
    content: ''
    display: block
    height: 95%
    width: 95%
    background: #0f0f0f
    filter: blur(30px)
  
  #water
    position: absolute
    bottom: 0
    width: 100%
    height: 66%
    filter: url('#turbulence')
    overflow: hidden
    
#codepen-link
  position: absolute
  bottom: 30px
  right: 30px
  height: 40px
  width: 40px
  z-index: 10
  border-radius: 50%
  box-sizing: border-box
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg')
  background-position: center center
  background-size: cover
  opacity: 0.5
  transition: all 0.25s
  &:hover
    opacity: 0.8
    box-shadow: 0 0 6px #0c0c0c