Serve the styleguide's images and links locally

The styleguide loaded 42 images from picsum.photos and linked demo items to daisyui.com. It now uses six small SVG landscapes in wwwroot/imgs/styleguide/ (the diff demo greys one with the grayscale utility), and its demo links stay on /styleguide. It also gains a carousel demo with navigation and indicators. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
2026-10-03 12:43:07 +02:00
1 parent d71040f262
commit 483ed271e0
@@ -86,17 +86,17 @@
 	<section class="flex flex-col gap-3">
 		<h3 class="text-lg font-bold">DAvatar</h3>
 		<div class="flex flex-wrap items-center gap-4">
-			<DAvatar Src="https://picsum.photos/seed/av1/96/96" Alt="Avatar" Class="w-8 rounded-full" />
-			<DAvatar Src="https://picsum.photos/seed/av1/96/96" Alt="Avatar" Class="w-12 rounded-full" />
-			<DAvatar Src="https://picsum.photos/seed/av1/96/96" Alt="Avatar" Class="w-16 rounded-box" />
-			<DAvatar Src="https://picsum.photos/seed/av1/96/96" Alt="Avatar" Class="w-20 rounded-xl" />
+			<DAvatar Src="imgs/styleguide/scene-1.svg" Alt="Avatar" Class="w-8 rounded-full" />
+			<DAvatar Src="imgs/styleguide/scene-1.svg" Alt="Avatar" Class="w-12 rounded-full" />
+			<DAvatar Src="imgs/styleguide/scene-1.svg" Alt="Avatar" Class="w-16 rounded-box" />
+			<DAvatar Src="imgs/styleguide/scene-1.svg" Alt="Avatar" Class="w-20 rounded-xl" />
 		</div>
 		<div class="flex flex-wrap items-center gap-4">
-			<DAvatar Src="https://picsum.photos/seed/av2/96/96" Alt="Squircle" Class="w-16 mask mask-squircle" />
-			<DAvatar Src="https://picsum.photos/seed/av2/96/96" Alt="Hexagon" Class="w-16 mask mask-hexagon" />
-			<DAvatar Src="https://picsum.photos/seed/av2/96/96" Alt="Triangle" Class="w-16 mask mask-triangle" />
-			<DAvatar Src="https://picsum.photos/seed/av3/96/96" Alt="Online" Status="DAvatarStatus.Online" Class="w-16 rounded-full" />
-			<DAvatar Src="https://picsum.photos/seed/av4/96/96" Alt="Offline" Status="DAvatarStatus.Offline" Class="w-16 rounded-full" />
+			<DAvatar Src="imgs/styleguide/scene-2.svg" Alt="Squircle" Class="w-16 mask mask-squircle" />
+			<DAvatar Src="imgs/styleguide/scene-2.svg" Alt="Hexagon" Class="w-16 mask mask-hexagon" />
+			<DAvatar Src="imgs/styleguide/scene-2.svg" Alt="Triangle" Class="w-16 mask mask-triangle" />
+			<DAvatar Src="imgs/styleguide/scene-3.svg" Alt="Online" Status="DAvatarStatus.Online" Class="w-16 rounded-full" />
+			<DAvatar Src="imgs/styleguide/scene-4.svg" Alt="Offline" Status="DAvatarStatus.Offline" Class="w-16 rounded-full" />
 		</div>
 		<div class="flex flex-wrap items-center gap-4">
 			<DAvatar Placeholder="true" Class="bg-neutral text-neutral-content w-24 rounded-full"><span class="text-3xl">D</span></DAvatar>
@@ -105,9 +105,9 @@
 			<DAvatar Placeholder="true" Class="bg-accent text-accent-content w-8 rounded-full"><span class="text-xs">UI</span></DAvatar>
 		</div>
 		<DAvatarGroup Class="-space-x-6">
