31:T54a,md` The Javascript code below generates "s"-shaped curves in the [SVG path language](https://www.w3.org/TR/SVG/paths.html), but we can make them by hand too! Each curve is defined by its **d**ata attribute, which begins with an absolute (x,y) coordinate starting point in pixels, where the imaginary pen is **M**oved to. \`control point and an end point to draw a smooth curve pulled to the left from the starting point and then back and down to the middle of the SVG artboard. Quadratic curves are cool, watch [this explainer video](https://www.youtube.com/watch?v=aVwxzDHniEw) to be mesmerized! ... \`Q250,100 400,200\` ... Another **Q**uadratic curve follows, which uses another control point to the right and a final end point to draw the rightwards-bending side of the curve. ... \`Q550,300 400,400" \` ... We then finish the tag and style the path. \`fill="none" stroke="blue" stroke-width="20" opacity="0.8" />\` All of these points can be connected as a control polyline to better visualize the relationship between the coordinates and the resulting curve. `32:T7a2,{ //svg variables const height = 400; //create SVG artboard const svg = d3.create("svg").attr("width", width).attr("height", height); //visualization variables const spacing = 8; const strokeMinimum = 10; const strokeVariation = 20; const curvinessMinimum = 50; const curvinessVariation = 100; //list of random colors to choose from const colors = ["red", "blue", "gold", "black", "black", "beige"]; //loop to make each path for (let i = 0; i < width; i = i + spacing) { //create random settings for each path const curviness = Math.random() * curvinessVariation + curvinessMinimum; const strokeThickness = Math.random() * strokeVariation + strokeMinimum; //get random color from array //Math.random() gives random number between 0 and 1 //(Math.random() * colors.length) will give a random number between 0 and the number of items in an array //Math.floor() rounds decimal numbers down https://www.w3schools.com/Jsref/jsref_floor.asp //We round down with Math.floor(), because arrays start at index 0 const randomIndex = Math.floor(Math.random() * colors.length); //get random color from color array const randomColorFromArray = colors[randomIndex]; //build s-shaped path const curvyPath = "M " + i + ",0 Q" + (i - curviness) + "," + height * 0.25 + " " + i + "," + height * 0.5 + "Q " + (i + curviness) + "," + height * 0.75 + " " + i + "," + height; //draw path svg .append("path") .attr("d", curvyPath) .attr("fill", "none") .attr("stroke", randomColorFromArray) .attr("stroke-width", strokeThickness) .attr("opacity", 0.8) .attr("stroke-linecap", "square"); //https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap } //show visualization in Observable return svg.node(); }33:[] 2f:{"title":"Zach's Sol Lewitt Challenge","cells":[{"id":8,"value":"md`\n# Zach's *Sol Lewitt* Challenge\n\nBased on the work *Irregular Vertical Brushstrokes with Colors Superimposed*, 1993\n![sol lewitt](https://d32dm0rphc51dk.cloudfront.net/TAzOteh6x2WawJgZM17Dkw/large.jpg)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"examplePathTag = ''","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"exampleControlPolyline = ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}