@prescott/geo-pattern
Version:
Create beautiful generative geometric background images from a string.
76 lines • 2.84 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChevronsComposer = void 0;
const svg_1 = require("../svg");
const base_1 = require("./base");
class ChevronsComposer extends base_1.StructureComposer {
constructor(seed, preset) {
super(seed, preset);
this.name = "chevrons";
this.chevron = {
width: this.map(this.seed.read(0, 1), 0, 15, 30, 80),
height: this.map(this.seed.read(0, 1), 0, 15, 30, 80),
};
this.shape = this.buildChevronShape(this.chevron.width, this.chevron.height);
this.width = this.chevron.width * 6;
this.height = this.chevron.height * 6 * 0.66;
}
generate() {
const nodes = [];
let i = 0;
for (let y = 0; y <= 5; y++) {
for (let x = 0; x <= 5; x++) {
const value = this.seed.read(i, 1);
const styles = {
'stroke': this.preset.stroke.color,
'stroke-opacity': this.preset.stroke.opacity,
'fill': this.fillColor(value),
'fill-opacity': this.opacity(value),
'stroke-width': 1,
};
nodes.push(new svg_1.SVGNode("g", {
...styles,
transform: this.buildTransform([
{ translate: [x * this.chevron.width, y * this.chevron.height * 0.66 - this.chevron.height / 2] },
]),
}, this.shape));
// Add an extra row at the end that matches the first row, for tiling.
if (y === 0) {
nodes.push(new svg_1.SVGNode("g", {
...styles,
transform: this.buildTransform([
{ translate: [x * this.chevron.width, 6 * this.chevron.height * 0.66 - this.chevron.height / 2] },
]),
}, this.shape));
}
i++;
}
}
return nodes;
}
buildChevronShape(width, height) {
const e = height * 0.66;
return [
new svg_1.SVGNode("polyline", {
points: [
0, 0,
width / 2, height - e,
width / 2, height,
0, e,
0, 0,
].join(","),
}),
new svg_1.SVGNode("polyline", {
points: [
width / 2, height - e,
width, 0,
width, e,
width / 2, height,
width / 2, height - e,
].join(","),
}),
];
}
}
exports.ChevronsComposer = ChevronsComposer;
//# sourceMappingURL=chevrons.js.map