SVG Grid Custom Element

A web component that generates an SVG-based grid of lines with optional radial gradient effects, ideal for creating dynamic backgrounds or overlay patterns.

!Example

Examples

- CodePen:
Example 1
Example 2
Example 3

Installation

#### NPM

``

bash

npm install @components-1812/grid

Grid package





#### CDN

html





- jsdelivr:

Grid package

Grid.js

Grid.css





- unpkg:

Grid package

Grid.js

Grid.css










Usage



If you use Vite or a framework based on Vite such as Astro, you can import the component in a client-side script file:

js

import '@components-1812/grid';





and use it in your HTML:

html









    radial-gradient="65%, 40%, 15%" follow-mouse

>





> Note:

> 

> If you are using a builder or framework that doesn't support import ?raw, you need to load the component and its stylesheets manually.

> 

> see Adding CSS stylesheets manually










Adding CSS stylesheets manually



If you want to add custom stylesheets to the component or need to load stylesheets from a different path, you can do it like this:



- Using your builder’s import raw method,

CSSStyleSheet, and the component’s AdoptedStyleSheets

 property:

js

    import { Grid } from '@components-1812/grid/Grid.js';

    import GridRawCSS from '@components-1812/grid/src/Grid.css?raw';



    const GridCSS = new CSSStyleSheet();

    GridCSS.replaceSync(GridRawCSS);



    //Add the stylesheets to the component

    Grid.stylesSheets.adopted.push(GridCSS);



    //Define the component

    import('@components-1812/grid/define');










- Using a