Data update

Task/Yin-and-yang/JavaScript/yin-and-yang-4.js

@@ -0,0 +1,20 @@
+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) {
+  const cR = (dY, rad) => `M${x},${y + dY + rad} a${rad},${rad},0,1,1,.1,0z `;
+  const arc = (dY, rad, cw = 1) => `A${rad},${rad},0,0,${cw},${x},${y + dY} `;
+  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 dialog = document.body.appendChild(document.createElement('dialog'));
+const svg = dialog.appendChild(svgEl('svg', {width: 170, height: 120}));
+
+svg.appendChild(yinYang(50.0, 60, 60));
+svg.appendChild(yinYang(20.0, 140, 30));
+dialog.showModal();

Task/Yin-and-yang/JavaScript/yin-and-yang-5.js

@@ -0,0 +1,18 @@
+function yinYang(r, x, y, th = 1) {
+    const PI = Math.PI;
+    const path = new Path2D();
+    const cR = (dY, radius) => { path.arc(x, y + dY, radius, 0, PI * 2); path.closePath() };
+    cR(0, r + th);
+    cR(r / 2, r / 6);
+    cR(-r / 2, r / 6);
+    path.arc(x, y, r, PI / 2, -PI / 2);
+    path.arc(x, y - r / 2, r / 2, -PI / 2, PI / 2);
+    path.arc(x, y + r / 2, r / 2, -PI / 2, PI / 2, true);
+    return path;
+}
+
+document.documentElement.innerHTML = '<canvas width="170" height="120"/>';
+const canvasCtx = document.querySelector('canvas').getContext('2d');
+
+canvasCtx.fill(yinYang(50.0, 60, 60), 'evenodd');
+canvasCtx.fill(yinYang(20.0, 140, 30), 'evenodd');