A simple web component to apply a halftone filter to an image.
Wrap a standard <img> element in a <half-tone> element, and it will automatically have a halftone filter applies.
npm install @spaceninja/half-tone<half-tone>
<img src="..." alt="..." />
</half-tone>
<script type="module" src="half-tone.js"></script>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 |