Designer, Artist, Researcher, Educator @sugi2000lab .
co-translator for Japanese edition of “Generative Design” and “Code as Creative Medium”.
Public
Edited
May 19, 2023
Importers
config = ({
title: title,
publisher: publisher
})
getTexture(config)
svg = getSVG({ title: title })
getSVG = (config = {}) => {
let {
width = 64,
height = 512,
title = "南無阿弥陀仏",
publisher = "岩波書店",
fontFamily = "YuMincho"
} = config;
const svg = d3.create("svg").attr("width", width).attr("height", height);
svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "hsla(0,0%,97.5%,1)");
svg
.append("text")
.attr("x", width / 2)
.attr("y", height * 0.05)
.attr("text-anchor", "start")
.attr("font-family", fontFamily)
.attr("font-size", `40px`)
.style("writing-mode", "vertical-rl")
// .style("text-combine-upright", "all")
.text(title);
svg
.append("text")
.attr("x", width / 2)
.attr("y", height * 0.95)
.attr("text-anchor", "end")
.attr("font-family", fontFamily)
.attr("font-size", `18px`)
.style("writing-mode", "vertical-rl")
.text(publisher);
return svg.node();
}
getTexture({ title: title })
getTexture = config => rasterize(getSVG(config))
function rasterize(svg) {
let resolve, reject;
const promise = new Promise((y, n) => ((resolve = y), (reject = n)));
const image = new Image();
image.onerror = reject;
image.onload = () => {
const rect = svg.getBoundingClientRect();
const context = DOM.context2d(rect.width, rect.height);
context.drawImage(image, 0, 0, rect.width, rect.height);
context.canvas.toBlob(resolve);
};
image.src = URL.createObjectURL(serialize(svg));
return image;
// return promise;
}
import {serialize} from "@mbostock/saving-svg"
md`https://observablehq.com/@mbostock/saving-svg`
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.
