31:[] 2f:{"title":"Self-Similar Patterns in SVG using ","cells":[{"id":0,"value":"# Self-Similar Patterns in SVG using ``\n\n> The `` SVG element is used to define graphical template objects which can be instantiated by a element.\n— [MDN: ``](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/symbol)\n\nA `` can’t point to itself, SVG forbids that. But we can point a `` to another `` to recurse up to a level. This way we can make self-similar patterns using a few line of SVG.\n\nUnfortunately, `` does not improve performance like I asummed. It still adds elements to the DOM tree, so we're limited in iteration before the page becomes unresponsive.","pinned":false,"hidden":false,"mode":"md"},{"id":65,"value":"## Sierpiński Triangle","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"const depth = view(Inputs.range([1, 8], { step: 1 }))","pinned":false,"hidden":false,"mode":"js"},{"id":7,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"js"},{"id":5,"value":"const levels = Array.from({ length: depth }, (_, i) => {\n const prev = `l${i}`;\n return `\n \n \n \n \n `;\n}).join(\"\")","pinned":true,"hidden":false,"mode":"js"},{"id":67,"value":"## Sierpinsky Carpet","pinned":false,"hidden":false,"mode":"md"},{"id":70,"value":"const depth2 = view(Inputs.range([1, 5], { step: 1 }))","pinned":true,"hidden":false,"mode":"ts"},{"id":68,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"ts"},{"id":69,"value":"const levelsCarpet =Array.from(\n { length: depth2 }, (_, i) => {\n const prev = `s${i}`;\n\n return `\n \n \n \n \n\n \n \n\n \n \n \n `;\n})","pinned":true,"hidden":false,"mode":"js"},{"id":45,"value":"## Tree","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"const levelsTree = Array.from(\n { length: depth },\n (_, i) => `\n \n \n\n \n\n \n\n `\n).join(\"\")","pinned":true,"hidden":false,"mode":"js"},{"id":13,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"js"}],"files":"$W31","stdlib":"1","titling":"auto"}