Something went wrong. Try again.
your personal website on atproto - mirror blento.app
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455<script lang="ts"> import { getStroke } from 'perfect-freehand'; import type { ContentComponentProps } from '../types';
let { item = $bindable(), isEditing }: ContentComponentProps = $props();
type Stroke = { points: [number, number, number][]; size?: number; };
function getStrokeOptions(size: number) { return { size, thinning: 0.5, smoothing: 0.5, streamline: 0.5 }; }
function getSvgPathFromStroke(stroke: number[][]): string { if (!stroke.length) return '';
const d = stroke.reduce( (acc, [x0, y0], i, arr) => { const [x1, y1] = arr[(i + 1) % arr.length]; acc.push(x0, y0, (x0 + x1) / 2, (y0 + y1) / 2); return acc; }, ['M', ...stroke[0], 'Q'] as (string | number)[] );
d.push('Z'); return d.join(' '); }
// Parse strokes from JSON string stored in cardData function parseStrokes(): Stroke[] { const strokesJson = item.cardData.strokesJson as string | undefined; if (!strokesJson) return []; try { return JSON.parse(strokesJson) as Stroke[]; } catch { return []; } }
let strokes = $derived(parseStrokes()); let viewBox = $derived((item.cardData.viewBox as string) || '0 0 100 100');</script>
<svg class="absolute inset-0 h-full w-full" {viewBox} preserveAspectRatio="xMidYMid meet"> {#each strokes as stroke, index (index)} {@const pathData = getSvgPathFromStroke( getStroke(stroke.points, getStrokeOptions(stroke.size ?? 3)) )} <path d={pathData} class="accent:fill-white fill-black dark:fill-white" /> {/each}</svg>