Skip to content

Instantly share code, notes, and snippets.

@bigxixi

bigxixi/displacement.html

Forked from akella/displacement.html
Created August 31, 2018 15:48
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bigxixi/a1e422b1a6a84b5e816a56965ecc0e3e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bigxixi/a1e422b1a6a84b5e816a56965ecc0e3e 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