svg：简单画一个玉手镯

马黑黑

<svg width="400" height="400" viewBox="-200 -200 400 400">
	<defs>
		<linearGradient id="grd" x1="0" x2="0" y1="0" y2="1">
			<stop offset="0" stop-color="#008000" />
			<stop offset="0.5" stop-color="#00ffcc" />
			<stop offset="1" stop-color="#ffcc00" />
		</linearGradient>
		<filter id="shadow">
			<feOffset dx="4" dy="4" />
			<feGaussianBlur stdDeviation="2" />
			<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" />
			<feComposite in="SourceGraphic" />
		</filter>
	</defs>
	<circle cx="0" cy="0" r="160" fill="none" stroke-width="30" stroke="url(#grd)"  filter="url(#shadow)" />
</svg>

查看效果

马黑黑

defs标签封装了一个线性渐变和一个复合滤镜。圆使用渐变描边，使用滤镜略作修饰。

滤镜一是偏移滤镜，dx、dy表示水平、垂直两个方向的偏移；
滤镜二是高斯模糊，模糊参数为2，数值越大就越模糊；
滤镜三是颜色矩阵换算，这里用来设置阴影的颜色（基本保持原品颜色结构）；
滤镜四是将前面的滤镜整合起来，作用于原始图像。

马黑黑

可以尝试拿掉滤镜，比较一下效果。方法是拿掉15行代码的 filter="url(#shadow)"

花飞飞

出品的都是高侈级别，漂亮极了，这得是玻璃种的帝王绿。。

花飞飞

马黑黑 发表于 2024-9-22 18:36
可以尝试拿掉滤镜，比较一下效果。方法是拿掉15行代码的 filter="url(#shadow)"

拿掉后，边缘比较硬，有滤镜比较柔和。。也比较立体。。

马黑黑

花飞飞 发表于 2024-9-22 19:55
拿掉后，边缘比较硬，有滤镜比较柔和。。也比较立体。。

还可以调节一下偏移滤镜和模糊滤镜值

马黑黑

花飞飞 发表于 2024-9-22 19:54
出品的都是高侈级别，漂亮极了，这得是玻璃种的帝王绿。。

严重言重了

花飞飞

花飞飞

马黑黑 发表于 2024-9-22 20:13
还可以调节一下偏移滤镜和模糊滤镜值

刚才就在试着调整。。色彩过渡不自然没办法

花飞飞

马黑黑 发表于 2024-9-22 20:13
严重言重了

就是好看呀，这怎么看都好看。

马黑黑

花飞飞 发表于 2024-9-22 20:15

挺不错的。其实还可以调整渐变：x1，x2，y1，y2 取值在 0~1 之间，它们达成的是渐变的方向和覆盖范围；stop可以加更多的颜色，每一个颜色一个 stop 标签，offset 取值在 0~1 之间。

马黑黑

花飞飞 发表于 2024-9-22 20:18
就是好看呀，这怎么看都好看。

不过这个设计的有点大了

马黑黑

花飞飞 发表于 2024-9-22 20:17
刚才就在试着调整。。色彩过渡不自然没办法

来来去去就是0和1之间的组合

花飞飞

马黑黑 发表于 2024-9-22 20:19
挺不错的。其实还可以调整渐变：x1，x2，y1，y2 取值在 0~1 之间，它们达成的是渐变的方向和覆盖范围；st ...

方向改了一下，黄色的在边上了。。
颜色也添加了两种相近似的
就是颜色之间感觉有硬边

这个同页代码不受影响？

花飞飞

马黑黑 发表于 2024-9-22 20:20
不过这个设计的有点大了

我拿我的跟屏幕上比划一下，是大那么一圈

花飞飞

马黑黑 发表于 2024-9-22 20:20
来来去去就是0和1之间的组合

还有色彩要近似吧，选临近色

红影

马黑黑 发表于 2024-9-22 18:36
可以尝试拿掉滤镜，比较一下效果。方法是拿掉15行代码的 filter="url(#shadow)"

还是有滤镜看着更柔和些

红影

线性渐变加复合滤镜就可以做出手镯，手镯工厂有危机了

红影

这个很漂亮，也可顺便感受一下滤镜的效果

小辣椒

代码做玉手镯，可以以假乱真，漂亮