SVG vector [path] version 4

<div class="controls">
  <button data-color="#33C1FF">Knapp 1</button>
  <button data-color="#8D33FF">Knapp 2</button>
  <button data-color="#33FF57">Knapp 3</button>
  <button data-color="#FFC733">Knapp 4</button>
  <button data-color="#FF3380">Knapp 5</button>
  <button data-color="#33FFF6">Knapp 6</button>
</div>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 100 100" class="snowflake">
  <g stroke="currentColor" stroke-width="4" stroke-linecap="round" fill="currentColor">
    <polygon points="0,-10 8,-5 8,5 0,10 -8,5 -8,-5" fill="currentColor"/>
    <g id="arm">
      <line x1="0" y1="0" x2="0" y2="-40"/>
      <line x1="0" y1="-18" x2="-12" y2="-26"/>
      <line x1="0" y1="-18" x2="12" y2="-26"/>
      <line x1="0" y1="-28" x2="-11" y2="-36"/>
      <line x1="0" y1="-28" x2="11" y2="-36"/>
    </g>
    <use href="#arm" transform="rotate(0)"/>
    <use href="#arm" transform="rotate(60)"/>
    <use href="#arm" transform="rotate(120)"/>
    <use href="#arm" transform="rotate(180)"/>
    <use href="#arm" transform="rotate(240)"/>
    <use href="#arm" transform="rotate(300)"/>
  </g>
</svg>

<script>
const buttons = document.querySelectorAll('.controls button');
const snowflake = document.querySelector('.snowflake');

buttons.forEach(btn => {
  btn.addEventListener('click', () => {
    const color = btn.getAttribute('data-color');
    // ändra både fill och stroke
    snowflake.querySelectorAll('*').forEach(el => {
      el.setAttribute('fill', color);
      el.setAttribute('stroke', color);
    });
  });
});
</script>