Web developer and autodidact with an interest in creative coding.
Published unlisted
Edited
Mar 16, 2021
html`
<div style="background:#a5c3fb">
<img src="https://i.imgur.com/zTrWng3.png" style="filter:url(#filter);max-width:100%">
</div>
<svg>
<filter id="filter">
<feColorMatrix
in="SourceGraphic"
result="mono"
type="matrix"
values="
0.33333 0.33333 0.33333 0 0
0.33333 0.33333 0.33333 0 0
0.33333 0.33333 0.33333 0 0
0 0 0 1 0
"
/>
<feColorMatrix
type="luminanceToAlpha"
result="mask"
/>
<feComponentTransfer in="mask" result="mask">
<feFuncA
type="linear"
slope="${slope}"
intercept="${intercept}"
></feFuncA>
</feComponentTransfer>
<feComponentTransfer
in="mono"
result="colorized"
>
<feFuncR type="table" tableValues="0.00000 0.40392 0.50588 0.74902 0.81569 1.00000"/>
<feFuncG type="table" tableValues="0.25098 0.56863 0.69804 0.87451 0.72157 1.00000"/>
<feFuncB type="table" tableValues="0.00000 0.40392 0.47451 0.65882 0.66667 1.00000"/>
</feComponentTransfer>
<feComponentTransfer
in="mono"
result="gamma"
>
<feFuncR type="gamma" amplitude="${amp}" exponent="${exp}" offset="${off}"></feFuncR>
<feFuncG type="gamma" amplitude="${amp}" exponent="${exp}" offset="${off}"></feFuncG>
<feFuncB type="gamma" amplitude="${amp}" exponent="${exp}" offset="${off}"></feFuncB>
</feComponentTransfer>
<feConvolveMatrix
in="gamma"
result="shaded"
divisor="${div}"
bias="${bias}"
preserveAlpha="true"
order="3 3"
kernelMatrix="${light(a, d).join(' ')}"
/>
<feBlend in="colorized" in2="shaded" mode="multiply" />
<feComposite in2="mask" operator="in" result="masked" />
<feMerge>
<feMergeNode in="${out}">
</feMerge>
</filter>
</svg>
`
relief = html`
<style>
input[type="number"] {min-width: none;width:auto;font-family:monospace}
</style>
<pre>
<feConvolveMatrix
in="gamma"
result="shaded"
divisor="<input type=number min=0 max=5 step=.01 value=5>"
bias="<input type=number min=0 max=1 step=.01 value=1>"
preserveAlpha="true"
order="3 3"
kernelMatrix="
${formatMat(light(a, d), 3)}
"
/>
`
light(a)
function formatMat(arr, cols, decimals=5) {
const m = arr.map(n => (n<0?'':' ') + n.toFixed(decimals));
const w = Math.max(arr.map(n => n.toFixed(0).length)
const l = [];
while(m.length) l.push(m.splice(0, cols).join(' '));
return l.join('\n');
}
light = (a, d=1) => {
const PI = Math.PI, s = o => Math.sin((a-o)/180*PI)*d;
return [
s(-135), s(-90), s(-45),
s( 180), -1, s( 0),
s( 135), s( 90), s( 45),
];
}
import {feGamma} from '@mootari/svg-filter-scales'
grey = .33333
import {slider, radio} from '@jashkenas/inputs'
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
