joy_color_without_mixes

by DOK_UA

HTML

<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8" />
<title>HSL Color Wheel – Joystick</title>
<style>
  :root{
    --bg:#1f1f1f; --panel:#2a2a2a; --text:#eaeaea;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; display:grid; place-items:center; background:var(--bg); color:var(--text);
    font:13px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }
  .card{
    background:var(--panel); padding:18px; border-radius:14px; box-shadow:var(--shadow);
    display:grid; gap:12px; width:min(380px, 92vw);
  }
  .row{display:flex; align-items:center; justify-content:space-between; gap:10px}
  .swatch{inline-size:32px; block-size:24px; border-radius:6px; border:1px solid #0008}
  .readout{opacity:.9}
  svg{width:100%; height:auto; display:block}
  .wheel-shadow { filter: drop-shadow(0 6px 16px rgba(0,0,0,.35)); }
  .joy-shadow   { filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
  .handle{ cursor: grab; }
  .handle:active{ cursor: grabbing; }
</style>
</head>
<body>
  <div class="card">
    <div class="row">
      <div class="readout" id="readout">H:0°  S:50%  L:50%</div>
      <div class="row" style="gap:8px">
        <div class="swatch" id="oldSwatch" style="background:#999"></div>
        <div class="swatch" id="newSwatch"></div>
      </div>
    </div>

    <!-- Один SVG: статичне кольорове колесо + окремо обертається лише ринг + джойстик -->
    <svg id="ui" viewBox="0 0 100 120" xmlns="http://www.w3.org/2000/svg" aria-label="Color wheel with joystick">
      <!-- 12 кольорових секторів: СТАТИКА -->
      <g id="segments" class="wheel-shadow">
        <defs>
          <path id="sector" d="M50,50 L50,2 A48,48 0 0 1 74,8 Z"/>
        </defs>
        <g>
          <use href="#sector" fill="hsl(0, 100%, 50%)"    transform="rotate(0,50,50)"/>
          <use href="#sector" fill="hsl(30, 100%, 50%)"  ...