Creative Director
grid2 = {
var x = 1
var y = 1
var w = 200
var id = 1
function testPath(x,y) {
var lineGenerator = d3.line();
var pathData = lineGenerator(cShape(x,y))
return pathData+"Z"
}
// reset;
const s = DOM.svg(500, 500);
s.setAttributeNS(null, 'width', 500);
s.setAttributeNS(null, 'height', 500);
// This is the group in which we will append each pattern
const g = svg`<g />`;
// g.appendChild(svg`<rect x="0" y="0" width="${500}" height="${500}" fill="none"/>`)
//The Frame
const frame = svg`<rect x="${x}" y="${y}" width="${w}" height="${w}" fill="none"/>`
frame.setAttributeNS(null, "stroke", "#000000");
frame.setAttributeNS(null, "stroke-width", .2);
// frame.setAttributeNS(null, "transform", "rotate("+(-rot)+","+(x+w/2)+","+(y+w/2)+")");
//The Clipping Path
const clip = svg`<clipPath id="myclip1"><rect x="${x}" y="${y}" width="${w}" height="${w}"/></clipPath>`
clip.setAttributeNS(null, "transform", "rotate("+(-45)+","+(x+w/4)+","+(y+w/2)+")");
// clip.setAttributeNS(null, "transform"+", "+(x+w/2)+","+(y+w/2)+")");
//First C
const c1 = svg`<path d="${
testPath(x+w,y+w/2)
}" clip-path="url(#myclip1)" style="fill: rgb(100, 0, 0)"></path>`
c1.setAttributeNS(null, "transform", "rotate("+(45)+","+(x+w/4)+","+(y+w/2)+")");
//Second C
// const c2 = svg`<path d="${
// testPath(x,y)
// }" clip-path="url(#myclip_${id})" style="fill: rgb(0, 0, 0)"></path>`
s.appendChild(g);
g.appendChild(clip);
g.appendChild(frame);
g.appendChild(c1);
// g.appendChild(c2);
return s;
}
height = 1200
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