-			<DAvatar Src="https://picsum.photos/seed/g1/96/96" Alt="One" Class="w-12" />
-			<DAvatar Src="https://picsum.photos/seed/g2/96/96" Alt="Two" Class="w-12" />
-			<DAvatar Src="https://picsum.photos/seed/g3/96/96" Alt="Three" Class="w-12" />
+			<DAvatar Src="imgs/styleguide/scene-3.svg" Alt="One" Class="w-12" />
+			<DAvatar Src="imgs/styleguide/scene-4.svg" Alt="Two" Class="w-12" />
+			<DAvatar Src="imgs/styleguide/scene-5.svg" Alt="Three" Class="w-12" />
 			<DAvatar Placeholder="true" Class="bg-neutral text-neutral-content w-12"><span>+99</span></DAvatar>
 		</DAvatarGroup>
 	</section>
@@ -148,7 +148,7 @@
 		<h3 class="text-lg font-bold">DCard</h3>
 		<div class="grid gap-4 md:grid-cols-3">
 			<DCard Class="bg-base-100" ActionsClass="justify-end">
-				<Figure><img src="https://picsum.photos/seed/card1/600/300" alt="Landscape" /></Figure>
+				<Figure><img src="imgs/styleguide/scene-4.svg" alt="Landscape" /></Figure>
 				<Heading>Default <DBadge Color="DColor.Secondary" Size="DSize.Sm">new</DBadge></Heading>
 				<ChildContent><p>Figure, heading, body and actions.</p></ChildContent>
 				<Actions><DButton Color="DColor.Primary">Buy now</DButton></Actions>
@@ -158,7 +158,7 @@
 				<ChildContent><p>card-border has no neo shadow.</p></ChildContent>
 			</DCard>
 			<DCard Variant="DCardVariant.Dash" Class="bg-base-100" FigureLast="true">
-				<Figure><img src="https://picsum.photos/seed/card2/600/300" alt="Landscape" /></Figure>
+				<Figure><img src="imgs/styleguide/scene-5.svg" alt="Landscape" /></Figure>
 				<Heading>Dash, figure last</Heading>
 				<ChildContent><p>The figure comes after the body.</p></ChildContent>
 			</DCard>
@@ -174,13 +174,13 @@
 		</div>
 		<div class="grid gap-4 md:grid-cols-2">
 			<DCard Side="true" Class="bg-base-100">
-				<Figure><img src="https://picsum.photos/seed/card3/200/300" alt="Portrait" /></Figure>
+				<Figure><img src="imgs/styleguide/scene-6.svg" alt="Portrait" /></Figure>
 				<Heading>Side</Heading>
 				<ChildContent><p>The figure sits beside the body.</p></ChildContent>
 				<Actions><DButton Size="DSize.Sm">Watch</DButton></Actions>
 			</DCard>
 			<DCard ImageFull="true" ActionsClass="justify-end">
-				<Figure><img src="https://picsum.photos/seed/card4/600/400" alt="Background" /></Figure>
+				<Figure><img src="imgs/styleguide/scene-1.svg" alt="Background" /></Figure>
 				<Heading>Image full</Heading>
 				<ChildContent><p>The figure is the background.</p></ChildContent>
 				<Actions><DButton Color="DColor.Primary" Size="DSize.Sm">Open</DButton></Actions>
@@ -196,22 +196,29 @@
 			<DCarousel Snap="snap" Class="rounded-box w-full">
 				@foreach (var i in Enumerable.Range(1, 6))
 				{
-					<DCarouselItem><img src="https://picsum.photos/seed/car@(i)/200/140" alt="Slide @i" /></DCarouselItem>
+					<DCarouselItem><img src="imgs/styleguide/scene-@(i % 6 + 1).svg" alt="Slide @i" /></DCarouselItem>
 				}
 			</DCarousel>
 		}
