0.0.4 • Published 4 years ago
@lgv/pattern-hexagon v0.0.4
Pattern Hexagon
ES6 svg hexagon pattern.
Environment Variables
The following values can be set via environment or passed into the class.
Name | Type | Description |
---|---|---|
DIMENSION_UNIT | integer | width/height of single pattern swatch |
Install
# install package
npm install @lgv/pattern-hexagon
HexagonPattern
Use Module
import { HexagonPattern } from "@lgv/pattern-hexagon";
// initialize
const hp = new HexagonPattern();
// generate svg artboard
let artboard = document.createElementNS("http://www.w3.org/2000/svg", "svg");
artboard.setAttributeNS(null, "id", "artboard");
artboard.setAttributeNS(null, "width", 100);
artboard.setAttributeNS(null, "height", 100);
document.body.appendChild(artboard);
// generate pattern in svg
hp.generate(artboard, "my-pattern");
Use Pattern in CSS
// style the hexagons
#my-pattern polygon {
fill: red;
stroke: blue;
}
// use pattern as fill on other elements
.some-class {
fill: url(#my-pattern);
}
Use Pattern in JavaScript
// assume the svg element already exists (let artboard) from above code for using the module
// generate svg shape
let rectangle = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rectangle.setAttributeNS(null, "x", 0);
rectangle.setAttributeNS(null, "y", 0);
rectangle.setAttributeNS(null, "width", 50);
rectangle.setAttributeNS(null, "height", 50);
rectangle.setAttributeNS(null, "fill", "url(#my-pattern)");
artboard.appendChild(rectangle);