CODEWITHSUNDEEP
svgd3.jstexturesmaskclip-path
toowren
toowren

Reputation: 113

Correct tileable pattern at D3.JS / SVG

Having an random set of paths with different dimensions. The task is to set a uniform even pattern on them. By now, it's looks like:

enter image description here

Needs to be

enter image description here

I have played with different preserveAspectRatio attribute as well as viewBox one, but without any success.

It could be done by cloning start along the screen and apply shapes as clip-paths, the task is to do everything with patterns.l

const data = { 
    
    poly0: [{"x":107,"y":392.2},{"x":186,"y":361},{"x":257,"y":355.3},{"x":257,"y":333.9},{"x":107,"y":372.4}],
    poly1: [{"x":107,"y":406.5},{"x":257,"y":368},{"x":257,"y":355.3},{"x":186,"y":361},{"x":107,"y":392.2}],
    poly2: [{"x":107,"y":463.8},{"x":107,"y":521},{"x":257,"y":467},{"x":360,"y":527},{"x":488,"y":486},{"x":621,"y":540},{"x":677,"y":486},{"x":677,"y":453},{"x":677,"y":420.1},{"x":621,"y":433.9},{"x":488,"y":370.9},{"x":360,"y":435.5},{"x":257,"y":368},{"x":107,"y":406.5}],
    poly3: [{"x":257,"y":368},{"x":360,"y":435.5},{"x":488,"y":370.9},{"x":488,"y":338.5},{"x":360,"y":363.5},{"x":257,"y":333.9}],
    poly4: [{"x":488,"y":354.5},{"x":621,"y":386.3},{"x":677,"y":388.5},{"x":677,"y":362.5},{"x":621,"y":338.5},{"x":488,"y":338.5}],
    poly5: [{"x":488,"y":370.9},{"x":621,"y":433.9},{"x":677,"y":420.1},{"x":677,"y":388.5},{"x":621,"y":386.3},{"x":488,"y":354.5}]

};

let svg, g2, EPS = 1E-5, curve = d3.line().curve(d3.curveCatmullRom).x(d_ => { return d_.x; }).y(d_ => { return d_.y; });

svg = d3.select("#scene");

let colors = ["#005f73", "#0a9396", "#94d2bd", "#e9d8a6", "#ee9b00", "#ca6702", "#bb3e03", "#ae2012"];

let paths = svg.selectAll(".path")
.data(Object.keys(data))
.enter()
.append("path")
.attr("id", (d_) => { return `path_${d_}`; })
.attr("class", "path")
.attr("d", (d_) => { return generatePathFromPoints(data[d_], true); })
.attr("stroke", "#000000")
.attr("fill", "url(#star)");

function generatePathFromPoints(points_, closed_){

    let d = `M${points_[0].x} ${points_[0].y}`;

    for(let i = 1; i < points_.length; i++) { d += `L${points_[i].x} ${points_[i].y}`; }

    if(closed_) { d += "Z"; }

    return d;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<svg id="scene" viewBox="0 0 800 800" preserveAspectRatio="xMinYMin meet">
    <defs>
        <pattern id="star" viewBox="0 0 10 10" width="10%" height="10%" preserveAspectRatio="none">
            <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" fill="#000000"/>
        </pattern>
    </defs>
</svg>

Upvotes: 1

Views: 60

Answers (1)

Nemlaghi.bechir
Nemlaghi.bechir

Reputation: 131

Basically the behavior comes from the SVG pattern width="10%" height="10%" preserveAspectRatio="none", which instruct the pattern to be 10% the size of what it fills (paint).

While you probably needs it to be 10% the size of the whole SVG, which can be achieved by setting the patternUnits attribute to userSpaceOnUse. So it becomes:

<pattern id="star" patternUnits="userSpaceOnUse" viewBox="0 0 10 10" width="10%" height="10%" preserveAspectRatio="none">
    <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" fill="#000000"/>
</pattern>

Upvotes: 1

Related Questions