31:T4c7,Common settings to create a pattern are: | Key | Meaning |-----------|-------------- | `id` | Define to use a fixed ID. Either a string, or an ID returned by `DOM.uid()`. If not given, a unique ID is created with `DOM.uid()`.
Will not be stored in the `settings` field of the pattern, use the `id` field to query it later. | `size` | Size in pixels of the pattern tile. (note this is different from the distance between features) | `fill` | Fill factor between 0 and 1 | `bg` | Foreground colour, | `fg` | Background colour, | `scale` | Scale factor | `offset` | Array with x and y offset of the pattern | `rotate` | Rotation added to the SVG pattern definition in degrees To use it, use these members: | Member | Meaning |-----------|-------------- | `id` | ID of this pattern | `uid` | unique ID of this pattern. `undefined` for patterns created with a string as `id`. | `with()` | Create a copy of this pattern, optionally with settings to override | `svg()` | Return an SVG string containing a `` element | `svg_fg()` | Return an SVG string containing svg primitives to draw the foreground | `url()` | Return an url reference that you can use as a fill property | `settings` | Pattern settings. 32:T682,HalfToneTile8 = _define_pattern( "halftone8", { ..._defaultHatch, size: 16, offset: [.5, .5], fill_alldots: 0}, function (s, f, set) { s = s[0]; var s_fill = set.fill; if (s_fill <= 0) return ""; // tile layout, 4 levels. Lower case indicates copies due to // the pattern wrapping around: // B···C···b // : D D : // C A c // : D D : // b···c···b const levels = [ [[0.5*s, 0.5*s]], // A: middle dot [[0,0], [0,s], [s,0], [s,s]], // B: corner dot (4 instances) [[0.5*s,0], [0,0.5*s], [0.5*s, s], [s,0.5*s]], // C: 2 side dots (2 inst. each) [[0.25*s,0.25*s], [0.25*s,0.75*s], [0.75*s, 0.25*s], [0.75*s,0.75*s]], // D: 4 middle dots of quadrants ]; const level_n = [1, 1, 2, 4]; const n = 8; var r = []; if (s_fill < set.fill_alldots) { var remaining = s_fill; for (var i = 0; i < 4; ++i) { var this_fill = Math.min(remaining / level_n[i], set.fill_alldots / n); remaining -= this_fill * level_n[i]; var this_r = Math.sqrt(n * this_fill * .125 / Math.PI); r.push(this_r * s); } } else { var r1 = s_fill < 0.785398 ? Math.sqrt(s_fill * .125 / Math.PI) : .25 - Math.sqrt((1 - s_fill) * 0.07849 / Math.PI); r1 *= s; r = [r1, r1, r1, r1]; } // pattern var dot = (x, y, r) => ``; var ss = ""; for (var i = 0; i < 4; ++i) { for (var [x, y] of levels[i]) { ss += dot(x, y, r[i]) } } return ss; } )33:T43b,function show(patterns, size, round) { // wishes: // - the border occupies exactly 1 pixel (it is a myth that // you can ignore physical pixels for SVG); // - size specifies the size of the area inside the border; // - in pattern space (userSpaceOnUse), (0, 0) is exactly // at the corner inside the non-rounded border. // concessions: // - we do not attempt to compensate for device pixel ratio. So the result will look bad // at 1.25 and 1.50 ratios. size = size || 100; var size2 = size + 2; var sizeR = round != false ? size * .1 : 0; var s = ""; for (const p of patterns) { s += ``; } return html`

${s}

`; }34:T971,function _define_pattern(typeId, defaults, paint_fg, extra_init) { function size2(x) { return Array.isArray(x) ? x : [x, x]; } function _PatternBase(settings) { this.id = ""; this.settings = settings || this.defaults; this.size = size2(this.settings.size); this.extra_init(this.settings); } _PatternBase.prototype.typeId = typeId; _PatternBase.prototype.defaults = defaults; _PatternBase.prototype._svg_fg = paint_fg; _PatternBase.prototype.extra_init = extra_init || function(){}; _PatternBase.prototype._new_settings = function(new_settings, id) { var s = {...this.settings, ...new_settings}; delete s.id; this.settings = s; if (id == undefined) { this.uid = DOM.uid("pattern-" + this.typeId); this.id = this.uid.id; } else if (id.id) { this.uid = id; this.id = id.id; } else { this.id = id.toString(); } this.size = size2(s.size); this.extra_init(this.settings); } _PatternBase.prototype.svg_fg = function() { var s = this.settings.size; var f = this.settings.fill * s; return this._svg_fg(s, f, this.settings) }; _PatternBase.prototype.svg = function() { var s = this.size; var f = this.settings.fill * s[0]; var offset = this.settings.offset; return ` ${this._svg_fg(s, f, this.settings)} `; }; _PatternBase.prototype.url = function() { return this.uid ? this.uid.toString() : `url(#${this.id})` }; // copy with optionally new settings _PatternBase.prototype.with = function(new_settings) { var p = new _PatternBase(this.settings); p._new_settings(new_settings || {}, new_settings && new_settings.id); return p; }; function make(new_settings) { // if we have a settings field, assume it is another pattern // otherwise assume it is a settings object new_settings = new_settings || {} if (new_settings.settings) { new_settings = new_settings.settings; } var p = new _PatternBase(); p._new_settings(new_settings, new_settings.id); return p; } return make; }35:[] 2f:{"title":"SVG tiled pattern fills","cells":[{"id":0,"value":"md`# SVG tiled pattern fills\n\nSimple SVG vector patterns consisting of a small square tile which gets repeated.\n\nSince the size of a square tile is fixed, the diagonal hatching will be finer for a given tile size.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1283,"value":"examples = [\n HatchTile0({fill: preview_fill, fg: \"#47f\"}),\n HatchTile45({fill: preview_fill, fg: \"#47f\"}),\n HatchTile90({fill: preview_fill, fg: \"#47f\"}),\n HatchTile135({fill: preview_fill, fg: \"#47f\"}),\n HalfToneTile({fill: preview_fill, fg: \"#47f\", fill_alldots: 0}),\n HalfToneTile8({fill: preview_fill, fg: \"#47f\", fill_alldots: .32}),\n CrossHatchTile45({fill: preview_fill, fg: \"#47f\"}),\n CrossHatchTile90({fill: preview_fill, fg: \"#47f\"}),\n DahsedHatchTile({fill: preview_fill, fg: \"#47f\"})]","pinned":true,"hidden":false,"mode":"ojs"},{"id":492,"value":"viewof preview_fill = Inputs.range([0, 1], {label: \"Fill\", value: .4, step: .01})","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"{\n var patterns = examples.map(x => x.svg()).join(\"\\n\");\n \n const tile_size = [160, 120];\n const cols = 3;\n const our_width = Math.min(width, tile_size[0] * cols);\n const rows = Math.ceil(examples.length / cols);\n const w = Math.floor(our_width / cols);\n var x0 = 0.5 * (width - cols * w);\n var boxes = examples.map(\n function(pattern, i)\n {\n var x = x0 + w * (i % cols) + 2.5;\n var y = tile_size[1] * Math.floor(i / cols) + 2.5;\n return ``;\n });\n \n return svg``\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1352,"value":"show(examples.map(x => x.with({size:30, rotate: 0, offset:[0, 0]})), 30, false)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1007,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"md`## Hatching\n\nHatching along axes or diagonals`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1793,"value":"md`### Square hatch pattern\n\nThese patterns are aligned on 0, 45, 90 and 135°. All of them have a square aspect ratio.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"h1 = HatchTile45({fill: .4, fg: \"#3e7\", id: \"my_id\"});","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"show([h1,\n h1.with({fg:\"#37f\", bg:\"#fffd66\"}),\n h1.with({size:4, fg: \"#777\"}),\n h1.with({size:8 , fill:.8}),\n HatchTile135(h1)])","pinned":true,"hidden":false,"mode":"ojs"},{"id":970,"value":"md`Cross hatching has thinner lines to compensate for the extra fill.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":973,"value":"{\n var s = {fg: \"#76d\"};\n return show([\n HatchTile45(s),\n CrossHatchTile45(s),\n CrossHatchTile90(s),\n // the generic CrossHatchTile() function takes one of the simple hatch tile generators\n CrossHatchTile(s, HatchTile45, HatchTile0)]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1688,"value":"### Dashed hatch pattern\n\nThis pattern is defined only as a horizontal hatching pattern, but it doesn’t have to be square. Use `rotate` to turn it.\n\nThis takes a few extra settings:\n\nKey | Meaning\n----|--------------\n`dashOffsets` | Controls the amount of rows in the pattern, and their offsets relative to the length of the pattern. The default, `[0, 0.5]`, specifies 2 rows, with an offset of half the width of the pattern.\n`fill` | Controls the thickness of the dashes. At 100% the dahses will touch the neighbouring rows.\n`dashes` | Controls the length of dashes and the gaps between them. Should have an even length, every pair specifies a dash and a gap. A single number is interpreted as `[v, 1.0 - v]`.\n`cap` | Controls the appearance of the end caps of the dashes. Should be a valid `stroke-linecap` SVG value attribute.","pinned":false,"hidden":false,"mode":"md"},{"id":1692,"value":"{\n var h = DahsedHatchTile({fg: \"#d46\"});\n return show([\n h,\n h.with({size: [20, 5], fill: .7, dashes: .75, cap:\"round\", dashOffsets: [0]}),\n h.with({rotate: 0, size: [20, 10], dashes: [.15, .05, .75, .05], dashOffsets: [0, .3]})])\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":499,"value":"md`## Halftone\n\nHalftone pattern at 45°.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"show([0, .03, .1, .2, .3, .5, .7, .8, .9, .97, 1].map(\n x => HalfToneTile({fill: x, fg: \"#66a\"})\n), 50)","pinned":true,"hidden":false,"mode":"ojs"},{"id":750,"value":"md`You can optionally fade to a coarser patterns at low densities. The *HalfTone8* pattern has a larger tile with more dots so it can go more coarse. This lets you avoid very small dots for lower densities.\n\nThe fill factor where all dots have the same size is given with the \\`fill_alldots\\` setting.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"{\n var l = [0, .01, .025, .05, .1, .15, .2, .3, .4, .6, .9]\n return html`\n ${show(l.map(x => HalfToneTile({fill_alldots: 0, fill: x, fg: \"#66a\"})), 50)}\n ${show(l.map(x => HalfToneTile({fill_alldots: .4, fill: x, fg: \"#66a\"})), 50)}\n ${show(l.map(x => HalfToneTile8({fill_alldots: .4, fill: x, fg: \"#66a\"})), 50)}`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":927,"value":"md`### Stacked patterns\n\nStack patterns on top of each other. The background and size will be the background of the first pattern in the list.\n\nSince this generates only a single SVG pattern you cannot have different sizes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"show([StackedTile([\n HatchTile45({bg: \"#fffd88\", fg: \"#c59\", fill: .3, size: 15}),\n HatchTile135({bg: \"#blue\", fg: \"#37d\", fill: .3, size: 2})])\n ]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"md`-------------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"md`## Definitions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1147,"value":"show([HatchTile0({size:30})], 60)","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"HatchTile0 = _define_pattern(\n \"hatch-0\",\n { ..._defaultHatch, size: 5},\n ([s, h], f, set) => ``\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1144,"value":"show([HatchTile45({size:30})], 60)","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"HatchTile45 = _define_pattern(\n \"hatch-45\",\n { ..._defaultHatch, size: 8},\n ([s, h], f, set) => ``\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1139,"value":"show([HatchTile90({size:30})], 60)","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"HatchTile90 = _define_pattern(\n \"hatch-90\",\n { ..._defaultHatch, size: 5},\n ([s, h], f, set) => ``\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1121,"value":"show([HatchTile135({size:30})], 60)","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"HatchTile135 = _define_pattern(\n \"hatch-135\",\n { ..._defaultHatch, size: 8},\n ([s, h], f, set) => ``\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1150,"value":"show([HalfToneTile({size:30})], 60)","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"HalfToneTile = _define_pattern(\n \"halftone\",\n { ..._defaultHatch, size: 8, offset: [.5, .5], fill_alldots: 0},\n function (s, f, set)\n {\n s = s[0];\n var s_fill = set.fill;\n if (s_fill <= 0) return \"\";\n \n // fill. For low fills, fade the corners out first\n var fill1 = s_fill > set.fill_alldots ?\n s_fill : Math.min(set.fill_alldots, 2 * set.fill);\n var fill2 = 2 * s_fill - fill1;\n \n // not 100% accurate between 80% and 100% but it is close\n var r1 = fill1 < 0.785398\n ? Math.sqrt(fill1 * .5 / Math.PI)\n : .5 - Math.sqrt((1 - fill1) * 0.31396 / Math.PI);\n var r2 = fill1 > set.fill_alldots ? r1 : Math.sqrt(fill2 * .5 / Math.PI);\n r1 *= s;\n r2 *= s;\n \n // pattern\n var dot = (x, y, r) => ``;\n var ss = \"\";\n ss += dot(s*.5, s*.5, r1);\n for (var [x, y] of [[0,0], [0,s], [s,0], [s,s]]) {\n ss += dot(x, y, r2)\n }\n return ss;\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1155,"value":"show([HalfToneTile8({size:30})], 60)","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1161,"value":"show([CrossHatchTile45({size:30})], 60)","pinned":false,"hidden":false,"mode":"ojs"},{"id":956,"value":"CrossHatchTile45 = settings => CrossHatchTile(settings, HatchTile45, HatchTile135)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1163,"value":"show([CrossHatchTile90({size:30})], 60)","pinned":false,"hidden":false,"mode":"ojs"},{"id":965,"value":"CrossHatchTile90 = settings => CrossHatchTile(settings, HatchTile0, HatchTile90)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1187,"value":"show([CrossHatchTile({size:30}, HatchTile45, HatchTile90)], 60)","pinned":false,"hidden":false,"mode":"ojs"},{"id":931,"value":"CrossHatchTile =\n{\n var _CrossHatchTile = _define_pattern(\n \"cross\",\n {..._defaultHatch, size: 8, _F1: undefined, _F2: undefined},\n function(s, f, set) {\n var ss = \"\";\n for (var p of set._parts)\n {\n ss += p._svg_fg(s, p.settings.fill * s[0], p.settings);\n }\n return ss;\n },\n function(set) {\n // compensate fill: the actual fill factor will be s.fill * (2 - s.fill)\n if (!set._F1) return;\n var hatch1 = set._F1({...set, id:\"\"});\n var s = hatch1.settings;\n s.fill = 1 - Math.sqrt(1 - s.fill);\n set._parts = [hatch1, set._F2({...s, id:\"\"})];\n }\n ); \n \n // compensate fill: the actual fill factor will be s.fill * (2 - s.fill)\n return function(settings, F1, F2) {\n var p1 = F1({settings, id:\"\"});\n console.log(p1.settings);\n var id = settings && settings.id\n return _CrossHatchTile({...p1.settings, id, _F1:F1, _F2:F2});\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1572,"value":"show([DahsedHatchTile({size:[30, 30]})], 60)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1569,"value":"DahsedHatchTile = _define_pattern(\n \"hatch-dashed\",\n { ..._defaultHatch,\n size: [10, 10], dashes: .75, dashOffsets:[0, .5], rotate: -45, cap: \"but\"},\n function([w, h], f, set) {\n h = h / set.dashOffsets.length;\n var y = h * .5;\n var ss = \"\";\n set._dashoffsets.forEach((o, i)=>\n {\n ss += ``\n y += h;\n });\n return ss;\n },\n function(set) {\n if (!Array.isArray(set.size)) { set.size = [set.size, set.size]; }\n if (!Array.isArray(set.dashes))\n {\n set.dashes = [ set.dashes, 1 - set.dashes];\n }\n set._dasharray = set.dashes.map(x => set.size[0] * x).join(\",\");\n set._dashoffsets = set.dashOffsets.map(x => set.size[0] * x);\n }\n);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1174,"value":"{\n var parts = [\n HalfToneTile8({size:30, fg:\"#ddd\"}),\n HatchTile90({size:30, fill: .2, fg:\"#aaa\"})];\n return show([StackedTile(parts)], 60);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"StackedTile = {\n var _Stack = _define_pattern(\n \"stacked\",\n {..._defaultSettings, parts: []},\n function (s, f, set)\n {\n var ss = \"\";\n for (var p of set.parts)\n {\n ss += p._svg_fg(s, p.settings.fill * s[0], p.settings);\n }\n return ss;\n }\n )\n \n function make(parts, id)\n {\n // inherit size and background from first part\n var stack = _Stack(parts[0]);\n stack.settings.parts = parts;\n if (id) { stack.id = id; }\n return stack;\n }\n return make;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1226,"value":"show([BlankTile({bg:\"#eee\"})], 60)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1223,"value":"BlankTile = _define_pattern(\n \"blank\",\n _defaultSettings,\n (s, f, settings) => \"\")\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":760,"value":"md`------------\n\n## Internal`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1264,"value":"_defaultSettings = ({\n rotate: 0,\n scale: 1,\n offset: [0, 0],\n size : 1,\n bg : \"white\",\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"_defaultHatch = ({\n ..._defaultSettings,\n fill : .5,\n fg : \"black\",\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":488,"value":"md`## Imports`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}