hideya · August 7, 2025 00:49
diff --git a/simple-SVG-filter-examples.html b/simple-SVG-filter-examples.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple SVG Filter Examples</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            margin: 0;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
        
        .example {
            margin: 30px 0;
            padding: 20px;
            border: 2px solid #eee;
            border-radius: 10px;
            background: #fafafa;
        }
        
        .example h3 {
            margin-top: 0;
            color: #444;
        }
        
        .demo-item {
            display: inline-block;
            margin: 10px;
            padding: 15px 25px;
            background: #4CAF50;
            color: white;
            border-radius: 8px;
            font-size: 18px;
            font-weight: bold;
        }
        
        /* Apply the SVG filters */
        .blur-effect { filter: url(#blur); }
        .shadow-effect { filter: url(#shadow); }
        .glow-effect { filter: url(#glow); }
        .emboss-effect { filter: url(#emboss); }
        .colorful-effect { filter: url(#colorful); }
        
        .original {
            background: #2196F3;
        }
        
        code {
            background: #f4f4f4;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 14px;
        }
    </style>
 </head>
 <body>
    <div class="container">
        <h1>Simple SVG Filter Examples</h1>
        
        <!-- SVG with all our filters defined -->
        <svg width="0" height="0" style="position: absolute;">
            <defs>
                <!-- 1. Simple Blur Filter -->
                <filter id="blur">
                    <feGaussianBlur stdDeviation="2"/>
                </filter>
                
                <!-- 2. Drop Shadow Filter -->
                <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
                    <feDropShadow dx="3" dy="3" stdDeviation="2" flood-color="rgba(0,0,0,0.5)"/>
                </filter>
                
                <!-- 3. Glow Effect -->
                <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
                    <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
                    <feMerge> 
                        <feMergeNode in="coloredBlur"/>
                        <feMergeNode in="SourceGraphic"/>
                    </feMerge>
                </filter>
                
                <!-- 4. Emboss Effect -->
                <filter id="emboss">
                    <feConvolveMatrix 
                        kernelMatrix="
                            -2 -1  0
                            -1  1  1
                             0  1  2"
                        bias="0.5"/>
                </filter>
                
                <!-- 5. Color Transformation -->
                <filter id="colorful">
                    <feColorMatrix type="matrix" 
                        values="0 1 0 0 0
                                1 0 1 0 0
                                0 0 1 0 0
                                0 0 0 1 0"/>
                </filter>
            </defs>
        </svg>
        
        <div class="example">
            <h3>1. Basic Blur - <code>feGaussianBlur</code></h3>
            <p>The simplest filter: blurs the element.</p>
            <div class="demo-item original">Original</div>
            <div class="demo-item blur-effect">Blurred</div>
        </div>
        
        <div class="example">
            <h3>2. Drop Shadow - <code>feDropShadow</code></h3>
            <p>Creates a shadow behind the element.</p>
            <div class="demo-item original">Original</div>
            <div class="demo-item shadow-effect">With Shadow</div>
        </div>
        
        <div class="example">
            <h3>3. Glow Effect - <code>feGaussianBlur + feMerge</code></h3>
            <p>Combines a blurred copy with the original for a glow.</p>
            <div class="demo-item original">Original</div>
            <div class="demo-item glow-effect">Glowing</div>
        </div>
        
        <div class="example">
            <h3>4. Emboss Effect - <code>feConvolveMatrix</code></h3>
            <p>Uses a convolution matrix to create a 3D embossed look.</p>
            <div class="demo-item original">Original</div>
            <div class="demo-item emboss-effect">Embossed</div>
        </div>
        
        <div class="example">
            <h3>5. Color Swap - <code>feColorMatrix</code></h3>
            <p>Transforms colors using a mathematical matrix.</p>
            <div class="demo-item original">Original</div>
            <div class="demo-item colorful-effect">Color Swapped</div>
        </div>
        
        <div class="example">
            <h3>How It Works:</h3>
            <p><strong>1. Define filters in SVG:</strong> Put filter definitions inside <code>&lt;svg&gt;&lt;defs&gt;</code></p>
            <p><strong>2. Apply with CSS:</strong> Use <code>filter: url(#filterName)</code> to apply to any HTML element</p>
            <p><strong>3. Chain effects:</strong> Multiple filter primitives in one filter create complex effects</p>
            <p><strong>4. Hardware accelerated:</strong> These run on the GPU for smooth performance!</p>
        </div>
    </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Simple SVG Filter Examples</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	padding: 20px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	min-height: 100vh;
	margin: 0;
	}

	.container {
	max-width: 800px;
	margin: 0 auto;
	background: white;
	padding: 30px;
	border-radius: 15px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.2);
	}

	h1 {
	text-align: center;
	color: #333;
	margin-bottom: 30px;
	}

	.example {
	margin: 30px 0;
	padding: 20px;
	border: 2px solid #eee;
	border-radius: 10px;
	background: #fafafa;
	}

	.example h3 {
	margin-top: 0;
	color: #444;
	}

	.demo-item {
	display: inline-block;
	margin: 10px;
	padding: 15px 25px;
	background: #4CAF50;
	color: white;
	border-radius: 8px;
	font-size: 18px;
	font-weight: bold;
	}

	/* Apply the SVG filters */
	.blur-effect { filter: url(#blur); }
	.shadow-effect { filter: url(#shadow); }
	.glow-effect { filter: url(#glow); }
	.emboss-effect { filter: url(#emboss); }
	.colorful-effect { filter: url(#colorful); }

	.original {
	background: #2196F3;
	}

	code {
	background: #f4f4f4;
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 14px;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1>Simple SVG Filter Examples</h1>

	<!-- SVG with all our filters defined -->
	<svg width="0" height="0" style="position: absolute;">
	<defs>
	<!-- 1. Simple Blur Filter -->
	<filter id="blur">
	<feGaussianBlur stdDeviation="2"/>
	</filter>

	<!-- 2. Drop Shadow Filter -->
	<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
	<feDropShadow dx="3" dy="3" stdDeviation="2" flood-color="rgba(0,0,0,0.5)"/>
	</filter>

	<!-- 3. Glow Effect -->
	<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
	<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
	<feMerge>
	<feMergeNode in="coloredBlur"/>
	<feMergeNode in="SourceGraphic"/>
	</feMerge>
	</filter>

	<!-- 4. Emboss Effect -->
	<filter id="emboss">
	<feConvolveMatrix
	kernelMatrix="
	-2 -1 0
	-1 1 1
	0 1 2"
	bias="0.5"/>
	</filter>

	<!-- 5. Color Transformation -->
	<filter id="colorful">
	<feColorMatrix type="matrix"
	values="0 1 0 0 0
	1 0 1 0 0
	0 0 1 0 0
	0 0 0 1 0"/>
	</filter>
	</defs>
	</svg>

	<div class="example">
	<h3>1. Basic Blur - <code>feGaussianBlur</code></h3>
	<p>The simplest filter: blurs the element.</p>
	<div class="demo-item original">Original</div>
	<div class="demo-item blur-effect">Blurred</div>
	</div>

	<div class="example">
	<h3>2. Drop Shadow - <code>feDropShadow</code></h3>
	<p>Creates a shadow behind the element.</p>
	<div class="demo-item original">Original</div>
	<div class="demo-item shadow-effect">With Shadow</div>
	</div>

	<div class="example">
	<h3>3. Glow Effect - <code>feGaussianBlur + feMerge</code></h3>
	<p>Combines a blurred copy with the original for a glow.</p>
	<div class="demo-item original">Original</div>
	<div class="demo-item glow-effect">Glowing</div>
	</div>

	<div class="example">
	<h3>4. Emboss Effect - <code>feConvolveMatrix</code></h3>
	<p>Uses a convolution matrix to create a 3D embossed look.</p>
	<div class="demo-item original">Original</div>
	<div class="demo-item emboss-effect">Embossed</div>
	</div>

	<div class="example">
	<h3>5. Color Swap - <code>feColorMatrix</code></h3>
	<p>Transforms colors using a mathematical matrix.</p>
	<div class="demo-item original">Original</div>
	<div class="demo-item colorful-effect">Color Swapped</div>
	</div>

	<div class="example">
	<h3>How It Works:</h3>
	<p><strong>1. Define filters in SVG:</strong> Put filter definitions inside <code><svg><defs></code></p>
	<p><strong>2. Apply with CSS:</strong> Use <code>filter: url(#filterName)</code> to apply to any HTML element</p>
	<p><strong>3. Chain effects:</strong> Multiple filter primitives in one filter create complex effects</p>
	<p><strong>4. Hardware accelerated:</strong> These run on the GPU for smooth performance!</p>
	</div>
	</div>
	</body>
	</html>