+		<span class="text-sm opacity-60">ShowNavigation and ShowIndicators (links to the slides, no script)</span>
+		<DCarousel ShowNavigation="true" ShowIndicators="true" Class="rounded-box w-full h-48">
+			@foreach (var i in Enumerable.Range(1, 4))
+			{
+				<DCarouselItem Class="w-full"><img src="imgs/styleguide/scene-@(i % 6 + 1).svg" alt="Slide @i" class="w-full object-cover" /></DCarouselItem>
+			}
+		</DCarousel>
 		<span class="text-sm opacity-60">Full-width items, vertical</span>
 		<div class="flex gap-4">
 			<DCarousel Class="rounded-box h-40 w-1/2">
 				@foreach (var i in Enumerable.Range(1, 4))
 				{
-					<DCarouselItem Class="w-full"><img src="https://picsum.photos/seed/full@(i)/400/160" alt="Slide @i" class="w-full object-cover" /></DCarouselItem>
+					<DCarouselItem Class="w-full"><img src="imgs/styleguide/scene-@(i % 6 + 1).svg" alt="Slide @i" class="w-full object-cover" /></DCarouselItem>
 				}
 			</DCarousel>
 			<DCarousel Direction="DDirection.Vertical" Class="rounded-box h-40 w-1/2">
 				@foreach (var i in Enumerable.Range(1, 4))
 				{
-					<DCarouselItem Class="h-full"><img src="https://picsum.photos/seed/vert@(i)/400/160" alt="Slide @i" class="w-full object-cover" /></DCarouselItem>
+					<DCarouselItem Class="h-full"><img src="imgs/styleguide/scene-@(i % 6 + 1).svg" alt="Slide @i" class="w-full object-cover" /></DCarouselItem>
 				}
 			</DCarousel>
 		</div>
@@ -220,13 +227,13 @@
 	<section class="flex flex-col gap-3">
 		<h3 class="text-lg font-bold">DChat</h3>
 		<DChat>
-			<Avatar><div class="w-10 rounded-full"><img src="https://picsum.photos/seed/obi/80/80" alt="Obi-Wan" /></div></Avatar>
+			<Avatar><div class="w-10 rounded-full"><img src="imgs/styleguide/scene-3.svg" alt="Obi-Wan" /></div></Avatar>
 			<Header>Obi-Wan Kenobi <time class="text-xs opacity-50">12:45</time></Header>
 			<ChildContent><DChatBubble>You were the Chosen One!</DChatBubble></ChildContent>
 			<Footer>Delivered</Footer>
 		</DChat>
 		<DChat Placement="DChatPlacement.End">
-			<Avatar><div class="w-10 rounded-full"><img src="https://picsum.photos/seed/ani/80/80" alt="Anakin" /></div></Avatar>
+			<Avatar><div class="w-10 rounded-full"><img src="imgs/styleguide/scene-1.svg" alt="Anakin" /></div></Avatar>
 			<Header>Anakin <time class="text-xs opacity-50">12:46</time></Header>
 			<ChildContent><DChatBubble Color="DColor.Primary">I hate you!</DChatBubble></ChildContent>
 			<Footer>Seen at 12:46</Footer>
@@ -269,8 +276,8 @@
 	<section class="flex flex-col gap-3">
 		<h3 class="text-lg font-bold">DDiff</h3>
 		<DDiff Class="rounded-box" Item1Alt="Colour photo" Item2Alt="Greyscale photo">
-			<Item1><img src="https://picsum.photos/id/1015/800/450" alt="" /></Item1>
-			<Item2><img src="https://picsum.photos/id/1015/800/450?grayscale" alt="" /></Item2>
+			<Item1><img src="imgs/styleguide/scene-2.svg" alt="" /></Item1>
+			<Item2><img src="imgs/styleguide/scene-2.svg" class="grayscale" alt="" /></Item2>
 		</DDiff>
 		<DDiff AspectClass="aspect-[3/1]" Class="rounded-box" Item1Alt="Primary text" Item2Alt="Plain text">
 			<Item1><div class="bg-primary text-primary-content grid place-content-center text-6xl font-black">DAISY</div></Item1>
@@ -282,9 +289,9 @@
 		<h3 class="text-lg font-bold">DHover3D</h3>
 		<div class="flex flex-wrap items-center gap-6">
 			<DHover3D Class="my-4">
-				<figure class="max-w-60 rounded-2xl"><img src="https://picsum.photos/seed/h3d/480/300" alt="Tilting card" /></figure>
+				<figure class="max-w-60 rounded-2xl"><img src="imgs/styleguide/scene-4.svg" alt="Tilting card" /></figure>
 			</DHover3D>
