style8.css

/*** SVG demonstration ***/

/* page */
svg {
    background-color: beige;
  }
  
  #heading {
    font-size: 24px;
    font-weight: bold;
  }
  
  #caption {
    font-size: 12px;
  }
  
  /* flower */
  #flower:hover {
    cursor: crosshair;
  }
  
  /* gradient */
  #fade-stop-1 {
    stop-color: blue;
  }
  
  #fade-stop-2 {
    stop-color: white;
  }
  
  /* petals */
  .segment-fill {
    fill: var(--segment-fill-fill);
    stroke: var(--segment-fill-stroke);
    stroke-width: var(--segment-fill-stroke-width);
  }
  
  .segment-fill:hover {
    fill: var(--segment-fill-fill-hover);
    stroke: var(--segment-fill-stroke-hover);
  }
  
  .segment-edge {
    fill: var(--segment-edge-fill);
    stroke: var(--segment-edge-stroke);
    stroke-width: var(--segment-edge-stroke-width);
  }
  
  .segment-edge:hover {
    stroke: var(--segment-edge-stroke-hover);
  }
  
  /* outer petals */
  #outer-petals {
    opacity: .75;
    --segment-fill-fill: azure;
    --segment-fill-stroke: lightsteelblue;
    --segment-fill-stroke-width: 1;
    --segment-edge-fill: none;
    --segment-edge-stroke: deepskyblue;
    --segment-edge-stroke-width: 3;
    --segment-fill-fill-hover: plum;
    --segment-fill-stroke-hover: none;
    --segment-edge-stroke-hover: slateblue;
  }
  
  /* inner petals */
  #inner-petals {
    --segment-fill-fill: yellow;
    --segment-fill-stroke: yellow;
    --segment-fill-stroke-width: 1;
    --segment-edge-fill: none;
    --segment-edge-stroke: yellowgreen;
    --segment-edge-stroke-width: 9;
    --segment-fill-fill-hover: pink;
    --segment-fill-stroke-hover: none;
    --segment-edge-stroke-hover: green;
  }