Skip to content

Instantly share code, notes, and snippets.

@caraya

caraya/displacement.html

Forked from akella/displacement.html
Created March 25, 2019 23:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save caraya/5364b3b6638284e3594f50f9f3f7e756 to your computer and use it in GitHub Desktop.
Save caraya/5364b3b6638284e3594f50f9f3f7e756 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