30:T5a6,White = { let view = html`

`; d3.select(view) .select('svg') .call(g => { g.selectAll('.horizontal-white-line') .data(d3.range(2)) .join('rect') .attr('class', 'horizontal-white-line') .attr('x', 0) .attr('width', w) .attr( 'y', (d, i) => h / 2 - black_line_thickness / 2 - white_line_thickness + i * (white_line_thickness + black_line_thickness) ) // .attr('x', w / 2 - white_line_thickness - black_line_thickness / 2) // .attr('y', h / 2 - white_line_thickness - black_line_thickness / 2) .attr("height", white_line_thickness) .style("fill", color.white); g.selectAll('.vertical-white-line') .data(d3.range(2)) .join('rect') .attr('class', 'vertical-white-line') .attr('y', 0) .attr('height', h) .attr( 'x', (d, i) => w / 2 - black_line_thickness / 2 - white_line_thickness + i * (white_line_thickness + black_line_thickness) ) .attr("width", white_line_thickness) .style("fill", color.white); }); yield view; }31:T482,Black = { let line_clip_uid = DOM.uid('line-clip'); let view = html` `; yield view; let svg = d3.select(view).style('border', 'double black 3px'); let lines = svg .append('rect') .attr('class', 'black-lines') .attr('height', h) .attr('width', w) .attr('fill', black_striped_texture.url()) .attr('clip-path', line_clip_uid); svg.call(black_striped_texture); }32:Tb5b,Stripes = { let white_line_thickness = 27; let black_line_thickness = 20; let line_clip_uid = DOM.uid('line-clip'); let view = html` `; yield view; let svg = d3.select(view).style('border', 'double black 3px'); svg.call(g => { g.selectAll('.horizontal-white-line') .data(d3.range(2)) .join('rect') .attr('class', 'horizontal-white-line') .attr('x', 0) .attr('width', w) .attr( 'y', (d, i) => h / 2 - black_line_thickness / 2 - white_line_thickness + i * (white_line_thickness + black_line_thickness) ) // .attr('x', w / 2 - white_line_thickness - black_line_thickness / 2) // .attr('y', h / 2 - white_line_thickness - black_line_thickness / 2) .attr("height", white_line_thickness) .style("fill", color.white); g.selectAll('.vertical-white-line') .data(d3.range(2)) .join('rect') .attr('class', 'vertical-white-line') .attr('y', 0) .attr('height', h) .attr( 'x', (d, i) => w / 2 - black_line_thickness / 2 - white_line_thickness + i * (white_line_thickness + black_line_thickness) ) .attr("width", white_line_thickness) .style("fill", color.white); }); let lines = svg .append('rect') .attr('class', 'black-lines') .attr('height', h) .attr('width', w) .attr('fill', black_striped_texture.url()) .attr('clip-path', line_clip_uid); svg .call(black_striped_texture) .call(red_striped_texture) .call( g => g .selectAll('.four-red-lines') .data(['_'], d => d) .join('g') .selectAll('rect') .data(red_stripe_layout, d => d) .join('rect') .attr('class', 'four-red-lines') .attr('x', (d, i) => d[0]) .attr('y', (d, i) => d[1]) .attr('width', (d, i) => d[2]) .attr('height', (d, i) => d[3]) .attr('stroke', color.red) .attr('stroke-width', 0) .style("fill", red_striped_texture.url()) //textures ); }33:[] 2e:{"title":"Burberry Breakdown","cells":[{"id":0,"value":"md`# Burberry Breakdown`","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"ColorReference = {\n let colors = Object.values(color);\n let view = html`

\n${html`${colors.map(\n c => `

`\n)}`}\n\n\n

\n${Object.keys(color).map((x, i) => {\n return `${x}`;\n})}\n\n

\n`;\n\n yield view;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"md`

White

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"viewof white_line_thickness = slider({\n min: 2,\n max: w / 2 - black_line_thickness,\n value: 22.74,\n step: 0.01,\n precision: 2,\n description: \"Width of White Line | Space between Black Lines\",\n title: \"White Line Thickness\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1331,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"md`

RED

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"red_striped_texture = textures\n .lines()\n .stroke(color.red)\n .size(4.5)\n .strokeWidth(1.5)\n .background(color.beige)","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"viewof red_line_width = slider({\n min: 2,\n max: 75,\n value: 22,\n step: 2,\n precision: 0,\n description: \"Width of Red Striped Lines\",\n title: \"Red Lines Width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"viewof red_line_gap = slider({\n min: 0,\n max: 335 / 4,\n value: 35,\n step: 5,\n precision: 0,\n description: \"Space around Red Striped Lines\",\n title: \"Red Lines Padding\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"Red = {\n let SVG = html``;\n\n const svg = d3.select(SVG).attr('transform', `scale(1)`);\n svg\n .append('g')\n .attr('class', 'background')\n .append('rect')\n .attr('height', h)\n .attr('width', w)\n .attr('fill', color.beige);\n svg.call(red_striped_texture).call(\n g =>\n g\n .selectAll('.four-red-lines')\n .data(['_'], d => d)\n .join('g')\n .selectAll('rect')\n .data(red_stripe_layout, d => d)\n .join('rect')\n .attr('class', 'four-red-lines')\n .attr('transform', (d, i) => `translate(${d[0]},${d[1]})`)\n // .attr('x', (d, i) => d[0])\n // .attr('y', (d, i) => d[1])\n .attr('width', (d, i) => d[2])\n .attr('height', (d, i) => d[3])\n .attr('stroke', color.red)\n .attr('stroke-width', 0)\n .style(\"fill\", red_striped_texture.url()) //textures\n );\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"red_stripe_layout = [\n //top\n [0, red_line_gap, w, red_line_width],\n //right\n [w - red_line_gap - red_line_width * 0.75, 0, red_line_width * 0.75, h],\n //bottom\n [0, h - red_line_gap - red_line_width, w, red_line_width],\n //left\n [red_line_gap, 0, red_line_width * 0.75, h]\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":197,"value":"md`

Black

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"black_striped_texture = textures\n .lines()\n .background(color.beige)\n .stroke(color.black)\n .size(4.5)\n .strokeWidth(1.5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"viewof black_line_thickness = slider({\n min: 2,\n max: w / 4,\n value: 22.74,\n step: 0.01,\n precision: 2,\n description:\n \"Size of Black Squares | Width of Black Lines | Space between White Lines\",\n title: \"Black Line Thickness\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"md`

Striped Pattern

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1337,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1083,"value":"md`## Layout Configs`","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"h = w","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"w = 335 //d3.max([335, width])","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"center = w / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"md`## ANX`","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"import { color } from '@stroked/burberry-check'","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"textures = require('textures')","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"import { swatches } from '@d3/working-with-color'","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":345,"value":"import { slider } from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1493,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}