ReactとSVGで、円や曲線に沿って文字を並べる方法

// paths.ts
// 円を、左端（9時の位置）から始まる2つの円弧で描く d 属性を作る
// clockwise: 時計回り（上半分を先に通る） / counterclockwise: 反時計回り（下半分を先に通る）
export function circlePath(
  cx: number,
  cy: number,
  r: number,
  direction: 'clockwise' | 'counterclockwise',
): string {
  const sweep = direction === 'clockwise' ? 1 : 0;
  return [
    `M ${cx - r} ${cy}`,
    `A ${r} ${r} 0 1 ${sweep} ${cx + r} ${cy}`,
    `A ${r} ${r} 0 1 ${sweep} ${cx - r} ${cy}`,
  ].join(' ');
}

// 左右の端（高さ y）を結ぶ2次ベジェ曲線。真ん中が bend だけ上に（負なら下に）ずれる
export function curvePath(width: number, y: number, bend: number): string {
  return `M 0 ${y} Q ${width / 2} ${y - bend * 2} ${width} ${y}`;
}

// CircleText.tsx
import { useId } from 'react';
import { circlePath } from './paths';

type Props = {
  top: string; // 上半分に、時計回りに並べる文字
  bottom?: string; // 下半分に、左から右へ並べる文字
  size?: number; // SVG の幅と高さ
  radius?: number; // 文字を並べる円の半径
  fontSize?: number;
};

export function CircleText({ top, bottom, size = 240, radius = 90, fontSize = 20 }: Props) {
  const id = useId();
  const c = size / 2;

  return (
    <svg viewBox={`0 0 ${size} ${size}`} width={size} height={size} role="img" aria-label={[top, bottom].filter(Boolean).join(' ')}>
      <defs>
        <path id={`${id}-cw`} d={circlePath(c, c, radius, 'clockwise')} />
        <path id={`${id}-ccw`} d={circlePath(c, c, radius, 'counterclockwise')} />
      </defs>
      <circle cx={c} cy={c} r={radius} fill="none" stroke="#00c8e8" strokeDasharray="4 4" />
      <text fontSize={fontSize} dominantBaseline="central" fill="#1f2a30">
        <textPath href={`#${id}-cw`} startOffset="25%" textAnchor="middle">
          {top}
        </textPath>
      </text>
      {bottom && (
        <text fontSize={fontSize} dominantBaseline="central" fill="#1f2a30">
          <textPath href={`#${id}-ccw`} startOffset="25%" textAnchor="middle">
            {bottom}
          </textPath>
        </text>
      )}
    </svg>
  );
}

// RingText.tsx
import { useId, useLayoutEffect, useRef, useState } from 'react';
import { circlePath } from './paths';

type Props = {
  text: string;
  size?: number;
  radius?: number;
  fontSize?: number;
};

// 文字を円の1周に均等に広げる
export function RingText({ text, size = 240, radius = 90, fontSize = 18 }: Props) {
  const id = useId();
  const measureRef = useRef<SVGTextElement>(null);
  const [natural, setNatural] = useState(0); // 間隔を広げる前の、文字列の長さ
  const c = size / 2;
  const circumference = 2 * Math.PI * radius;
  const count = Array.from(text).length;

  // 見えない text で、広げる前の長さを測る
  useLayoutEffect(() => {
    setNatural(measureRef.current!.getComputedTextLength());
  }, [text, fontSize]);

  // 文字と文字の間（count か所。最後の文字と最初の文字の間も含む）を同じにする
  const gap = (circumference - natural) / count;

  return (
    <svg viewBox={`0 0 ${size} ${size}`} width={size} height={size} role="img" aria-label={text}>
      <defs>
        <path id={id} d={circlePath(c, c, radius, 'clockwise')} />
      </defs>
      <text ref={measureRef} fontSize={fontSize} visibility="hidden">
        {text}
      </text>
      {natural > 0 && (
        <text fontSize={fontSize} dominantBaseline="central" fill="#1f2a30">
          <textPath href={`#${id}`} textLength={circumference - gap} lengthAdjust="spacing">
            {text}
          </textPath>
        </text>
      )}
    </svg>
  );
}

// CurvedText.tsx
import { useId, useLayoutEffect, useRef, useState } from 'react';
import { curvePath } from './paths';

type Props = {
  text: string;
  width?: number;
  fontSize?: number;
  initialBend?: number;
};

export function CurvedText({ text, width = 320, fontSize = 20, initialBend = 40 }: Props) {
  const id = useId();
  const [bend, setBend] = useState(initialBend);
  const pathRef = useRef<SVGPathElement>(null);
  const textRef = useRef<SVGTextPathElement>(null);
  const [overflow, setOverflow] = useState(false);
  const height = 170;
  const d = curvePath(width, 100, bend);

  // 文字列の長さが曲線の長さを超えたら、警告を出す
  useLayoutEffect(() => {
    const pathLength = pathRef.current!.getTotalLength();
    const textLength = textRef.current!.getComputedTextLength();
    setOverflow(textLength > pathLength);
  }, [d, text, fontSize]);

  return (
    <div>
      <svg viewBox={`0 0 ${width} ${height}`} width={width} height={height} role="img" aria-label={text}>
        <path ref={pathRef} id={id} d={d} fill="none" stroke="#00c8e8" strokeDasharray="4 4" />
        <text fontSize={fontSize} fill="#1f2a30">
          <textPath ref={textRef} href={`#${id}`} startOffset="50%" textAnchor="middle">
            {text}
          </textPath>
        </text>
      </svg>
      <label>
        曲がり具合：{bend}
        <input type="range" min={-60} max={60} value={bend} onChange={(e) => setBend(Number(e.target.value))} />
      </label>
      {overflow && <p role="alert">文字が曲線に収まりきっていません</p>}
    </div>
  );
}