つくボドのロゴのSVG画像を生成するコード

つくボドのロゴのSVG画像を作るコードです。

HP制作をしていた僕が最後に作った作品（？）。

あんまり使わないからパソコンに保存しておくのも嫌なので、メモとして残しておきます。

CSS

textarea {
  width: 100%;
  height: 200px;
}
svg {
  width: 134px;
}

JavaScript

const eggH = 700;
const r = 49;
const angle = 55;
const strokeWidth = 22.4;
const body = document.body;
const eggHalfH = eggH / 2;
const eggW = eggH * 277 / 382;
const eggCurveVertex = eggH * 203 / 382;
const m = (eggH - eggW) / 2;
const oL_x = eggW / 4 + m;
const oR_x = eggH - oL_x;
const oT_x = eggH / 4;
const oB_x = eggH - oT_x;
const oL_contact_L = oL_x - r * Math.cos(angle * Math.PI / 180);
const oL_contact_R = oL_x + r * Math.cos(angle * Math.PI / 180);
const oR_contact_L = oR_x - r * Math.cos(angle * Math.PI / 180);
const oR_contact_R = oR_x + r * Math.cos(angle * Math.PI / 180);
const oT_contact_T = oT_x - r * Math.cos(angle * Math.PI / 180);
const oT_contact_B = oT_x + r * Math.cos(angle * Math.PI / 180);
const oB_contact_T = oB_x - r * Math.cos(angle * Math.PI / 180);
const oB_contact_B = oB_x + r * Math.cos(angle * Math.PI / 180);
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const path_egg = document.createElementNS('http://www.w3.org/2000/svg', 'path');
const path_hLIne = document.createElementNS('http://www.w3.org/2000/svg', 'path');
const path_vLine = document.createElementNS('http://www.w3.org/2000/svg', 'path');

body.innerHTML = "";
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('viewBox', `0 0 ${eggH} ${eggH}`);
svg.setAttribute('role', 'img');

path_egg.setAttribute('d', `M ${m} ${eggCurveVertex} A ${eggW / 2} ${eggCurveVertex} 0 0 1 ${eggH - m} ${eggCurveVertex} A ${eggW / 2} ${eggH - eggCurveVertex} 0 0 1 ${m} ${eggCurveVertex}`);
path_egg.setAttribute('fill', '#FAD312');

path_hLIne.setAttribute('d', `M 0 ${eggHalfH} L ${oL_contact_L} ${eggHalfH} A ${r} ${r} ${angle} 1 1 ${oL_contact_R} ${eggHalfH} L ${oR_contact_L} ${eggHalfH} A ${r} ${r} ${angle} 1 0 ${oR_contact_R} ${eggHalfH} L ${eggH} ${eggHalfH}`);
path_hLIne.setAttribute('fill', 'none');
path_hLIne.setAttribute('stroke', '#fff');
path_hLIne.setAttribute('stroke-width', strokeWidth);
path_hLIne.setAttribute('stroke-linejoin', 'round');

path_vLine.setAttribute('d', `M ${eggHalfH} 0 L ${eggHalfH} ${oT_contact_T} A ${r} ${r} ${angle} 1 1 ${eggHalfH} ${oT_contact_B} L ${eggHalfH} ${oB_contact_T} A ${r} ${r} ${angle} 1 0 ${eggHalfH} ${oB_contact_B} L ${eggHalfH} ${eggH}`);
path_vLine.setAttribute('fill', 'none');
path_vLine.setAttribute('stroke', '#fff');
path_vLine.setAttribute('stroke-width', strokeWidth);
path_vLine.setAttribute('stroke-linejoin', 'round');

svg.appendChild(path_egg);
svg.appendChild(path_hLIne);
svg.appendChild(path_vLine);
body.appendChild(svg);

const tarea = document.createElement('textarea');
tarea.value = body.innerHTML;
tarea.setAttribute('onfocus', 'this.select()');
body.appendChild(tarea);