代码是这样的：

```html
<svg :width="size" :height="size" class="circle">
  <circle
    :r="radius"
    :cx="center"
    :cy="center"
    :stroke="backgroundColor"
    :stroke-width="strokeWidth"
    fill="none"
  ></circle>
  <circle
    :r="radius"
    :cx="center"
    :cy="center"
    :stroke="color"
    :stroke-width="strokeWidth"
    :stroke-dasharray="circumference"
    :stroke-dashoffset="offset"
    fill="none"
  ></circle>
</svg>
```

现在圆环上的进度条起点和终点是直角边，我想设置成圆角的，具体应该怎么改？麻烦带佬们看一下

svg写了一个圆环进度条效果，怎么设置圆角

[popsy illustrations](https://popsy.co/illustrations) 提供一些免费色 SVG 插图，可以自行配色，完全免费。

![](https://content.hackertalk.net/pub/AMn4G3-pnaPD1O)

插图网站很多，这个网站让我感到奇怪的是进去后 react 和 vue 开发工具都是亮的：

![](https://content.hackertalk.net/pub/kQ6y42-NMP4x5o)

混合技术栈？

popsy：一个免费的 svg 插图网站。vue + react ？

很多来黑客说的小伙伴都体验到网站秒开、秒加载带来的丝滑体验，其中一个很重要的点就是网页的体积非常小，全站 css 文件包括暗黑模式只需要 17 kB，避免使用 UI 库（尽量手写），大量使用 SVG 图片（SVG 体积也扣），其中 logo 使用了[SuperTinyIcons](https://github.com/edent/SuperTinyIcons) 这个库，每个 SVG 文件不超过 1kB。

下面是一个对比：

![](https://content.hackertalk.net/pub/vNWo5p-7BDQkyx)

Logo 数量也非常多，常见的都可以找到，你也可以贡献代码，提交 logo，要满足一个严格的要求：必须小于 1kB。

![](https://content.hackertalk.net/pub/NMWra4-01P1zrD)

仓库地址：[SuperTinyIcons](https://github.com/edent/SuperTinyIcons)