title: semiotic - strokeWidth controls both stroke width and number of fill lines
body: <p>Say that I have this Semiotic code (see <a href="https://stackoverflow.com/questions/56571572/how-to-get-semiotic-plot-to-display-in-browser">How to get Semiotic plot to display in browser</a>):</p>
  
  <pre><code>import React from "react"
  
  import OrdinalFrame from "semiotic/lib/OrdinalFrame"
  const frameProps = { 
  /* --- Data --- */
    data: [5,8,2,6,4 ],
  
  /* --- Size --- */
    size: [600,600],
    margin: { left: 100, bottom: 90, right: 10, top: 40 },
  
  /* --- Layout --- */
    type: "bar",
    oPadding: 10,
  
  /* --- Customize --- */
    style: function(e,t){return{fill:t&lt;5?"url(#gradient)":"url(#triangle)",
          fillOpacity:4.5,
          strokeWidth:1,
          stroke: "black",
          strokeOpacity:0.5}},
    additionalDefs: [
      &lt;pattern
        key="triangle"
        id="triangle"
        width="10"
        height="10"
        patternUnits="userSpaceOnUse"
      &gt;
        &lt;rect fill={"#9fd0cb"} width="10" height="10" /&gt;
        &lt;circle fill={"#7566ff"} r="5" cx="3" cy="3" /&gt;
      &lt;/pattern&gt;,
      &lt;linearGradient key="gradient" x1="0" x2="0" y1="0" y2="1" id="gradient"&gt;
        &lt;stop stopColor={"#dc58e5"} offset="0%" /&gt;
        &lt;stop stopColor={"#1111ff"} offset="100%" /&gt;
      &lt;/linearGradient&gt;
    ],
    renderMode: ("sketchy"),
  
      title: (
      &lt;text textAnchor="middle"&gt;
        Theaters showing &lt;tspan fill={"#ac58e5"}&gt;Ex Machina&lt;/tspan&gt; vs{" "}
        &lt;tspan fill={"#E0488B"}&gt;Far from the Madding Crowd&lt;/tspan&gt;
      &lt;/text&gt;  ),
  
  }
  
  const XYFrameWrapper = () =&gt; {
    return &lt;OrdinalFrame {...frameProps} /&gt;
  }
  
  export default XYFrameWrapper;
  </code></pre>
  
  <p>I have noticed that the <code>strokeWidth</code> option alters both the stroke width (the outline of the bars) as well as the number of fill lines. For example, if <code>strokeWidth</code> is set to <code>1</code>, it gives many lines, but if it set to <code>10</code>, it gives very few lines. How can I get it to control only the stroke width? Relatedly, I can't figure out how to get very few lines with only the <code>fillOpacity</code> option. I can do this using the <code>strokeWidth</code> option, but then of course it makes the stroke width line way too big. How can I achieve very few lines, but have a small stroke width line?</p>