svg蓝色星球
<style>#msvg { display: block; margin: 20px auto; }
</style>
<svg id="msvg" width="400" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<defs id="defs">
<radialGradient id="grd" cx="30%" cy="25%" r="70%">
<stop offset="0%" stop-color="#eff"></stop>
<stop offset="50%" stop-color="#4da6ff"></stop>
<stop offset="100%" stop-color="#003d82"></stop>
</radialGradient>
</defs>
<circle cx="0" cy="0" r="180" fill="url(#grd)"></circle>
</svg> svg 核心代码：
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<defs id="defs">
<radialGradient id="grd" cx="30%" cy="25%" r="70%">
<stop offset="0%" stop-color="#eff"></stop>
<stop offset="50%" stop-color="#4da6ff"></stop>
<stop offset="100%" stop-color="#003d82"></stop>
</radialGradient>
</defs>
<circle cx="0" cy="0" r="180" fill="url(#grd)"></circle>
</svg>svgdr绘制指令：
dr.setsvg({width: 400, height: 400, viewBox: '-200 -200 400 400'});
dr.defs('defs');
dr.gradient('radialGradient', {id: 'grd', cx: '30%', cy: '25%', r: '70%'}, '<stop offset="0%" stop-color="#eff" /><stop offset="50%" stop-color="#4da6ff" /><stop offset="100%" stop-color="#003d82" />');
dr.circle(0, 0, 180, 'url(#grd)');svgdr 指令可以到这里运行： svgdr on line
实现立体化模拟的核心原理：
将渐变的中心点 (cx, cy) 设置在圆心的左上方，并搭配由浅到深的颜色过渡。 这样做的渐变比用ps做出来的精致，ps的渐变很多时候拉出来的不匀净，做不到最精确。感谢马老师分享，晚上好~~{:4_204:}{:4_190:}
色彩好美啊，这样的过渡很漂亮。
svgdr 这个好久没接触了，黑黑设计的绘制svg图案的精简方式{:4_187:} 霜染枫丹 发表于 2026-5-28 21:26
这样做的渐变比用ps做出来的精致，ps的渐变很多时候拉出来的不匀净，做不到最精确。感谢马老师分享，晚上好 ...
PS可以做的更好，关键时如何操作 红影 发表于 2026-5-28 21:52
色彩好美啊，这样的过渡很漂亮。
svgdr 这个好久没接触了，黑黑设计的绘制svg图案的精简方式
svrdr指令偏多，对svg不熟悉的会无所适从 马黑黑 发表于 2026-5-28 21:59
PS可以做的更好，关键时如何操作
结合部仔细看我做的会出现边界，我就只好再走一遍降噪{:4_173:}{:4_190:}
代码简洁，立体感强，立体化实现手法巧妙{:4_180:} 杨帆 发表于 2026-5-29 12:22
代码简洁，立体感强，立体化实现手法巧妙
感谢支持 霜染枫丹 发表于 2026-5-29 08:17
结合部仔细看我做的会出现边界，我就只好再走一遍降噪
追求的是效果，实现手段可以有多种补救方式 欣赏黑黑的新教程{:4_199:} 小辣椒 发表于 2026-5-30 22:26
欣赏黑黑的新教程
{:4_190:}
页:
[1]