Recolorable SVG

by Katarn

HTML

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
    <path
      fill="var(--rod, currentColor)"
      d="M 76.2,462.5 340.4,198.3 441.7,299.6 177.5,563.8 C 169.6,571.6 159,576 148,576 c -11,0 -21.6,-4.4 -29.5,-12.2 L 76.2,521.5 C 68.4,513.6 64,503 64,492 c 0,-11 4.4,-21.6 12.2,-29.5 z"
    />
    <path
      fill="var(--tip, currentColor)"
      d="m 492,64 c 11,0 21.6,4.4 29.5,12.2 l 42.3,42.3 c 7.8,7.9 12.2,18.5 12.2,29.5 0,11 -4.4,21.6 -12.2,29.5 L 475.6,265.7 374.3,164.4 462.5,76.2 C 470.4,68.4 481,64 492,64 Z"
    />
    <path
      fill="var(--sparkles, currentColor)"
      d="m 295.4,37 14.8,36.8 36.8,14.8 c 3,1.2 5,4.2 5,7.4 0,3.2 -2,6.2 -5,7.4 l -36.8,14.8 -14.8,36.8 c -1.2,3 -4.2,5 -7.4,5 -3.2,0 -6.2,-2 -7.4,-5 L 265.8,118.2 229,103.4 c -3,-1.2 -5,-4.2 -5,-7.4 0,-3.2 2,-6.2 5,-7.4 L 265.8,73.8 280.6,37 c 1.2,-3 4.2,-5 7.4,-5 3.2,0 6.2,2 7.4,5 z m -152.7,68.7 21.5,50.1 50.1,21.5 c 5.9,2.5 9.7,8.3 9.7,14.7 0,6.4 -3.8,12.2 -9.7,14.7 l -50.1,21.5 -21.5,50.1 c -2.5,5.9 -8.3,9.7 -14.7,9.7 -6.4,0 -12.2,-3.8 -14.7,-9.7 L 91.8,228.2 41.7,206.7 C 35.8,204.2 32,198.4 32,192 c 0,-6.4 3.8,-12.2 9.7,-14.7 l 50.1,-21.5 21.5,-50.1 c 2.5,-5.9 8.3,-9.7 14.7,-9.7 6.4,0 12.2,3.8 14.7,9.7 z M 496,368 c 6.4,0 12.2,3.8 14.7,9.7 l 21.5,50.1 50.1,21.5 c 5.9,2.5 9.7,8.3 9.7,14.7 0,6.4 -3.8,12.2 -9.7,14.7 l -50.1,21.5 -21.5,50.1 c -2.5,5.9 -8.3,9.7 -14.7,9.7 -6.4,0 -12.2,-3.8 -14.7,-9.7 l -21.5,-50.1 -50.1,-21.5 c -5.9,-2.5 -9.7,-8.3 -9.7,-14.7 0,-6.4 3.8,-12.2 9.7,-14.7 l 50.1,-21.5 21.5,-50.1 c 2.5,-5.9 8.3,-9.7 14.7,-9.7 z"
    />
  </svg>

  Recolorable SVG
</div>

CSS

:root {
  --rod: black;
  --tip: lightgray;
  /* --sparkles: lightblue; */
}

div {
  color: goldenrod;
  font-family: sans-serif;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

svg {
  height: 2rem;
}