如何用CSS或SVG制作一个具有不同弧度的圆？

Question

就像这样：

它有不同的宽度。

Answer 1

如何在SVG中执行此操作，将一个圆圈直接放在另一个圆圈上。

<svg width="200" height="200">
  <circle cx="100" cy="100" r="70" fill="none" stroke="#ccc" stroke-width="1"/>
  <circle cx="100" cy="100" r="70" fill="none" stroke="#ccc" stroke-width="5"
          stroke-dasharray="413.4 440" transform="rotate(-90 100 100)"/>
  
</svg>

第二个（前）圆上的两个附加属性执行以下功能：

stroke-dasharray="413.4 440"制作一个破折号图案，其效果是绘制94％的圆周（2 * PI * 70 = 440）。

transform="rotate(-90 100 100)"逆时针旋转圆圈90度，以便“进度条”从12点开始。默认情况下，圆圈的虚线图案从3点开始。