-			<DHover3D Href="https://daisyui.com/components/hover-3d/" target="_blank" rel="noopener">
+			<DHover3D Href="styleguide">
 				<div class="card bg-neutral text-neutral-content w-60">
 					<div class="card-body"><h2 class="card-title">As a link</h2><p>The whole card is the link.</p></div>
 				</div>
@@ -297,9 +304,9 @@
 		<div class="flex flex-wrap gap-4">
 			<DHoverGallery Images="galleryImages" Alt="Gallery photo" Class="rounded-box max-w-60" />
 			<DHoverGallery Class="rounded-box max-w-40">
-				<img src="https://picsum.photos/seed/hgx1/300/400" alt="First" />
-				<img src="https://picsum.photos/seed/hgx2/300/400" alt="Second" />
-				<img src="https://picsum.photos/seed/hgx3/300/400" alt="Third" />
+				<img src="imgs/styleguide/scene-5.svg" alt="First" />
+				<img src="imgs/styleguide/scene-6.svg" alt="Second" />
+				<img src="imgs/styleguide/scene-1.svg" alt="Third" />
 			</DHoverGallery>
 		</div>
 	</section>
@@ -326,7 +333,7 @@
 			@foreach (var i in Enumerable.Range(1, 3))
 			{
 				<DListRow>
-					<div><img class="rounded-box size-10" src="https://picsum.photos/seed/song@(i)/80/80" alt="Cover" /></div>
+					<div><img class="rounded-box size-10" src="imgs/styleguide/scene-@(i % 6 + 1).svg" alt="Cover" /></div>
 					<div>
 						<div>Song @i</div>
 						<div class="text-xs font-semibold uppercase opacity-60">Artist @i</div>
@@ -337,7 +344,7 @@
 			}
 			<DListRow>
 				<div class="text-4xl font-thin tabular-nums opacity-30">04</div>
-				<div><img class="rounded-box size-10" src="https://picsum.photos/seed/song4/80/80" alt="Cover" /></div>
+				<div><img class="rounded-box size-10" src="imgs/styleguide/scene-6.svg" alt="Cover" /></div>
 				<div class="list-col-grow">
 					<div>list-col-grow</div>
 					<div class="text-xs font-semibold uppercase opacity-60">The third column fills the row</div>
@@ -364,7 +371,7 @@
 				<Desc>↗︎ 14%</Desc>
 			</DStat>
 			<DStat>
-				<Figure><DAvatar Src="https://picsum.photos/seed/stat/96/96" Alt="User" Status="DAvatarStatus.Online" Class="w-14 rounded-full" /></Figure>
+				<Figure><DAvatar Src="imgs/styleguide/scene-1.svg" Alt="User" Status="DAvatarStatus.Online" Class="w-14 rounded-full" /></Figure>
 				<Heading>Tasks done</Heading>
 				<ChildContent>86%</ChildContent>
 				<Desc>31 tasks remaining</Desc>
@@ -525,10 +532,10 @@

 	readonly string[] galleryImages =
 	[
-		"https://picsum.photos/seed/hg1/300/400",
-		"https://picsum.photos/seed/hg2/300/400",
-		"https://picsum.photos/seed/hg3/300/400",
-		"https://picsum.photos/seed/hg4/300/400"
+		"imgs/styleguide/scene-5.svg",
+		"imgs/styleguide/scene-6.svg",
+		"imgs/styleguide/scene-1.svg",
+		"imgs/styleguide/scene-2.svg"
 	];

 	readonly string[] rotateWords = ["ONE", "TWO", "THREE"];
@@ -101,7 +101,7 @@
 				<DButton Color="DColor.Primary">Get started</DButton>
 			</div>
 		</DHero>
-		<DHero BackgroundImage="https://picsum.photos/seed/hero/800/400" Overlay="true" class="min-h-64 rounded-box overflow-hidden"
+		<DHero BackgroundImage="imgs/styleguide/scene-5.svg" Overlay="true" class="min-h-64 rounded-box overflow-hidden"
 			   ContentClass="text-neutral-content text-center">
 			<div class="max-w-md">
 				<h1 class="text-3xl font-bold">With an overlay</h1>
