Documentation

The package is installed on NPM and can simply be installed from there.

npm install svelte-multitoneimage

To use import the component and use it as if it were a normal image.

<MultitoneImage alt="alt text" src="src path">

There are three parameters (all reactive)

colors

Takes an array of colors in hex format, defaults to [#000, #fff].

amplitude

higher values make light areas lighter

exponent

higher values make dark areas darker

The following code

<MultitoneImage
  alt="Sibiu"
  src="/sibiu.jpg"
  colors=#123,#def
  amplitude=1
  exponent=1
>

Gives this result

Check the Demo Page for an interactive demo