w/web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

i forgot

Browse source
This commit is contained in:
laura 2025-11-01 23:46:32 -03:00
parent 30f2b4714d
commit 0c9f7a7822
Signed by: w
GPG key ID: BCD2117C99E69817
21 changed files with 1868 additions and 1839 deletions
Download patch file Download diff file Expand all files Collapse all files

98
components/Tinted.tsx
View file

@ -4,57 +4,57 @@
*/
interface TintedImageProps {
src: string;
colour: string;
[key: string]: any;
src: string;
colour: string;
[key: string]: any;
}
export default function TintedImage({
colour,
src,
...props
colour,
src,
...props
}: TintedImageProps) {
return (
<svg
width="100%"
height="100%"
{...props}
>
<defs>
<filter
id="tint"
x="0%"
y="0%"
width="100%"
height="100%"
colorInterpolationFilters="sRGB"
>
<feColorMatrix
type="saturate"
values="0"
result="grayscale"
/>
<feFlood flood-color={colour} result="tint" />
<feComposite
in="tint"
in2="grayscale"
operator="arithmetic"
k1="1"
k2="0"
k3="0"
k4="0"
/>
</filter>
</defs>
<image
x="0"
y="0"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid meet"
filter={`url(#tint)`}
href={src}
/>
</svg>
);
return (
<svg
width="100%"
height="100%"
{...props}
>
<defs>
<filter
id="tint"
x="0%"
y="0%"
width="100%"
height="100%"
colorInterpolationFilters="sRGB"
>
<feColorMatrix
type="saturate"
values="0"
result="grayscale"
/>
<feFlood flood-color={colour} result="tint" />
<feComposite
in="tint"
in2="grayscale"
operator="arithmetic"
k1="1"
k2="0"
k3="0"
k4="0"
/>
</filter>
</defs>
<image
x="0"
y="0"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid meet"
filter={`url(#tint)`}
href={src}
/>
</svg>
);
}