Computer Graphics & Visualization @ufrj.br
Published
Edited
Aug 7, 2021
1 fork
1 star
{
// Drawing with a 4 by 3 aspect ratio
let [w, h] = [640, 480];
// Small square size
let s = w / 15;
// Main rectangle has a 11 by 5 aspect ratio.
let [dx, dy] = [s * 11, s * 5];
return svg`
<svg width=${w} height=${h}>
<!-- Main rectangle -->
<rect x=${(w - dx) / 2} y=${(h - dy) / 2} width=${dx} height=${dy} />
<!-- First big white square -->
<rect x=${(w - dx) / 2 + s} y=${(h - dy) / 2 + s}
width=${s * 3} height=${s * 3}
fill=white />
<!-- Second big white square -->
<rect x=${(w - dx) / 2 + s * 7} y=${(h - dy) / 2 + s}
width=${s * 3} height=${s * 3}
fill=white />
<!-- First small white square -->
<rect x=${(w - dx) / 2 + 5 * s} y=${(h - dy) / 2 + s}
width=${s} height=${s}
fill=white />
<!-- Second small white square -->
<rect x=${(w - dx) / 2 + 5 * s} y=${(h - dy) / 2 + s * 3}
width=${s} height=${s}
fill=white />
<!-- First small black square -->
<rect x=${(w - dx) / 2 + 2 * s} y=${(h - dy) / 2 + s * 2}
width=${s} height=${s}
fill=black />
<!-- Second small black square -->
<rect x=${(w - dx) / 2 + 8 * s} y=${(h - dy) / 2 + s * 2}
width=${s} height=${s}
fill=black />
</svg>
`;
}
{
// Drawing with a 4 by 3 aspect ratio
let [w, h] = [640, 480];
// margin around the central rectangle
let m = h * 0.1;
// radius of the half circles
let r = h * 0.3;
return svg`
<svg width=${w} height=${h}>
<!-- Center black rectangle -->
<rect x=${m} y=${m} width=${w - m - m} height=${h - m - m} />
<!-- Left white half circle -->
<path d="M ${w / 2},${m * 3} a ${r} ${r} 0 0 0 0,${r * 2}" fill=white />
<!-- right white half circle -->
<path d="M ${w / 2},${h - m * 3} a ${r} ${r} 0 0 0 0,${-r * 2}" fill=white />
<!-- center black circle -->
<circle cx=${w / 2} cy=${h / 2} r=${r / 2} fill=black />
</svg>
`;
}
{
// Drawing with a 4 by 3 aspect ratio
let [w, h] = [640, 480];
// Size of black square at the center
let s = h * 0.8;
return svg`
<svg width=${w} height=${h}>
<!-- Main Square -->
<rect x=${(w - s) / 2}
y=${(h - s) / 2} width=${s} height=${s} />
<!-- Main white diamond -->
<rect x=${-s / 2} y=${-s / 2}
width=${s} height=${s}
transform="translate(${w / 2},${h / 2})rotate(45)"
fill=white />
<!-- Small black diamond -->
<rect x=${-s / 2} y=${-s / 2}
width=${s} height=${s}
transform="translate(${w / 2},${h / 2})rotate(45)scale(0.7)"
fill=black />
<!-- Small white diamond -->
<rect x=${-s / 2} y=${-s / 2}
width=${s} height=${s}
transform="translate(${w / 2},${h / 2})rotate(45)scale(0.4)"
fill=white />
<!-- center circle -->
<circle cx=${w / 2} cy=${h / 2}
r=${s / 10}
fill=black />
<!-- left rectangle -->
<rect width=${s * 0.15} height=${s}
x=${(w - s) / 2 - s * 0.25}
y=${(h - s) / 2}
fill=black />
<!-- right rectangle -->
<rect width=${s * 0.15} height=${s}
x=${(w - s) / 2 + s + s * 0.1}
y=${(h - s) / 2}
fill=black />
`;
}
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.
