svg蓝色星球

马黑黑

马黑黑

svg 核心代码：

1. <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
   
2.         <defs id="defs">
   
3.                 <radialGradient id="grd" cx="30%" cy="25%" r="70%">
   
4.                         <stop offset="0%" stop-color="#eff"></stop>
   
5.                         <stop offset="50%" stop-color="#4da6ff"></stop>
   
6.                         <stop offset="100%" stop-color="#003d82"></stop>
   
7.                 </radialGradient>
   
8.         </defs>
   
9.         <circle cx="0" cy="0" r="180" fill="url(#grd)"></circle>
   
10. </svg>

复制代码

svgdr绘制指令：

1. dr.setsvg({width: 400, height: 400, viewBox: '-200 -200 400 400'});
   
2. dr.defs('defs');
   
3. 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" />');
   
4. dr.circle(0, 0, 180, 'url(#grd)');

复制代码

svgdr 指令可以到这里运行： svgdr on line

马黑黑

实现立体化模拟的核心原理：

        将渐变的中心点 (cx, cy) 设置在圆心的左上方，并搭配由浅到深的颜色过渡。

霜染枫丹

这样做的渐变比用ps做出来的精致，ps的渐变很多时候拉出来的不匀净，做不到最精确。感谢马老师分享，晚上好~~

红影

色彩好美啊，这样的过渡很漂亮。
svgdr 这个好久没接触了，黑黑设计的绘制svg图案的精简方式

马黑黑

霜染枫丹 发表于 2026-5-28 21:26
这样做的渐变比用ps做出来的精致，ps的渐变很多时候拉出来的不匀净，做不到最精确。感谢马老师分享，晚上好 ...

PS可以做的更好，关键时如何操作

马黑黑

红影 发表于 2026-5-28 21:52
色彩好美啊，这样的过渡很漂亮。
svgdr 这个好久没接触了，黑黑设计的绘制svg图案的精简方式

svrdr指令偏多，对svg不熟悉的会无所适从

霜染枫丹

马黑黑 发表于 2026-5-28 21:59
PS可以做的更好，关键时如何操作

结合部仔细看我做的会出现边界，我就只好再走一遍降噪

杨帆

代码简洁，立体感强，立体化实现手法巧妙

马黑黑

杨帆 发表于 2026-5-29 12:22
代码简洁，立体感强，立体化实现手法巧妙

感谢支持

马黑黑

霜染枫丹 发表于 2026-5-29 08:17
结合部仔细看我做的会出现边界，我就只好再走一遍降噪

追求的是效果，实现手段可以有多种补救方式

小辣椒

欣赏黑黑的新教程

马黑黑

小辣椒 发表于 2026-5-30 22:26
欣赏黑黑的新教程