Poster Background Generator

index.html

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="savesvg.js"></script>
<svg></svg>


<script>
window.location.hash='background'
var svg = d3.select("svg");
var width = window.innerWidth;
var height = window.innerHeight;
var numberaccross = 50;

svg.attr("width", width).attr("height", height);
var twidth = width / numberaccross;
var theight = twidth / 2 * Math.tan(60 * Math.PI / 180);
var rowh = theight;

var triangles = d3.range(0, width + twidth, twidth); //[0,105,210]
var colour = ['#E3E4DF',"#3E7A8B",'#35505A','#84A9BB','#E3E4DF',"#3E7A8B",'#35505A','#84A9BB','#E3E4DF',"#3E7A8B",'#35505A','#84A9BB','#202A35'];
var random = d3.randomUniform(0, colour.length);
var dir = false;


function plotrow() {
    svg
        .selectAll("row")
        .data(triangles)
        .enter()
        .append("polyline")
        .attr(
            "points",
            d =>
                d -
                twidth / 2 * dir +
                "," +
                (rowh - theight) +
                " " +
                (d + twidth - twidth / 2 * dir) +
                "," +
                (rowh - theight) +
                " " +
                (d + twidth / 2 - twidth / 2 * dir) +
                "," +
                rowh +
                " " +
                (d - twidth / 2 * dir) +
                "," +
                (rowh - theight)
        )
        .attr("stroke-width", 0.01 * twidth + "px")
        .attr("fill", d => colour[parseInt(random())])
        .attr("stroke", "white");

    dir = !dir;

    svg
        .selectAll("row")
        .data(triangles)
        .enter()
        .append("polyline")
        .attr(
            "points",
            d =>
                d -
                twidth / 2 * dir +
                "," +
                rowh +
                " " +
                (d + twidth / 2 - twidth / 2 * dir) +
                "," +
                (rowh - theight) +
                " " +
                (d + twidth - twidth / 2 * dir) +
                "," +
                rowh +
                " " +
                (d - twidth / 2 * dir) +
                "," +
                rowh
        )
        .attr("stroke-width", 0.01 * twidth + "px")
        .attr("fill", d => colour[parseInt(random())])
        .attr("stroke", "white");

    rowh += theight;
}
    
d3.range(0, parseInt(height / theight) + 1).forEach(d => plotrow())
setInterval(function(){rowh = theight;dir=false ; d3.range(0, parseInt(height / theight) + 1).forEach(d => plotrow()) }, 3000);


</script>

Poster Background generator

A simple triangle pattern

license: gpl-3.0