Math pictures

Example 1. Pillow / Cushion / Astroid (Bezier cubic curves - they do not look well)

<svg width="200" height="200" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
    <!-- <rect width="100%" height="100%" style="fill:none; stroke:#ccc;"/> -->
        <defs>
            <path id="bezier_pill"
                d="M 50 0 Q 46 46 0 50 L 0 0 L 50 0 Q 54 45 100 50 L 100 0 Z
                M 100 50 Q 54 54 50 100 L 100 100 Z
                M 50 100 Q 46 54 0 50 L 0 100 Z"
                style="fill:rgba(45,95,44,0.3); stroke:rgb(45,95,44); stroke-width:1"  />
         </defs>
    <use href="grids.svg#grid_120x120" x="0" y="0"/>
    <use href="#bezier_pill" x="10" y="10"/>
</svg>

Example 2. Spandrels

<svg width="200" height="200" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
   <!-- <rect width="100%" height="100%" style="fill:none; stroke:#ccc;"/> -->
   <defs>
       <path  id="arc_sector"
           d="M 50 0 A 50 50 0 0 1 0 50  v -50 Z"/>
       <g id="arc_pill" style="fill:rgba(45,95,44,0.3); stroke:rgb(44,95,45)">
           <rect width="100" height="100" style="stroke:rgb(45,95,44); fill:none;"/>
           <use href="#arc_sector"/>
           <use href="#arc_sector" transform="rotate(90, 50,50)"/>
           <use href="#arc_sector" transform="rotate(180, 50,50)"/>
           <use href="#arc_sector" transform="rotate(270, 50,50)"/>
       </g>
   </defs>
    <use href="grids.svg#grid_120x120" x="0" y="0"/>
   <use href="#arc_pill" transform="translate(10,10)"/>
</svg>

Example 3. Quatrefoil / Four-leaf rosette 

<svg width="200" height="200" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <path  id="arc_leaf"
            d="M 50 0 A 50 50 0 0 1 0 50 A 50 50 0 0 1 50 0"/>
        <g id="arc_leafs" style="fill:rgba(45,95,44,0.3); stroke:rgb(44,95,45)">
            <rect width="100" height="100" style="stroke:rgb(45,95,44); fill:none;"/>
            <use href="#arc_leaf"/>
            <use href="#arc_leaf" transform="rotate(90, 50,50)"/>
            <use href="#arc_leaf" transform="rotate(180, 50,50)"/>
            <use href="#arc_leaf" transform="rotate(270, 50,50)"/>
        </g>
    </defs>
     <use href="grids.svg#grid_120x120" x="0" y="0"/>
    <use href="#arc_leafs" transform="translate(10,10)"/>
</svg>
Claude Opus 4.6 — Why Examples 2 and 3 appear to have different shades

Both use the same fill: rgba(45,95,44,0.3). The difference is geometry, not color.

  • arc_sector: M 50 0 A 50 50 0 0 1 0 50 v -50 Z — arc + straight lines + close → a solid wedge that fills a large area in the corner.
  • arc_leaf: M 50 0 A 50 50 0 0 1 0 50 A 50 50 0 0 1 50 0 — two arcs, no straight lines → a thin lens that fills much less area.

Same opacity, but less filled area → looks lighter. The perceived "shade" is simply about how much of the white background is covered by the semi-transparent fill. A fatter shape (more covered pixels) looks darker; a thinner shape looks lighter. There are no hidden layers or internal rendering tricks — it is purely a matter of geometry.

Example 4. four-leaf clover 

<svg width="200" height="200" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
     <defs>
         <path  id="leaf_clover"
             d="M 0 0 A 50 50 0 0 1 50 50 A 50 50 0 0 1 0 0"/>
         <g id="four_leaf_clover" style="fill:rgba(45,95,44,0.3); stroke:rgb(44,95,45)">
             <rect width="100" height="100" style="stroke:rgb(45,95,44); fill:none;"/>
             <use href="#leaf_clover"/>
             <use href="#leaf_clover" transform="rotate(90, 50,50)"/>
             <use href="#leaf_clover" transform="rotate(180, 50,50)"/>
             <use href="#leaf_clover" transform="rotate(270, 50,50)"/>
         </g>
     </defs>
      <use href="grids.svg#grid_120x120" x="0" y="0"/>
     <use href="#four_leaf_clover" transform="translate(10,10)"/>
</svg