Clock marks with dasharray

Ticks.tsx

import { ComponentProps, FC } from 'react'

export const Ticks: FC<
  Omit<
    ComponentProps<'circle'>,
    'strokeWidth' | 'pathLength' | 'strokeDasharray' | 'strokeDashoffset' | 'r'
  > & {
    r: number
    count: number
    length: number
    width: number
    align: 'in' | 'out' | 'center'
  }
> = ({ r, count, length, width, align, ...props }) => {
  const C = 2 * Math.PI * r

  return (
    <circle
      {...props}
      r={align === 'in' ? r - length / 2 : align === 'out' ? r + length / 2 : r}
      strokeWidth={length}
      pathLength={C}
      strokeDasharray={`${width} ${C / count - width}`}
      strokeDashoffset={`${width / 2}`}
    />
  )
}