Initial version of clock.

contrib/aura-clock/src/App.svelte

 <script>
-	export let name;
-</script>
+	import { onMount } from 'svelte';
+
+	let time = new Date();
+
+	// these automatically update when `time`
+	// changes, because of the `$:` prefix
+	$: hours = time.getHours();
+	$: minutes = time.getMinutes();
+	$: seconds = time.getSeconds();
 
-<main>
-	<h1>Hello {name}!</h1>
-	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
-</main>
+	onMount(() => {
+		const interval = setInterval(() => {
+			time = new Date();
+		}, 1000);
+
+		return () => {
+			clearInterval(interval);
+		};
+	});
+</script>
 
 <style>
-	main {
-		text-align: center;
-		padding: 1em;
-		max-width: 240px;
-		margin: 0 auto;
+	svg {
+		width: 100%;
+		height: 100%;
+	}
+
+	.clock-face {
+		stroke: #333;
+		fill: white;
+	}
+
+	.minor {
+		stroke: #999;
+		stroke-width: 0.5;
+	}
+
+	.major {
+		stroke: #333;
+		stroke-width: 1;
 	}
 
-	h1 {
-		color: #ff3e00;
-		text-transform: uppercase;
-		font-size: 4em;
-		font-weight: 100;
+	.hour {
+		stroke: #333;
 	}
 
-	@media (min-width: 640px) {
-		main {
-			max-width: none;
-		}
+	.minute {
+		stroke: #666;
 	}
-</style>
\ No newline at end of file
+
+	.second, .second-counterweight {
+		stroke: rgb(180,0,0);
+	}
+
+	.second-counterweight {
+		stroke-width: 3;
+	}
+</style>
+
+<svg viewBox='-50 -50 100 100'>
+	<circle class='clock-face' r='48'/>
+
+	<!-- markers -->
+	{#each [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55] as minute}
+		<line
+			class='major'
+			y1='35'
+			y2='45'
+			transform='rotate({30 * minute})'
+		/>
+
+		{#each [1, 2, 3, 4] as offset}
+			<line
+				class='minor'
+				y1='42'
+				y2='45'
+				transform='rotate({6 * (minute + offset)})'
+			/>
+		{/each}
+	{/each}
+
+	<!-- hour hand -->
+	<line
+		class='hour'
+		y1='2'
+		y2='-20'
+		transform='rotate({30 * hours + minutes / 2})'
+	/>
+
+	<!-- minute hand -->
+	<line
+		class='minute'
+		y1='4'
+		y2='-30'
+		transform='rotate({6 * minutes + seconds / 10})'
+	/>
+
+	<!-- second hand -->
+	<g transform='rotate({6 * seconds})'>
+		<line class='second' y1='10' y2='-38'/>
+		<line class='second-counterweight' y1='10' y2='2'/>
+	</g>
+</svg>
\ No newline at end of file