Retlif

Retlif is a React library for SVG filters.

It’s small & powerful for

simple reusable filters like <Blur>this</Blur> ☞ this,

or complex filters like <Pixelate>this</Pixelate> ☞ .

Filters are composable:

<BlurX>

<Blue>Hello!</Blue>

</BlurX>

☞ Hello!

Filters can be applied to any elements:

<Twist>

</Twist>

☞

Filters are defined as JavaScript functions:

import retlif, { displace^*, turbulence^* } from 'retlif'

const effect1 = turbulence({ baseFrequency: 0.01, numOctaves: 2, seed: 1, stitchTiles: 'stitch' })

const effect2 = displace({ scale: 30 })

const MyFilter = retlif()(effect2('SourceGraphic', effect1))

☞ <MyFilter>...</MyFilter>

Examples

const Sharpen = retlif()(
  convolve({ kernelMatrix: '0 -1 0 -1 5 -1 0 -1 0' })
)

const Negative = retlif()(
  color({ type: 'luminanceToAlpha' })
)

const Relif = retlif()(
  convolve({ kernelMatrix: '-9 -2 0 -2 1 2 0 2 9' })(
    color({ type: 'luminanceToAlpha' })
  )
)

const Pixelate = retlif()(
  morph({ operator: 'dilate', radius: 2 })(
    composite({ operator: 'in', x: 0, y: 0 })(
      'SourceGraphic',
      tile()(
        composite({
          width: 4,
          height: 4,
          operator: 'out',
        })(flood({ height: 1, width: 1 }))
      )
    )
  )
)

const Twist = retlif()(
  displace({
    scale: 20,
  })(
    'SourceGraphic',
    turbulence({
      baseFrequency: 0.01,
      numOctaves: 2,
      seed: 1,
      stitchTiles: 'stitch',
    })
  )
)

const Turbulence = retlif()(
  displace({
    scale: 10,
  })(
    'SourceGraphic',
    turbulence({
      baseFrequency: 0.1,
      numOctaves: 10,
      seed: 1,
      stitchTiles: 'stitch',
    })
  )
)

Feel free to contribute more examples.

Retlif is made for fun. Not recommended for production use due to capability and performance issues.

Install it via yarn add retlif.

☞ GitHub ☞ Shu Ding