Svg effect practice

Developer
Esambino Wei Cheng Hsieh
Size
2,814 Kb
Views
6,072
  1. Svg effect practice Previews
  2. Svg effect practice HTML Codes
  3. Svg effect practice CSS Codes

How do I make an svg effect practice?

What is a svg effect practice? How do you make a svg effect practice? This script and codes were developed by Esambino Wei Cheng Hsieh on 07 January 2023, Saturday.

Svg effect practice Previews
IQ Test

Svg effect practice - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>svg effect practice</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="bg"> <div> <span>Normal</span> <img class="normal" src="https://1.bp.blogspot.com/-NzYt17ULOJo/UjhW9bAElZI/AAAAAAAAA_M/Qax8LQbsauw/s1600/toro-y-moi_causers.png"/> </div> <div> <span>Luminance Mask</span> <img class="luminance-mask" src="https://1.bp.blogspot.com/-NzYt17ULOJo/UjhW9bAElZI/AAAAAAAAA_M/Qax8LQbsauw/s1600/toro-y-moi_causers.png"/> </div> <div> <span>Gradient Map</span> <img class="gradient-map" src="https://1.bp.blogspot.com/-NzYt17ULOJo/UjhW9bAElZI/AAAAAAAAA_M/Qax8LQbsauw/s1600/toro-y-moi_causers.png"/> </div> <!--<div> <span>Gradient Map</span> <img class="gradient-map" src="http://upload.wikimedia.org/wikipedia/commons/f/f3/Bubbles_in_the_park%2C_Barcelona_%284983834120%29.jpg"/> </div>--> <div> <span>X-Ray</span> <img class="xray" src="https://1.bp.blogspot.com/-NzYt17ULOJo/UjhW9bAElZI/AAAAAAAAA_M/Qax8LQbsauw/s1600/toro-y-moi_causers.png"/> </div> <div> <span>Edge Detection</span> <img class="edge-detect" src=""/> </div> <div> <span>Gaussian Blur</span> <img class="gaussian-blur" src=""/> </div> <div> <span>Sharpen</span> <img class="sharpen" src=""/> </div> <div> <span>Emboss</span> <img class="emboss" src=""/> </div> <div> <span>Posterize</span> <img class="posterize" src=""/> </div> <div> <span>Grayscale</span> <img class="grayscale" src=""/> </div> <div> <span>Washout</span> <img class="washout" src=""/> </div>
</div>
<svg width="0%" height="0%"> <defs> <filter id="LuminanceMaskFilter"> <feColorMatrix type="luminanceToAlpha"/> </filter> <filter id="GradientMapFilter"> <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0"> </feColorMatrix> <feComponentTransfer > <feFuncR type="table" tableValues="0 0 1 0"/> <feFuncG type="table" tableValues="0.2 0 0.8 1"/> <feFuncB type="table" tableValues="0.1 0.1 0.4 1"/> </feComponentTransfer> </filter> <filter id="XRayFilter"> <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /> <feComponentTransfer > <feFuncR type="table" tableValues="1 0"/> <feFuncG type="table" tableValues="1 0"/> <feFuncB type="table" tableValues="1 0"/> </feComponentTransfer> </filter> <filter id="EmbossFilter" > <feConvolveMatrix order="5 5" preserveAlpha="true" kernelMatrix="-1 0 0 0 0 0 -2 0 0 0 0 0 3 0 0 0 0 0 0 0 0 0 0 0 0"/> </filter> <filter id="SharpenFilter"> <feConvolveMatrix order="3 3" preserveAlpha="true" kernelMatrix="0 -1 0 -1 5 -1 0 -1 0"/> </filter> <filter id="EdgeDetectFilter"> <feConvolveMatrix order="3 3" preserveAlpha="true" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1"/> </filter> <filter id="GaussianBlurFilter"> <feGaussianBlur stdDeviation="10 1"/> </filter> <filter id="PosterizeFilter"> <feComponentTransfer> <feFuncR type="discrete" tableValues="0 0.25 0.5 0.75 1"/> <feFuncG type="discrete" tableValues="0 0.25 0.5 0.75 1"/> <feFuncB type="discrete" tableValues="0 0.25 0.5 0.75 1"/> </feComponentTransfer> </filter> <filter id="GrayScaleFilter"> <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /> </filter> <filter id="WashoutFilter" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feFlood flood-color="#ffffff" flood-opacity="0.5" result="flood"/> <feBlend mode="screen" in2="flood" in="SourceGraphic"/> </filter> </defs>
</svg>
</body>
</html>

Svg effect practice - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700');
img { width: 100%; margin-top: 5px;
}
div { width: 40%; padding: 10px 40px; float: left;
}
span { position: relative; margin: 0 auto; text-align: center; font-weight: light; font-size: 1.5em; color: #fff; font-family: 'Open Sans Condensed', sans-serif;
}
.emboss { -webkit-filter: url(#EmbossFilter); filter: url(#EdgeDetectFilter);
}
.edge-detect { -webkit-filter: url(#EdgeDetectFilter); filter: url(#EdgeDetectFilter);
}
.luminance-mask { -webkit-filter: url(#LuminanceMaskFilter); filter: url(#LuminanceMaskFilter);
}
.gaussian-blur { -webkit-filter: url(#GaussianBlurFilter); filter: url(#GaussianBlurFilter);
}
.gradient-map { -webkit-filter: url(#GradientMapFilter); filter: url(#GradientMapFilter);
}
.sharpen { -webkit-filter: url(#SharpenFilter); filter: url(#SharpenFilter);
}
.posterize { -webkit-filter: url(#PosterizeFilter); filter: url(#PosterizeFilter);
}
.grayscale { -webkit-filter: url(#GrayScaleFilter); filter: url(#GrayScaleFilter);
}
.xray { -webkit-filter: url(#XRayFilter); filter: url(#XRayFilter);
}
.washout { -webkit-filter: url(#WashoutFilter); filter: url(#WashoutFilter);
}
.bg { position: absolute; left: 0; top: 0; width: 100%; background: #444; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=1 );
}
Svg effect practice - Script Codes
Svg effect practice - Script Codes
Home Page Home
Developer Esambino Wei Cheng Hsieh
Username Esambino
Uploaded January 07, 2023
Rating 3
Size 2,814 Kb
Views 6,072
Do you need developer help for Svg effect practice?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Esambino Wei Cheng Hsieh (Esambino) Script Codes
Name
CSS3 Navigation practice
Gdf
Slap
Tribute to Rorschach
Css3 slider
Apple iPhone 5s style scrolling
My three.js practice
Blank
Cafe Lakulaku
Three test
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!