Skip to content

Instantly share code, notes, and snippets.

@akella

akella/displacement.html

Created July 16, 2017 06:06
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save akella/891654203f468ad017d6e52861064224 to your computer and use it in GitHub Desktop.
Save akella/891654203f468ad017d6e52861064224 to your computer and use it in GitHub Desktop.
Download ZIP
svg displacement animation
Raw
displacement.html
<filter id="displacement" filterUnits="objectBoundingBox">
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2" result="turb"/>
<feColorMatrix in="turb" result="huedturb" type="hueRotate" values="90">
<animate attributeType="XML" attributeName="values" values="0;180;360" dur="6s" repeatCount="indefinite"/>
</feColorMatrix>
<feDisplacementMap in="SourceGraphic" in2="huedturb" scale="20" result="displace" xChannelSelector="B"/>
<feOffset dx="-5" dy="-5" in="displace" result="unoffsetdisplace"/>
</filter>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment