つくボドのロゴの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);