手工用svg画个心形路径
<svg width="300" height="300"><path d="M150 80 C240 -20 300 10 290 80 Q250 200 150 290 Q10 150 10 80 C10 -20 100 20 150 80z" fill="none" stroke="red" />
</svg>
代码
<svg width="300" height="300">
<path d="M150 80 C240 -20 300 10 290 80 Q250 200 150 290 Q10 150 10 80 C10 -20 100 20 150 80z" fill="none" stroke="red" />
</svg>
路径设计的不是理想，好多地方是蒙的，没有精准计算。哪位可以弄精致一些？
网上有 svg路径工具，做出来的效果很好，只是我嫌它设计的太复杂。我这里吧，两个 C 指令、两个 Q 指令就能拼接出来，如果在微调一下，应该是不错的。
现在这样子，我用于珠子环绕路线，大体效果还是可以的。 马黑黑 发表于 2022-9-12 22:30
路径设计的不是理想，好多地方是蒙的，没有精准计算。哪位可以弄精致一些？
网上有 svg路径工具，做出来 ...
已经很漂亮，黑黑厉害。{:4_187:}
想要别的形状也简单，找个图片，量取相应数值就是了{:4_173:} 用二次和三次贝尔曲线来画，还是挺不容易的{:4_204:} 红影 发表于 2022-9-13 11:27
用二次和三次贝尔曲线来画，还是挺不容易的
我刚刚又闭着眼睛想，其实可以用四个二次贝塞尔曲线做的，其实可以用四个二次贝塞尔曲线做的，其实可以用四个二次贝塞尔曲线做的。 红影 发表于 2022-9-13 11:20
已经很漂亮，黑黑厉害。
想要别的形状也简单，找个图片，量取相应数值就是了
可以的 马黑黑 发表于 2022-9-13 12:37
我刚刚又闭着眼睛想，其实可以用四个二次贝塞尔曲线做的，其实可以用四个二次贝塞尔曲线做的，其实可以用 ...
我都习惯了看到的贝塞尔曲线是对称的，这样不对称的感觉还是有点难。 马黑黑 发表于 2022-9-13 12:37
可以的
要完全拟合成图片的样子，也不容易的。 红影 发表于 2022-9-13 20:31
要完全拟合成图片的样子，也不容易的。
这个需要机器来弄，会得出一大堆的数据 红影 发表于 2022-9-13 20:29
我都习惯了看到的贝塞尔曲线是对称的，这样不对称的感觉还是有点难。
非对称的曲线可能也很常见
<svg width="300" height="300">
<path d="M5 70 Q15 -10 150 70 Q285 -10 295 70 Q310 99 150 288 Q-10 99 5 70z" fill="none" stroke="red"
/>
</svg> 红影 发表于 2022-9-13 20:58
这个挺像，铅笔画{:5_108:} 下半截不对，点取到一半以上去了，看起来应该取一半以下
<svg width="300" height="300">
<path d="M5 70 Q45 -10 150 70 Q255 -10 295 70 Q310 159 150 288 Q-10 159 5 70z" fill="none"
stroke="red" />
</svg> 马黑黑 发表于 2022-9-13 21:00
这个挺像，铅笔画
就是你说的四个二次贝塞尔曲线，去量了一个现成的图图，然后用量的数据取点。
这个数值有问题，后面调的这个稍微好点。 红影 发表于 2022-9-13 21:06
就是你说的四个二次贝塞尔曲线，去量了一个现成的图图，然后用量的数据取点。
这个数值有问题，后面调的 ...
这是我刚画好的，你参考下：
M150 60 Q245 -10 280 60 Q320 150 150 290 Q-20 150 20 60 Q65 -10 150 60z 红影 发表于 2022-9-13 21:04
不错的
马黑黑 发表于 2022-9-13 21:13
这是我刚画好的，你参考下：
M150 60 Q245 -10 280 60 Q320 150 150 290 Q-20 150 20 60 Q65 -10 150...
你这个顺滑多了，漂亮{:4_187:}你是从最上面中心点出发的，我是从最左边点出发的。
马黑黑 发表于 2022-9-13 20:54
这个需要机器来弄，会得出一大堆的数据
还是你的方法简洁而且易懂。