Yin and yang: Difference between revisions
m
→SVG (path evenodd): refactoring
m (→SVG (path evenodd): cosmetics) |
m (→SVG (path evenodd): refactoring) |
||
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">
for (const key in attrs) el.setAttribute(key, attrs[key]);
}
function yinYang(r, x, y, th = 1) {
Line 3,231 ⟶ 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);
▲ const path = document.createElementNS(NS, 'path');
▲ path.setAttribute('fill-rule', 'evenodd');
▲ return path;
}
const dialog = document.body.appendChild(document.createElement('dialog'));
const svg = dialog.appendChild(
svg.appendChild(yinYang(50.0, 60, 60));
svg.appendChild(yinYang(20.0, 140, 30));
| |||