fubits.dev fubits.dev

MDX Tests: Astro & Svelte 5 & Canvas

MDXSvelteAstro

Lazy-Loading Svelte Component (with Astro wrapper)

import

import LazyLoadDemo from '@components/Notes/Examples/LazyLoadDemo.astro'

instantiate

<LazyLoadDemo />

0

Simple Svelte 5 Component

import

import DynamicCssBefore from '@components/Notes/Examples/DynamicCssBefore.svelte'

instantiate

<DynamicCssBefore client:visible />
Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl.

Simple Svelte 5 Component (SVG)

import

import SvgOffsetPath from '@components/Notes/Examples/SvgOffsetPath.svelte'

instantiate

<SvgOffsetPath client:visible />

Svelte 5 Component with Children

import

import CanvasDotplot from '@components/Notes/Examples/CanvasDotplot.svelte'

instantiate

<CanvasDotplot client:only>
	<div>
		<h4>
			<code>Astro Children</code>
		</h4>
	</div>
</CanvasDotplot>

Legacy Svelte 3/4 Component mixed with Svelte 5 Components

import

import Layers from '@components/Notes/Examples/Layers.svelte'

instantiate

<Layers client:visible />
Animated Isometric Layers

Animated Isometric Layers

select a step
Intro

keep on clicking

Layer 0

0

Layer 1
Layer 2
Hoverable Canvas
Layer 3