Pencil Logo — Godsend

Preparing preview…

Installation

Choose your framework. The registry installs one component file and its PixiJS dependency.

Installation unavailable

The preview is public, but its installable release is still being prepared.

The registry command writes the component to src/lib/components/ui/PencilLogo.svelte and installs its dependencies.

The registry command writes the component to src/components/ui/PencilLogo.tsx and installs its dependencies.

The registry command writes the component to src/components/ui/PencilLogo.vue and installs its dependencies.

The generated component builds its SVG distance field locally and renders the intermediate luminance pass on the GPU.

PixiJS provides the render texture pipeline for both WebGPU and WebGL.

Overview

Pencil Logo is a true two-pass shader. The first pass renders the SVG distance field as a grayscale subject; the second derives noisy luminance gradients and directional graphite texture from that image.

The paper covers the entire canvas. Procedural noise replaces the reference noise texture while preserving its distorted sampling, paper grain, and tonal strokes.

Basic usage

The shader fills its parent. Your layout decides whether that parent is a card, hero, or viewport.

Hero.svelte

<script lang="ts">
	import PencilLogo from '$lib/components/ui/PencilLogo.svelte';
</script>

<section class="relative h-128 overflow-hidden">
	<PencilLogo
		class="absolute inset-0"
		svgSource="/images/your-logo.svg"
	/>

	<div class="relative z-10">Your content</div>
</section>
<script lang="ts">
	import PencilLogo from '$lib/components/ui/PencilLogo.svelte';
</script>

<section class="relative h-128 overflow-hidden">
	<PencilLogo
		class="absolute inset-0"
		svgSource="/images/your-logo.svg"
	/>

	<div class="relative z-10">Your content</div>
</section>

import { PencilLogo } from '@/components/ui/PencilLogo';

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<PencilLogo
				className="absolute inset-0"
				svgSource="/images/your-logo.svg"
			/>

			<div className="relative z-10">Your content</div>
		</section>
	);
}
import { PencilLogo } from '@/components/ui/PencilLogo';

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<PencilLogo
				className="absolute inset-0"
				svgSource="/images/your-logo.svg"
			/>

			<div className="relative z-10">Your content</div>
		</section>
	);
}

<script setup lang="ts">
import PencilLogo from '@/components/ui/PencilLogo.vue';
</script>

<template>
	<section class="relative h-128 overflow-hidden">
		<PencilLogo
			class="absolute inset-0"
			svgSource="/images/your-logo.svg"
		/>

		<div class="relative z-10">Your content</div>
	</section>
</template>
<script setup lang="ts">
import PencilLogo from '@/components/ui/PencilLogo.vue';
</script>

<template>
	<section class="relative h-128 overflow-hidden">
		<PencilLogo
			class="absolute inset-0"
			svgSource="/images/your-logo.svg"
		/>

		<div class="relative z-10">Your content</div>
	</section>
</template>

The effect is intentionally monochrome by default. Paper and graphite colors can be tinted without changing the sketch response.
Subject tone changes the source-pass luminance and therefore the density of the pencil texture, not a separate overlay.
The generated drawing is static and rerenders only after an input, control, size, or quality change.

Component API

Types below match the selected Svelte component.

Types below match the selected React component.

Types below match the selected Vue component.