houdini-paint-dot-grid
v1.1.0
Published
Draw dot-grid backgrounds using CSS Paint API
Downloads
372
Maintainers
Readme
Houdini paint(dot-grid)
Draw dot-grid backgrounds using CSS Paint API.
Learn mode about CSS Houdini. View other available worklets.
Usage
The easiest way to use this worklet is by adding it directly from unpkg.com:
CSS.paintWorklet.addModule('https://unpkg.com/houdini-paint-dot-grid/dist/dot-grid-worklet.js');
Check out houdini.how's guide on ways to use paint worklets from npm and using bundlers.
Then add the following CSS to the element which we want to have the dot-grid background:
.element-selector {
background-image: paint(dot-grid);
--dot-size: 4px;
--dot-spacing: 8px;
--dot-color: yellow;
}
The worklet already parses the values of the custom properties and define
defaults. To support additional length units for --dot-size
and
--dot-spacing
we can optionally load the dot-grid.js
script which will
register these custom properties:
<!-- ES Modules -->
<script type="module" src="https://unpkg.com/houdini-paint-dot-grid/dist/dot-grid.esm.js"></script>
<script type="module">
import 'https://unpkg.com/houdini-paint-dot-grid/dist/dot-grid.esm.js';
</script>
<!-- UMD -->
<script src="https://unpkg.com/houdini-paint-dot-grid/dist/dot-grid.umd.js"></script>
API
paint(dot-grid)
The paint worklet is registered with the name dot-grid
, and it can be used
anywhere where the CSS expects an image, such as background images, border
images, etc.
These custom properties can be used to customize the appearance of the dot grid:
--dot-size
: The diameter of the dots. Default:3px
.--dot-spacing
: The space between each dot. Default:6px
.--dot-color
: The color of the dots. Default:#d2d6db
.
Polyfill
To use paint worklets in browsers that don't support the Houdini Paint API yet, we may use the css-paint-polyfill library.