Skip to content

Instantly share code, notes, and snippets.

@JKirchartz
Last active December 6, 2019 16:39
Show Gist options
  • Save JKirchartz/1b32e6fb6d1b1d010b73dfcd9b9fe977 to your computer and use it in GitHub Desktop.
Save JKirchartz/1b32e6fb6d1b1d010b73dfcd9b9fe977 to your computer and use it in GitHub Desktop.
Generating Op-art inspired SVGs here: https://codepen.io/JKirchartz/pen/gObarKg .... saving a few favorites here:
Display the source blob
Display the rendered blob
Raw
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<defs>
<pattern id="stripes" patternUnits="userSpaceOnUse" width="18" height="18" patternTransform="rotate(15)">
<line x1="0" y="0" x2="0" y2="18" stroke="#ef524c" stroke-width="6"></line>
</pattern>
<filter id="noise" x="0%" y="0%" width="100%" height="100%">
<feTurbulence baseFrequency="0.001" type="fractalNoise" numOctaves="2" result="NOISE"></feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="NOISE" scale="20" xChannelSelector="R" yChannelSelector="R"></feDisplacementMap>
</filter>
</defs>
<rect width="100%" height="100%" fill="url(#stripes)" filter="url(#noise)" :opacity="1"></rect>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment