10/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Circle drawing</title>
    <link rel="stylesheet" href="../pagestyle.css">
    <script type="module" src="circle-drawing.js"></script>
    <style>
      svg, figure > label { display: block; }
      input { vertical-align: bottom; }
    </style>
  </head>
  <body>
    <figure id="diagram">
      <svg viewBox="0 0 550 220">
        <rect v-for="{q, r} in positions"
              :x="q * scale + 1/2" :y="r * scale + 1/2"
              :width="scale-1" :height="scale-1"
              :fill="insideCircle(center, {q, r}, radius)
                     ? 'hsl(0 30% 60%)'
                     : 'hsl(250 10% 93%)'"
        />
        <drag-handle v-model="centerPosition"
                     color="yellow" :size="0.4 * scale" />
      </svg>
      <label>
        radius =
        <input v-model.number="radius"
               type="range" min="1" max="8" step="0.1" />
        <input v-model.number="radius"
               type="number" min="1" max="8" step="0.1" size="3" />
      </label>
    </figure>
  </body>
</html>