2c:null 2d:["$","title",null,{"children":"Self-Similar Patterns in SVG using | Jules Blom | Observable"}] 32:[] 30:{"id":"28f13e0f0e9cc8aa","slug":"self-similar-patterns-in-svg-using-symbol","title":"Self-Similar Patterns in SVG using ","thumbnail":"30d39137a0ae33e06516a30d1db7c277afa20b47b91028aef958562275c481a9","access_level":"public","create_time":"$D2026-03-05T18:37:13.836Z","update_time":"$D2026-09-06T13:21:34.522Z","view_time":null,"first_public_time":"$D2026-09-03T09:55:28.907Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7a0be485f6c75a69","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/b7de984ae585198887501b17f9ba995c2549e9278d73c6fea516ec7ff7a5e684","tier":"starter_2024"},"version":146,"publish_version":146,"role":null,"authored":false,"authors":[{"type":"individual","id":"aa71bd62661dc929","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/1e8787977bfd7f7f59fe9be84835541199e1605aa10e4cd7ae6f3707cb411d40","tier":null}],"members":[{"type":"team","id":"7a0be485f6c75a69","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/b7de984ae585198887501b17f9ba995c2549e9278d73c6fea516ec7ff7a5e684","tier":"starter_2024","role":"editor"},{"type":"individual","id":"aa71bd62661dc929","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/1e8787977bfd7f7f59fe9be84835541199e1605aa10e4cd7ae6f3707cb411d40","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"## Sierpiński Triangle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"const depth = view(Inputs.range([1, 8], { step: 1 }))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"## Sierpinsky Carpet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"const depth2 = view(Inputs.range([1, 5], { step: 1 }))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"## Tree","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"