Grainy Image - Web Component

Canvas Method

Pixel-level noise generation using HTML5 Canvas API

example1.html

<!-- Include the script -->
<script src="grainy-image.js"></script>

<!-- Canvas method -->
<grainy-image 
    method="canvas" 
    intensity="0.25" 
    width="600" 
    height="400"
    src="your-image.jpg"
    alt="Description of the image">
</grainy-image>

CSS Gradient Mask Method (Chrome Only)

Sub-pixel gradient distortion for unique grain patterns (supports optional animation-duration)

example2.html

<!-- Include the script -->
<script src="grainy-image.js"></script>

<!-- CSS Mask method -->
<grainy-image 
    method="css-mask" 
    intensity="0.00011" 
    animation-duration="3"
    width="600" 
    height="400"
    src="your-image.jpg"
    alt="Description of the image">
</grainy-image>

CSS Background Layers Method

Layers image and noise.svg using CSS backgrounds with blend modes

example3.html

<!-- Include the script -->
<script src="grainy-image.js"></script>

<!-- CSS Background Layers method -->
<grainy-image 
    method="css-background" 
    intensity="1" 
    width="600" 
    height="400"
    src="your-image.jpg"
    alt="Description of the image">
</grainy-image>

SVG feTurbulence Method

Uses SVG filters for fractal noise generation (supports octaves parameter)

example4.html

<!-- Include the script -->
<script src="grainy-image.js"></script>

<!-- SVG feTurbulence method -->
<grainy-image 
    method="svg-turbulence" 
    intensity="0.02" 
    octaves="3"
    width="600" 
    height="400"
    src="your-image.jpg"
    alt="Description of the image">
</grainy-image>