@@ -109,7 +109,7 @@
 			</div>
 		</DHero>
 		<DHero class="rounded-box bg-base-200" ContentClass="flex-col lg:flex-row">
-			<img src="https://picsum.photos/seed/figure/200/260" class="max-w-32 rounded-lg shadow-2xl" alt="" />
+			<img src="imgs/styleguide/scene-1.svg" class="max-w-32 rounded-lg shadow-2xl" alt="" />
 			<div>
 				<h1 class="text-2xl font-bold">With a figure</h1>
 				<p class="py-2">Column on small screens, row from lg up.</p>
@@ -180,7 +180,7 @@
 			@foreach (var shape in Enum.GetValues<DMaskShape>().Skip(1))
 			{
 				<div class="flex flex-col items-center gap-1 text-xs">
-					<DMask Shape="shape" Src="https://picsum.photos/seed/mask/160/160" alt="@shape" class="h-16 w-16" />
+					<DMask Shape="shape" Src="imgs/styleguide/scene-3.svg" alt="@shape" class="h-16 w-16" />
 					@shape
 				</div>
 			}
@@ -207,9 +207,9 @@
 				</div>
 			}
 			<DStack class="w-32">
-				<img src="https://picsum.photos/seed/stack1/200/140" class="rounded-box" alt="" />
-				<img src="https://picsum.photos/seed/stack2/200/140" class="rounded-box" alt="" />
-				<img src="https://picsum.photos/seed/stack3/200/140" class="rounded-box" alt="" />
+				<img src="imgs/styleguide/scene-2.svg" class="rounded-box" alt="" />
+				<img src="imgs/styleguide/scene-3.svg" class="rounded-box" alt="" />
+				<img src="imgs/styleguide/scene-4.svg" class="rounded-box" alt="" />
 			</DStack>
 		</div>
 	</section>
@@ -36,7 +36,7 @@
 				<div class="grid h-full place-content-center bg-neutral text-neutral-content">It's Glowtime.</div>
 			</DMockupPhone>
 			<DMockupPhone class="max-w-56 border-primary">
-				<img src="https://picsum.photos/seed/phone/462/978" alt="wallpaper" />
+				<img src="imgs/styleguide/scene-5.svg" alt="wallpaper" />
 			</DMockupPhone>
 		</div>
 	</section>
@@ -4,16 +4,16 @@
 	<section class="flex flex-col gap-3">
 		<h3 class="text-lg font-bold">DBreadcrumbs</h3>
 		<DBreadcrumbs class="text-sm">
-			<DBreadcrumbItem Href="https://daisyui.com/" target="_blank" rel="noopener"><i class="ion-md-home"></i> Home</DBreadcrumbItem>
-			<DBreadcrumbItem Href="https://daisyui.com/components/" target="_blank" rel="noopener"><i class="ion-md-folder"></i> Components</DBreadcrumbItem>
+			<DBreadcrumbItem Href="styleguide"><i class="ion-md-home"></i> Home</DBreadcrumbItem>
+			<DBreadcrumbItem Href="styleguide"><i class="ion-md-folder"></i> Components</DBreadcrumbItem>
 			<DBreadcrumbItem aria-current="page"><i class="ion-md-document"></i> Breadcrumbs</DBreadcrumbItem>
 		</DBreadcrumbs>
 		<p class="text-xs opacity-60">max-w-xs: the list scrolls</p>
 		<DBreadcrumbs class="max-w-xs text-sm">
