Public
Edited
Apr 9
html`<svg width="100" height="100">
<circle cx="40" cy="60" r="20" style="fill:red;">
</circle>`
html`<svg width="110" height="110">
<polygon points="50,5 20,99 95,39 5,39 80,99" style="fill:blue;stroke:red;stroke-width:5;fill-rule:evenodd;" />
</circle>`
html`<svg width="256" height="256">
<circle cx="150" cy="150" r="100" style="fill:forestgreen;"></circle>
<circle cx="150" cy="150" r="70" style="fill:purple;"></circle>
<circle cx="150" cy="150" r="40" style="fill:orangered;"></circle>
</svg>`
html`<svg width="600" height="600">
${
(() => {
const output = [];
for (let row = 0; row < 20; row++) {
for (let col = 0; col < 20; col++) {
const x = col * 30 + 15;
const y = row * 30 + 15;
const red = Math.floor((col / 19) * 255);
const green = Math.floor((row / 19) * 255);
const color = `rgb(${red},${green},0)`;
output.push(`<circle cx="${x}" cy="${y}" r="10" fill="${color}" />`);
}
}
return output.join('');
})()
}
</svg>`
{
const output = [];
for (let i = 0; i < 25; i++) {
for (let j = 0; j < 25; j++) {
const x = j * 16 + 10;
const y = i * 16 + 10;
const dx = j - ((25 - 1) / 2);
const dy = i - ((25 - 1) / 2);
const distancia = Math.sqrt(dx * dx + dy * dy);
const radio = 6 * (1 - distancia / Math.sqrt(((25 - 1) / 2) ** 2 + ((25 - 1) / 2) ** 2));
const r = Math.max(radio, 1);
output.push(`<circle cx="${x}" cy="${y}" r="${r}" fill="black" />`);
}
}
return html`<svg width="450" height="450">${output.join('\n')}</svg>`;
}
html`
<svg width="256" height="256">
${
(() => {
const triangulos = [];
for (let row = 0; row < 17; row++) {
for (let col = 0; col < 17; col++) {
const offsetX = col * 20;
const offsetY = row * 20;
triangulos.push({
puntos: `${offsetX + 5},${offsetY + 15} ${offsetX + 15},${offsetY + 15} ${offsetX + 10},
${offsetY+ 5}`,
fill: 'yellow',
stroke: 'blue'
});
}
}
for (let row = 0; row < 17; row++) {
for (let col = 0; col < 17; col++) {
const offsetX = col * 20 + 10;
const offsetY = row * 20;
triangulos.push({
puntos: `${offsetX + 5},${offsetY + 5} ${offsetX + 15},${offsetY + 5} ${offsetX + 10},
${offsetY + 15}`,
fill: 'none',
stroke: 'red'
});
}
}
return triangulos
.map(tri => `<polygon points="${tri.puntos}" fill="${tri.fill}" stroke="${tri.stroke}" stroke-width="1.5"/>`)
.join('');
})()
}
</svg> `
html`<svg width="600" height="600">
${Array.from({ length: 10 }, (_, row) =>
Array.from({ length: 10 }, (_, col) => {
const r = 25;
const dx = Math.sqrt(3) * r;
const dy = 1.5 * r;
const x = col * dx + (row % 2) * (dx / 2) + 30 ;
const y = row * dy + 30;
const stroke = Math.floor((row / 9) * 5) + 1;
const path = hexagon(x, y, r);
return `<polygon points="${path}" fill="white" stroke="black" stroke-width="${stroke}" />`;
}).join('')
).join('')}
</svg>`
// Función para generar hexágonos en x,y de radio r.
function hexagon(x, y, r) {
var x1 = x;
var y1 = y - r;
var x2 = x + Math.cos(Math.PI / 6) * r;
var y2 = y - Math.sin(Math.PI / 6) * r;
var x3 = x + Math.cos(Math.PI / 6) * r;
var y3 = y + Math.sin(Math.PI / 6) * r;
var x4 = x;
var y4 = y + r;
var x5 = x - Math.cos(Math.PI / 6) * r;
var y5 = y + Math.sin(Math.PI / 6) * r;
var x6 = x - Math.cos(Math.PI / 6) * r;
var y6 = y - Math.sin(Math.PI / 6) * r;
var path = x1 + ',' + y1 + " " + x2 + ',' + y2 + " " + x3 + ',' + y3 + " " + x4 + ',' + y4 + " " + x5 + ',' + y5 + " " + x6 + ',' + y6;
return path;
}
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.
