Skip to content

Instantly share code, notes, and snippets.

@mitian233

mitian233/ver1.html

Created August 28, 2025 05:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mitian233/db57f69410ca636b61ef1327db70eea6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mitian233/db57f69410ca636b61ef1327db70eea6 to your computer and use it in GitHub Desktop.
Download ZIP
gradient demo
Raw
ver1.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分层径向渐变演示</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: "Inter", sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f4f8;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
.container {
background-color: #ffffff;
border-radius: 1rem;
/* rounded-xl */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
/* shadow-xl */
padding: 2.5rem;
/* p-10 */
max-width: 90%;
width: 800px;
text-align: center;
}
svg {
width: 100%;
height: 400px;
border-radius: 0.75rem;
/* rounded-lg */
margin-top: 1.5rem;
/* mt-6 */
border: 1px solid #e2e8f0;
/* border-gray-200 */
}
h1 {
font-size: 2.25rem;
/* text-4xl */
font-weight: 700;
/* font-bold */
color: #1a202c;
/* text-gray-900 */
margin-bottom: 1rem;
/* mb-4 */
}
p {
font-size: 1.125rem;
/* text-lg */
color: #4a5568;
/* text-gray-700 */
margin-bottom: 2rem;
/* mb-8 */
}
.color-palette {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.color-box {
width: 24px;
height: 24px;
border-radius: 0.25rem;
border: 1px solid rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="container">
<h1>分层径向渐变</h1>
<p>这是一个使用 SVG 和 JavaScript 生成的分层径向渐变演示。点击下面的“重新生成”按钮来创建新的随机渐变，或者直接修改代码中的 `colors` 数组来自定义颜色。</p>
<button id="regenerateButton"
class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out">
重新生成
</button>
<svg id="gradientSVG" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
<!-- 渐变将由 JavaScript 动态生成 -->
</svg>
<div class="mt-4 text-gray-600 text-sm">当前使用的颜色：</div>
<div id="currentColorPalette" class="color-palette"></div>
</div>
<script>
const svgElement = document.getElementById('gradientSVG');
const regenerateButton = document.getElementById('regenerateButton');
const currentColorPalette = document.getElementById('currentColorPalette');
// 生成随机十六进制颜色
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// 生成分层径向渐变
function generateLayeredRadialGradient() {
// 清空 SVG 内容
svgElement.innerHTML = '';
currentColorPalette.innerHTML = '';
const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
svgElement.appendChild(defs);
const numLayers = Math.floor(Math.random() * 4) + 3; // 3 to 6 layers
const colors = Array.from({ length: numLayers }, getRandomColor); // Random colors for each layer
// 显示当前使用的颜色
colors.forEach(color => {
const colorBox = document.createElement('div');
colorBox.className = 'color-box';
colorBox.style.backgroundColor = color;
currentColorPalette.appendChild(colorBox);
});
for (let i = 0; i < numLayers; i++) {
const gradientId = `radialGradient${i}`;
const radialGradient = document.createElementNS('http://www.w3.org/2000/svg', 'radialGradient');
radialGradient.setAttribute('id', gradientId);
radialGradient.setAttribute('cx', `${Math.random() * 100}%`);
radialGradient.setAttribute('cy', `${Math.random() * 100}%`);
radialGradient.setAttribute('r', `${30 + Math.random() * 70}%`); // Radius between 30% and 100%
radialGradient.setAttribute('fx', `${Math.random() * 100}%`);
radialGradient.setAttribute('fy', `${Math.random() * 100}%`);
// 随机旋转
const rotation = Math.random() * 360;
radialGradient.setAttribute('gradientTransform', `rotate(${rotation}, ${radialGradient.getAttribute('cx')}, ${radialGradient.getAttribute('cy')})`);
const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
stop1.setAttribute('offset', '0%');
stop1.setAttribute('stop-color', colors[i]);
stop1.setAttribute('stop-opacity', `${0.3 + Math.random() * 0.7}`); // Random opacity from 30% to 100%
radialGradient.appendChild(stop1);
const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
stop2.setAttribute('offset', '100%');
stop2.setAttribute('stop-color', colors[(i + 1) % numLayers]); // Use next color in sequence
stop2.setAttribute('stop-opacity', '0'); // Fade out at the edge
radialGradient.appendChild(stop2);
defs.appendChild(radialGradient);
// 创建一个填充整个 SVG 的矩形，应用渐变
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('x', '0');
rect.setAttribute('y', '0');
rect.setAttribute('width', '100%');
rect.setAttribute('height', '100%');
rect.setAttribute('fill', `url(#${gradientId})`);
svgElement.appendChild(rect);
}
}
// 初始生成渐变
generateLayeredRadialGradient();
// 绑定按钮事件
regenerateButton.addEventListener('click', generateLayeredRadialGradient);
</script>
</body>
</html>
Raw
ver2.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分层径向渐变演示</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: "Inter", sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f4f8;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
.container {
background-color: #ffffff;
border-radius: 1rem; /* rounded-xl */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
padding: 2.5rem; /* p-10 */
max-width: 90%;
width: 800px;
text-align: center;
}
svg {
width: 100%;
height: 400px;
border-radius: 0.75rem; /* rounded-lg */
margin-top: 1.5rem; /* mt-6 */
border: 1px solid #e2e8f0; /* border-gray-200 */
}
h1 {
font-size: 2.25rem; /* text-4xl */
font-weight: 700; /* font-bold */
color: #1a202c; /* text-gray-900 */
margin-bottom: 1rem; /* mb-4 */
}
p {
font-size: 1.125rem; /* text-lg */
color: #4a5568; /* text-gray-700 */
margin-bottom: 2rem; /* mb-8 */
}
.color-palette {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.color-box {
width: 24px;
height: 24px;
border-radius: 0.25rem;
border: 1px solid rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="container">
<h1>分层径向渐变</h1>
<p>这是一个使用 SVG 和 JavaScript 生成的分层径向渐变演示。点击下面的“重新生成”按钮来创建新的随机渐变，或者直接修改代码中的 `colors` 数组来自定义颜色。</p>
<button id="regenerateButton" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out">
重新生成
</button>
<svg id="gradientSVG" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
<!-- 渐变将由 JavaScript 动态生成 -->
</svg>
<div class="mt-4 text-gray-600 text-sm">当前使用的颜色：</div>
<div id="currentColorPalette" class="color-palette"></div>
</div>
<script>
const svgElement = document.getElementById('gradientSVG');
const regenerateButton = document.getElementById('regenerateButton');
const currentColorPalette = document.getElementById('currentColorPalette');
// 生成随机十六进制颜色
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// 生成分层径向渐变
function generateLayeredRadialGradient() {
// 清空 SVG 内容
svgElement.innerHTML = '';
currentColorPalette.innerHTML = '';
const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
svgElement.appendChild(defs);
// 添加高斯模糊滤镜以创建柔和边缘
const filter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
filter.setAttribute('id', 'softEdgeBlur');
// 扩大滤镜区域以避免模糊边缘被裁剪
filter.setAttribute('x', '-20%');
filter.setAttribute('y', '-20%');
filter.setAttribute('width', '140%');
filter.setAttribute('height', '140%');
const feGaussianBlur = document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');
feGaussianBlur.setAttribute('in', 'SourceGraphic');
feGaussianBlur.setAttribute('stdDeviation', '2'); // 模糊强度，可以调整
filter.appendChild(feGaussianBlur);
defs.appendChild(filter);
const numLayers = Math.floor(Math.random() * 4) + 3; // 3 to 6 layers
const colors = Array.from({ length: numLayers }, getRandomColor); // Random colors for each layer
// 显示当前使用的颜色
colors.forEach(color => {
const colorBox = document.createElement('div');
colorBox.className = 'color-box';
colorBox.style.backgroundColor = color;
currentColorPalette.appendChild(colorBox);
});
for (let i = 0; i < numLayers; i++) {
const gradientId = `radialGradient${i}`;
const radialGradient = document.createElementNS('http://www.w3.org/2000/svg', 'radialGradient');
radialGradient.setAttribute('id', gradientId);
radialGradient.setAttribute('cx', `${Math.random() * 100}%`);
radialGradient.setAttribute('cy', `${Math.random() * 100}%`);
radialGradient.setAttribute('r', `${30 + Math.random() * 70}%`); // Radius between 30% and 100%
radialGradient.setAttribute('fx', `${Math.random() * 100}%`);
radialGradient.setAttribute('fy', `${Math.random() * 100}%`);
// 随机旋转
const rotation = Math.random() * 360;
radialGradient.setAttribute('gradientTransform', `rotate(${rotation}, ${radialGradient.getAttribute('cx')}, ${radialGradient.getAttribute('cy')})`);
const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
stop1.setAttribute('offset', '0%');
stop1.setAttribute('stop-color', colors[i]);
stop1.setAttribute('stop-opacity', `${0.3 + Math.random() * 0.7}`); // Random opacity from 30% to 100%
radialGradient.appendChild(stop1);
const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
stop2.setAttribute('offset', '100%');
stop2.setAttribute('stop-color', colors[(i + 1) % numLayers]); // Use next color in sequence
stop2.setAttribute('stop-opacity', '0'); // Fade out at the edge
radialGradient.appendChild(stop2);
defs.appendChild(radialGradient);
// 创建一个填充整个 SVG 的矩形，应用渐变和模糊滤镜
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('x', '0');
rect.setAttribute('y', '0');
rect.setAttribute('width', '100%');
rect.setAttribute('height', '100%');
rect.setAttribute('fill', `url(#${gradientId})`);
rect.setAttribute('filter', 'url(#softEdgeBlur)'); // 应用模糊滤镜
svgElement.appendChild(rect);
}
}
// 初始生成渐变
generateLayeredRadialGradient();
// 绑定按钮事件
regenerateButton.addEventListener('click', generateLayeredRadialGradient);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment