Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

create variable SVG color hook for background images #1169

Merged
merged 2 commits into from
Oct 19, 2023
Merged

create variable SVG color hook for background images #1169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d97c333
create variable SVG color hook for background images
wesbos Oct 13, 2023
7769d07
add client side computed variable component
wesbos Oct 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/assets/waves.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 18 additions & 1 deletion src/routes/(site)/shows/[show_number]/[slug]/[[tab]]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@
import Tabs from '$lib/Tabs.svelte';
import Meta from '$lib/meta/Meta.svelte';
import Svg from '$lib/Svg.svelte';
import { theme } from '$state/theme';
import wait from 'waait';
export let data;
$: ({ show, meta } = data);

Expand All @@ -22,6 +24,20 @@
player.update_time(href, show);
}
}

function variableColorSvg(node: HTMLElement) {
theme.subscribe(async () => {
await wait(1);
const style = getComputedStyle(node);
const bg = style.getPropertyValue('background-image');
const primary = style.getPropertyValue('--primary');
const newBg = bg.replaceAll(
/fill\s*=\s*['"].*?['"]/gi,
`fill='${encodeURIComponent(primary)}'`
);
node.style.backgroundImage = newBg;
});
}
</script>

<Meta {meta} />
Expand Down Expand Up @@ -76,7 +92,7 @@
<Icon name="edit" /></a
>
</div>
<div class="waves grit"></div>
<div use:variableColorSvg class="waves grit"></div>
</div>
</div>

Expand Down Expand Up @@ -177,6 +193,7 @@
position: absolute;
z-index: 0;
background: url('$assets/waves.svg');
background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='1440px' fill='%23FABF46' height='51px' viewBox='0 0 1440 51' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Ewaves%3C/title%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='%23fill' fill-rule='evenodd'%3E%3Cg id='waves' fill-rule='nonzero'%3E%3Cpath d='M0,39.906568 L6.2,39.906568 C12.3,39.906568 25,39.906568 37,34.3598519 C49.2,28.8131359 62,17.7197039 74,12.1729879 C86.2,6.62627186 98,6.62627186 111,4.77158869 C123.1,2.98623947 135,-0.82712779 148,0.160881 C160,1.07955584 172,6.62627186 185,6.62627186 C196.9,6.62627186 209,1.07955584 222,6.62627186 C233.8,12.1729879 246,28.8131359 258,28.8131359 C270.8,28.8131359 283,12.1729879 295,5.70759702 C307.7,-0.82712779 320,2.98623947 332,8.48095503 C344.6,14.0796715 357,21.3597363 369,25.1211031 C381.5,28.8131359 394,28.8131359 406,25.1211031 C418.5,21.3597363 431,14.0796715 443,13.0916627 C455.4,12.1729879 468,17.7197039 480,23.2664199 C492.3,28.8131359 505,34.3598519 517,38.0518848 C529.2,41.8132516 542,43.5466004 554,37.13321 C566.2,30.7198196 578,15.8130203 591,11.254313 C603.1,6.62627186 615,12.1729879 628,18.6383787 C640,25.1731035 652,32.4531683 665,34.3598519 C676.9,36.2665356 689,32.4531683 702,32.5051688 C713.8,32.4531683 726,36.2665356 738,34.3598519 C750.8,32.4531683 763,25.1731035 775,19.5743871 C787.7,14.0796715 800,10.2663042 812,8.48095503 C824.6,6.62627186 837,6.62627186 849,11.254313 C861.5,15.8130203 874,25.1731035 886,29.7318108 C898.5,34.3598519 911,34.3598519 923,33.4411771 C935.4,32.4531683 948,30.7198196 960,26.9584528 C972.3,23.2664199 985,17.7197039 997,18.6383787 C1009.2,19.6263875 1022,26.9064523 1034,33.4411771 C1046.2,39.906568 1058,45.453284 1071,41.7612511 C1083.1,37.9998843 1095,25.1731035 1108,22.3477451 C1120,19.6263875 1132,26.9064523 1145,27.8944611 C1156.9,28.8131359 1169,23.2664199 1182,24.1850948 C1193.8,25.1731035 1206,32.4531683 1218,38.0518848 C1230.8,43.5466004 1243,47.3599676 1255,44.5346091 C1267.7,41.8132516 1280,32.4531683 1292,26.9584528 C1304.6,21.3597363 1317,19.6263875 1329,14.9463459 C1341.5,10.2663042 1354,2.98623947 1366,1.99823068 C1378.5,1.07955584 1391,6.62627186 1403,14.027671 C1415.4,21.3597363 1428,30.7198196 1434,35.2785268 L1440,39.906568 L1440,51 L1433.8,51 C1427.7,51 1415,51 1403,51 C1390.8,51 1378,51 1366,51 C1353.8,51 1342,51 1329,51 C1316.9,51 1305,51 1292,51 C1280,51 1268,51 1255,51 C1243.1,51 1231,51 1218,51 C1206.2,51 1194,51 1182,51 C1169.2,51 1157,51 1145,51 C1132.3,51 1120,51 1108,51 C1095.4,51 1083,51 1071,51 C1058.5,51 1046,51 1034,51 C1021.5,51 1009,51 997,51 C984.6,51 972,51 960,51 C947.7,51 935,51 923,51 C910.8,51 898,51 886,51 C873.8,51 862,51 849,51 C836.9,51 825,51 812,51 C800,51 788,51 775,51 C763.1,51 751,51 738,51 C726.2,51 714,51 702,51 C689.2,51 677,51 665,51 C652.3,51 640,51 628,51 C615.4,51 603,51 591,51 C578.5,51 566,51 554,51 C541.5,51 529,51 517,51 C504.6,51 492,51 480,51 C467.7,51 455,51 443,51 C430.8,51 418,51 406,51 C393.8,51 382,51 369,51 C356.9,51 345,51 332,51 C320,51 308,51 295,51 C283.1,51 271,51 258,51 C246.2,51 234,51 222,51 C209.2,51 197,51 185,51 C172.3,51 160,51 148,51 C135.4,51 123,51 111,51 C98.5,51 86,51 74,51 C61.5,51 49,51 37,51 C24.6,51 12,51 6,51 L0,51 L0,39.906568 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
height: 20px;
width: 100%;
left: 0;
Expand Down
48 changes: 27 additions & 21 deletions src/routes/(site)/svg/grit.svg/+server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,42 +4,48 @@ let h = 1000;
let count = 100;

function rando(under: number, lower?: number) {
const minimum = lower ?? 0;
return Math.random() * (under - minimum) + minimum;
const minimum = lower ?? 0;
return Math.random() * (under - minimum) + minimum;
}

const grits = [
'M1,2 C1.6,2 2,1.6 2,1 C2,0.4 1.6,0 1,0 C0.4,0 0,0.4 0,1 C0,1.6 0.4,2 1,2 Z',
'M2.857,4 C4.381,4 6.286,3 6.857,2 L8,0 L5.143,0 C3.619,0 1.714,0.8 1.143,2 L0,4 L2.857,4 Z',
'M3.238,4 C3.619,4 4,3 4,2 L4,0 L1.905,0 L0,0 L1.143,2 C1.714,3 2.667,4 3.238,4 Z',
'M2.391,3.48892289 C3.913,2.62492289 5,1.54592289 5,0.89792289 C5,-0.82807711 3.043,0.03492289 1.522,2.62492289 L0,4.99992289 L2.391,3.48892289 Z',
'M0,5 L1.615,3.846 L3,2.5 L1.615,1.154 L0,0 L0,2.5 Z',
'M2.5,3 L3.846,1.615 L5,0 L2.5,0 L0,0 L1.154,1.615 Z',
'M4,6 L2.8,3.077 C1.4,-0.429 0,-1.014 0,1.713 C0,2.882 0.8,4.246 2,4.831 L4,6 Z',
'M3,9 L5,7.085 L7,5.17 L6,2.489 L5,0 L4.8,3.447 L4.6,6.894 L2.2,5.553 L0,4.213 L1.6,6.511 Z',
'M3.238,4 C3.619,4 4,3 4,2 L4,0 L1.905,0 L0,0 L1.143,2 C1.714,3 2.667,4 3.238,4 Z',
'M10,5.949 L10,3.077 L10,0 L8.2,0 C7.4,0 6.6,1.026 6.6,2.256 L6.6,4.513 L3.4,3.282 L0,2.051 L2.4,4.923 L4.8,8 L7.4,6.974 L10,5.949 Z'
]
'M1,2 C1.6,2 2,1.6 2,1 C2,0.4 1.6,0 1,0 C0.4,0 0,0.4 0,1 C0,1.6 0.4,2 1,2 Z',
'M2.857,4 C4.381,4 6.286,3 6.857,2 L8,0 L5.143,0 C3.619,0 1.714,0.8 1.143,2 L0,4 L2.857,4 Z',
'M3.238,4 C3.619,4 4,3 4,2 L4,0 L1.905,0 L0,0 L1.143,2 C1.714,3 2.667,4 3.238,4 Z',
'M2.391,3.48892289 C3.913,2.62492289 5,1.54592289 5,0.89792289 C5,-0.82807711 3.043,0.03492289 1.522,2.62492289 L0,4.99992289 L2.391,3.48892289 Z',
'M0,5 L1.615,3.846 L3,2.5 L1.615,1.154 L0,0 L0,2.5 Z',
'M2.5,3 L3.846,1.615 L5,0 L2.5,0 L0,0 L1.154,1.615 Z',
'M4,6 L2.8,3.077 C1.4,-0.429 0,-1.014 0,1.713 C0,2.882 0.8,4.246 2,4.831 L4,6 Z',
'M3,9 L5,7.085 L7,5.17 L6,2.489 L5,0 L4.8,3.447 L4.6,6.894 L2.2,5.553 L0,4.213 L1.6,6.511 Z',
'M3.238,4 C3.619,4 4,3 4,2 L4,0 L1.905,0 L0,0 L1.143,2 C1.714,3 2.667,4 3.238,4 Z',
'M10,5.949 L10,3.077 L10,0 L8.2,0 C7.4,0 6.6,1.026 6.6,2.256 L6.6,4.513 L3.4,3.282 L0,2.051 L2.4,4.923 L4.8,8 L7.4,6.974 L10,5.949 Z'
];

function render() {
return `<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${w} ${h}">
<g id="Grit-Parts">
${Array.from({ length: count }).map(grit => {
const x = rando(w);
const y = rando(h);
return `<path transform="scale(${rando(2, 0.5)} ${rando(2, 0.5)}) rotate(${rando(360)} ${x} ${y}) translate(${x},${y})" d="${grits.at(rando(grits.length))}" fill="${isDark ? `rgba(255,255,255,${rando(1)})` : `rgba(0,0,0,${rando(1)})`}"></path>`
}).join('')}
${Array.from({ length: count })
.map(() => {
const x = rando(w);
const y = rando(h);
return `<path transform="scale(${rando(2, 0.5)} ${rando(2, 0.5)}) rotate(${rando(
360
)} ${x} ${y}) translate(${x},${y})" d="${grits.at(rando(grits.length))}" fill="${
isDark ? `rgba(255,255,255,${rando(1)})` : `rgba(0,0,0,${rando(1)})`
}"></path>`;
})
.join('')}
</g>
</svg>
`;
}

export function GET({ request, url }) {
isDark = !!url.searchParams.has('dark');
w = parseInt(url.searchParams.get('w') || '1000');
h = parseInt(url.searchParams.get('h') || '1000');
count = parseInt(url.searchParams.get('count') || '100');
w = parseInt(url.searchParams.get('w') || '1000');
h = parseInt(url.searchParams.get('h') || '1000');
count = parseInt(url.searchParams.get('count') || '100');

const svg = render();
return new Response(svg, {
Expand Down
3 changes: 3 additions & 0 deletions src/routes/(site)/system/colors/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script lang="ts">
import toast from 'svelte-french-toast';
import ColorsInJs from './colors-in-js.svelte';

const COLORS = ['black', 'yellow', 'teal', 'green', 'red', 'purple'];
let is_oklch: false;
Expand Down Expand Up @@ -68,6 +69,8 @@
{/each}
</div>
{/each}

<ColorsInJs />
</section>

<style lang="postcss">
Expand Down
25 changes: 25 additions & 0 deletions src/routes/(site)/system/colors/colors-in-js.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<script lang="ts">
import { browser } from '$app/environment';
export let colors: [string, string][] = [['load', 'ing']];
if (browser) {
const variables = getComputedStyle(document.querySelector('.theme-wrapper'));
console.log(variables);
colors = Object.values(variables)
.filter((value) => {
return value.startsWith('--');
})
.map((variableName) => {
return [variableName, variables.getPropertyValue(variableName)];
});
}
</script>

<div>
<h2>Computed CSS Variables</h2>
{#each colors as [val, key]}
<p style:background={key}>{val} {key}</p>
{/each}
</div>

<style>
</style>