Yin and yang: Difference between revisions

Line 3,224:

===SVG (path evenodd)===

Run this script from the browser console (F12) or from the <script> tag in the body of the html document.

<syntaxhighlight lang="javascript">~~const~~ NS = ~~'http://www.w3.org/2000/svg';~~

<syntaxhighlight lang="javascript">function svgEl(tagName, attrs) {

const el = document.createElementNS('http://www.w3.org/2000/svg', tagName);

for (const key in attrs) el.setAttribute(key, attrs[key]);

return el;

}

function yinYang(r, x, y, th = 1) {

Line 3,231:

Line 3,235:

const d = cR(0, r + th) + cR(r / 2, r / 6) + cR(-r / 2, r / 6)

+ `M${x},${y} ` + arc(r, r / 2, 0) + arc(-r, r) + arc(0, r / 2);

return svgEl('path', {d, 'fill-rule': 'evenodd'});

const ~~path~~ = document.createElementNS(~~NS,~~ '~~path~~');

path.setAttribute('d', d);

~~path.setAttribute~~('fill-rule', 'evenodd');

return ~~path~~;

}

const dialog = document.body.appendChild(document.createElement('dialog'));

const svg = dialog.appendChild(~~document.createElementNS~~(~~NS,~~ 'svg'));

const svg = dialog.appendChild(svgEl('svg', {width: 170, height: 120}));

svg.setAttribute('width', 170);

svg.setAttribute('height', 120);

svg.appendChild(yinYang(50.0, 60, 60));

svg.appendChild(yinYang(20.0, 140, 30));