Skip to content

A simple web component to apply a halftone filter to an image.

License

Notifications You must be signed in to change notification settings

spaceninja/half-tone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Half-Tone

NPM version

A simple web component to apply a halftone filter to an image.

How Does It Work?

Wrap a standard <img> element in a <half-tone> element, and it will automatically have a halftone filter applies.

Installation

npm install @spaceninja/half-tone

Usage

<half-tone>
  <img src="..." alt="..." />
</half-tone>

<script type="module" src="half-tone.js"></script>

Attributes

You can configure the filter by setting any of the following attributes on the <half-tone> element.

attribute default value
dot-size 4px
dot-color #333
dot-contrast 2000%
dot-angle 15deg
photo-brightness 80%
photo-contrast 120%
photo-blur 2px
blend-mode hard-light

About

A simple web component to apply a halftone filter to an image.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published