EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated SVG filter (+auto-formatting)

Browse source
This commit is contained in:
lilith 2025-02-10 00:24:21 +01:00
commit e4223ce02c
Signed by: lilith
SSH key fingerprint: SHA256:WMHGS60rozMrHkA/VT+Ole85sPCLZ190yemdzY68WJo
1 changed files with 51 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

102
styleguide/generator/index.html
View file

@ -1,78 +1,78 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" <meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title> <title>Document</title>
</head> </head>
<body style="height: 100vh;"> <body style="height: 100vh;">
<div style="display: flex; flex-direction: column; gap: 1em; align-items: center"> <div style="display: flex; flex-direction: column; gap: 1em; align-items: center">
<div> <div>
<input id="file_input" type="file" name="image" accept="image/*"> <input id="file_input" type="file" name="image" accept="image/*">
</div> </div>
<img id="source_img" src="" <img id="source_img" src=""
style="width: 400px; height: 300px; border: solid 4px darkblue; background-color: darkblue; object-fit: contain;"/> style="width: 400px; height: 300px; border: solid 4px darkblue; background-color: darkblue; object-fit: contain;" />
<img id="result_img" src="" <img id="result_img" src=""
style="width: 400px; height: 300px; border: solid 4px darkgreen; background-color: darkgreen; object-fit: contain;"/> style="width: 400px; height: 300px; border: solid 4px darkgreen; background-color: darkgreen; object-fit: contain;" />
<div style="display: none;"> <div style="display: none;">
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg"> <svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<filter id="filter0" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox" <filter id="filter0" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
primitiveUnits="userSpaceOnUse"> primitiveUnits="objectBoundingBox">
<feTurbulence type="turbulence" baseFrequency="0 0.1" numOctaves="1" result="noise"/> <feColorMatrix in="SourceGraphic" type="saturate" values="0" result="bw" />
<feDisplacementMap in="SourceGraphic" in2="noise" result="distorted" scale="20"/> <feColorMatrix in="bw" type="luminanceToAlpha" result="ltoa" />
<feColorMatrix in="distorted" type="saturate" values="0" result="bw"/> <feComponentTransfer in="ltoa" result="ltoa_inverse">
<feColorMatrix in="bw" type="luminanceToAlpha" result="ltoa"/> <feFuncA type="table" tableValues="0 1" />
<feComponentTransfer in="ltoa" result="ltoa_inverse"> </feComponentTransfer>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feConvolveMatrix
in="ltoa_inverse"
result="edges"
kernelMatrix="-2 0 -2
0 0 0
2 0 2"/>
<feComponentTransfer in="edges" result="pink"> <feConvolveMatrix in="ltoa_inverse" result="pink_edges" kernelMatrix="-4 0 4 0 0 0 -4 0 4" />
<feFuncR type="table" tableValues="1 0"/> <feComponentTransfer in="pink_edges" result="pink">
<feFuncG type="table" tableValues="0 1"/> <feFuncR type="table" tableValues="0.7765 0" />
<feFuncB type="table" tableValues="0.1 0"/> <feFuncG type="table" tableValues="0.1451 0" />
</feComponentTransfer> <feFuncB type="table" tableValues="0.4902 0" />
<feOffset in="pink" result="pink_shift" dx="-4" dy="0"/> </feComponentTransfer>
<feOffset in="pink" result="pink_shift" dx="-0.002" />
<feComponentTransfer in="edges" result="cyan"> <feConvolveMatrix in="ltoa_inverse" result="cyan_edges" kernelMatrix="4 0 -4 0 0 0 4 0 -4" />
<feFuncR type="table" tableValues="0.1 0"/> <feComponentTransfer in="cyan_edges" result="cyan">
<feFuncG type="table" tableValues="1 0"/> <feFuncR type="table" tableValues="0.2941 0" />
<feFuncB type="table" tableValues="1 0"/> <feFuncG type="table" tableValues="0.6784 0" />
</feComponentTransfer> <feFuncB type="table" tableValues="0.8471 0" />
<feOffset in="cyan" result="cyan_shift" dx="4" dy="0"/> </feComponentTransfer>
<feOffset in="cyan" result="cyan_shift" dx="0.002" />
<feMerge result="pink_cyan_shift"> <feMerge result="pink_cyan_shift">
<feMergeNode in="distorted"/> <feMergeNode in="SourceGraphic" />
<feMergeNode in="pink_shift"/> <feMergeNode in="pink_shift" />
<feMergeNode in="cyan_shift"/> <feMergeNode in="cyan_shift" />
</feMerge> </feMerge>
</filter>
<rect fill="#000000" width="100%" height="100%"/> <feTurbulence type="fractalNoise" baseFrequency="0 0.2" numOctaves="1" result="noise" />
<g filter="url(#filter0)"> <feDisplacementMap in="pink_cyan_shift" in2="noise" result="distorted_raw" scale="0.02" />
<image href="" width="100%" height="100%"/> <feOffset in="distorted_raw" result="distorted" />
</g> </filter>
</svg>
<g filter="url(#filter0)">
<image href="" width="100%" height="100%" />
</g>
</svg>
</div> </div>
<button id="download" disabled> <button id="download" disabled>
Download Result Download Result
</button> </button>
</div> </div>
<script src="generator.js" type="text/javascript"></script> <script src="generator.js" type="text/javascript"></script>
</body> </body>
</html> </html>