◈ component · halftone-plate
Halftone Plate
A monochrome SVG screen with optional controlled inspection. Convert a bounded grayscale sample or authored geometry into isolated vector marks, with geometric ink coverage.
The Halftone Camera.
One ink. A thousand shades.
Change the screen and watch an image become a field of marks.
Continuous tone
Six cells across
Column 25 / row 25
Copies component source and tokens directly into your repository with requirements listed for this item: no additional npm dependencies beyond the host framework.
Open-source under MIT. We preserve the source header comment, and invite you to credit the archive on your project's /about, /colophon, or footer. Display our Archival Colophon Seal or copy a citation snippet below. Sites displaying the seal are welcome to submit to our Federation Showcase!
A screen you can take with you.
Pass screen settings and, optionally, a grayscale sample. The same state produces the on-screen plate and its standalone SVG. Inspection is optional and never appears in the exported print.
"use client";
import { useState } from "react";
import { HalftonePlate } from "@/components/HalftonePlate";
import { HALFTONE_DEFAULT } from "@/lib/render/halftone";
export default function ScreenStudy() {
const [probe, setProbe] = useState({ x: .5, y: .5 });
return <HalftonePlate state={HALFTONE_DEFAULT}
probe={probe} onInspect={setProbe} />;
}Use halftoneSvg(state, image) for export. Optional image data contains width, height and a flat values array of grayscale samples from 0 to 1, with dimensions up to 256 pixels. Image reading is handled by the consuming application; the component makes no network requests.
Source
components/HalftonePlate.tsxlib/render/halftone.ts
Registry item: /r/halftone-plate.json