-			<DBreadcrumbItem Href="https://daisyui.com/" target="_blank" rel="noopener">Long text 1</DBreadcrumbItem>
-			<DBreadcrumbItem Href="https://daisyui.com/" target="_blank" rel="noopener">Long text 2</DBreadcrumbItem>
-			<DBreadcrumbItem Href="https://daisyui.com/" target="_blank" rel="noopener">Long text 3</DBreadcrumbItem>
-			<DBreadcrumbItem Href="https://daisyui.com/" target="_blank" rel="noopener">Long text 4</DBreadcrumbItem>
+			<DBreadcrumbItem Href="styleguide">Long text 1</DBreadcrumbItem>
+			<DBreadcrumbItem Href="styleguide">Long text 2</DBreadcrumbItem>
+			<DBreadcrumbItem Href="styleguide">Long text 3</DBreadcrumbItem>
+			<DBreadcrumbItem Href="styleguide">Long text 4</DBreadcrumbItem>
 			<DBreadcrumbItem>Long text 5</DBreadcrumbItem>
 		</DBreadcrumbs>
 	</section>
@@ -35,14 +35,14 @@
 	<section class="flex flex-col gap-3">
 		<h3 class="text-lg font-bold">DLink</h3>
 		<div class="flex flex-wrap gap-3">
-			<DLink Href="https://daisyui.com/components/link/" target="_blank" rel="noopener">Default</DLink>
+			<DLink Href="styleguide">Default</DLink>
 			@foreach (var color in colors)
 			{
-				<DLink Href="https://daisyui.com/components/link/" target="_blank" rel="noopener" Color="color">@color</DLink>
+				<DLink Href="styleguide" Color="color">@color</DLink>
 			}
 		</div>
 		<div class="flex flex-wrap gap-3">
-			<DLink Href="https://daisyui.com/components/link/" target="_blank" rel="noopener" Hover="true">Underline on hover</DLink>
+			<DLink Href="styleguide" Hover="true">Underline on hover</DLink>
 			<DLink Color="DColor.Primary" OnClick="() => linkClicks++">Button link, clicked @linkClicks times</DLink>
 		</div>
 	</section>
@@ -71,7 +71,7 @@
 							<ul><li><a>Components</a></li><li><a>Utilities</a></li></ul>
 						</li>
 					</DMenu>
-					<img src="https://picsum.photos/seed/megamenu/240/140" class="m-2 rounded-box max-md:w-auto md:max-w-xs" alt="Sample" />
+					<img src="imgs/styleguide/scene-2.svg" class="m-2 rounded-box max-md:w-auto md:max-w-xs" alt="Sample" />
 				</div>
 			</DMegamenuItem>
 			<DMegamenuItem Text="Company" HideArrow="true" class="p-4">
@@ -100,7 +100,7 @@
 				<DMenuTitle>Title</DMenuTitle>
 				<DMenuItem Active="menuActive == 0" OnClick="() => menuActive = 0"><i class="ion-md-home"></i> Home</DMenuItem>
 				<DMenuItem Active="menuActive == 1" OnClick="() => menuActive = 1"><i class="ion-md-mail"></i> Inbox <span class="badge badge-sm">3</span></DMenuItem>
-				<DMenuItem Href="https://daisyui.com/components/menu/" target="_blank" rel="noopener"><i class="ion-md-document"></i> Docs (link)</DMenuItem>
+				<DMenuItem Href="styleguide"><i class="ion-md-document"></i> Docs (link)</DMenuItem>
 				<DMenuItem Disabled="true"><i class="ion-md-close-circle"></i> Disabled</DMenuItem>
 				<li></li>
 				<DSubmenu @bind-IsOpen="submenuOpen">
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500" viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice">
+	<title>dawn</title>
+	<defs><linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#fbd3b0"/><stop offset="1" stop-color="#f6a77e"/></linearGradient></defs>
+	<rect width="800" height="500" fill="url(#sky)"/>
+	<circle cx="520" cy="175" r="70" fill="#fff1c9"/>
+	<path d="M0 330 L120 236 L250 300 L380 208 L520 310 L660 236 L800 290 L800 500 L0 500 Z" fill="#d98a6c"/>
+	<path d="M0 380 L90 330 L210 367 L340 300 L470 380 L600 330 L720 370 L800 340 L800 500 L0 500 Z" fill="#b5664f"/>
+	<path d="M0 440 Q200 385 400 430 T800 420 L800 500 L0 500 Z" fill="#7d3f33"/>
+</svg>
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500" viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice">
+	<title>sea</title>
+	<defs><linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#a7d8f5"/><stop offset="1" stop-color="#e3f4fb"/></linearGradient></defs>
+	<rect width="800" height="500" fill="url(#sky)"/>
+	<circle cx="480" cy="200" r="55" fill="#fffbe6"/>
+	<path d="M0 330 L120 242 L250 300 L380 216 L520 310 L660 232 L800 290 L800 500 L0 500 Z" fill="#7fb3d1"/>
+	<path d="M0 380 L90 330 L210 364 L340 300 L470 380 L600 330 L720 370 L800 340 L800 500 L0 500 Z" fill="#3f86b0"/>
+	<path d="M0 440 Q200 390 400 430 T800 420 L800 500 L0 500 Z" fill="#1f5f86"/>
+</svg>
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500" viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice">
+	<title>forest</title>
+	<defs><linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#cfe8c5"/><stop offset="1" stop-color="#f1f7e8"/></linearGradient></defs>
+	<rect width="800" height="500" fill="url(#sky)"/>
+	<circle cx="440" cy="150" r="70" fill="#fdfbe3"/>
+	<path d="M0 330 L120 248 L250 300 L380 224 L520 310 L660 228 L800 290 L800 500 L0 500 Z" fill="#8cb98a"/>
+	<path d="M0 380 L90 330 L210 361 L340 300 L470 380 L600 330 L720 370 L800 340 L800 500 L0 500 Z" fill="#4f8a55"/>
+	<path d="M0 440 Q200 395 400 430 T800 420 L800 500 L0 500 Z" fill="#285c34"/>
+</svg>
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500" viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice">
+	<title>dusk</title>
+	<defs><linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#3b2a5c"/><stop offset="1" stop-color="#c06c84"/></linearGradient></defs>
+	<rect width="800" height="500" fill="url(#sky)"/>
+	<circle cx="400" cy="175" r="55" fill="#f8b195"/>
+	<path d="M0 330 L120 254 L250 300 L380 232 L520 310 L660 224 L800 290 L800 500 L0 500 Z" fill="#6c5b7b"/>
+	<path d="M0 380 L90 330 L210 358 L340 300 L470 380 L600 330 L720 370 L800 340 L800 500 L0 500 Z" fill="#45385e"/>
+	<path d="M0 440 Q200 400 400 430 T800 420 L800 500 L0 500 Z" fill="#251c36"/>
+</svg>
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500" viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice">
+	<title>desert</title>
+	<defs><linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#f9e2b0"/><stop offset="1" stop-color="#fdf3dc"/></linearGradient></defs>
+	<rect width="800" height="500" fill="url(#sky)"/>
+	<circle cx="360" cy="200" r="70" fill="#ffffff"/>
+	<path d="M0 330 L120 260 L250 300 L380 240 L520 310 L660 220 L800 290 L800 500 L0 500 Z" fill="#e3b778"/>
+	<path d="M0 380 L90 330 L210 355 L340 300 L470 380 L600 330 L720 370 L800 340 L800 500 L0 500 Z" fill="#c98f4a"/>
+	<path d="M0 440 Q200 405 400 430 T800 420 L800 500 L0 500 Z" fill="#94622c"/>
+</svg>
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500" viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice">
+	<title>snow</title>
+	<defs><linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#c9d6e3"/><stop offset="1" stop-color="#eef3f8"/></linearGradient></defs>
+	<rect width="800" height="500" fill="url(#sky)"/>
+	<circle cx="320" cy="150" r="55" fill="#ffffff"/>
+	<path d="M0 330 L120 266 L250 300 L380 248 L520 310 L660 216 L800 290 L800 500 L0 500 Z" fill="#aebfd1"/>
+	<path d="M0 380 L90 330 L210 352 L340 300 L470 380 L600 330 L720 370 L800 340 L800 500 L0 500 Z" fill="#8199b3"/>
+	<path d="M0 440 Q200 410 400 430 T800 420 L800 500 L0 500 Z" fill="#4d6580"/>
+</svg>