DEV Community: Chynna He

Two Screen-Free Printable Activities for Kids: Observation and Imagination

Chynna He — Wed, 19 Aug 2026 11:16:00 +0000

Parents and teachers often look for activities that are easy to prepare, affordable, and genuinely engaging. A printable page can be more than a way to fill a quiet afternoon: it can invite children to slow down, notice details, make choices, and explain their ideas. With only paper, pencils, and crayons, adults can create a short learning routine that feels like play instead of another assignment.

Start with careful looking

A spot-the-difference activity gives children a simple visual investigation. Two pictures may look almost identical, but small changes in position, color, shape, or number ask children to compare details instead of scanning quickly. The spot-the-difference printable activity works well as a quiet opening activity at home or in the classroom.

Rather than turning the page into a race, invite children to describe what they notice. Questions such as “What did you look at first?”, “How can you prove that part is different?”, and “Can you explain where it is?” turn visual attention into language practice. Younger children can point, circle, or use location words such as above, below, beside, and between. Older children can make a short list of differences or explain the strategy they used.

The adult’s role is to support observation without giving away the answer. If a child feels stuck, narrow the search area or suggest comparing one feature at a time. This keeps the challenge manageable while still allowing the child to experience the satisfaction of discovering the answer independently.

Follow observation with creative choices

After a focused comparison task, children often benefit from an activity with no single correct result. Coloring gives them room to experiment with mood, pattern, character, and story. The Akedo coloring pages can become a starting point for designing a character rather than a requirement to copy a reference image.

Invite children to choose their own colors and then explain the choices. Is the character part of a team? Does a bright color show energy, or does a dark color help the character hide? Once the page is finished, ask the child to name the character, invent a special skill, or describe the place where an adventure begins. A few questions can turn a coloring page into a small storytelling exercise.

A practical 30-minute routine

The two activities work especially well as a short sequence:

Ten minutes of observation: Let children compare the pictures and mark the changes they find. Encourage them to explain one discovery in a complete sentence.
Fifteen minutes of creative work: Provide crayons or colored pencils and let each child develop a personal color scheme. There is no need to correct unusual choices.
Five minutes of sharing: Ask children to show one detail they like and one idea about their character or picture.

In a classroom, the routine can move from individual work to partner discussion and then to a brief group share. At home, the finished pages can be displayed on a refrigerator or kept in a folder. The goal is not a perfect worksheet; it is a repeatable moment when children look closely, make decisions, and communicate.

Small adjustments that make the routine inclusive

Choose a pencil or crayon that is comfortable to hold, and give children the option to work standing, sitting, or on the floor. Some children need a quiet space, while others think better when they can talk as they work. Let them use circles, arrows, colors, or spoken descriptions to show what they noticed.

It also helps to stop while the activity is still enjoyable. A short, positive session is more likely to become a habit than an ambitious project that leaves everyone tired. Over time, adults can vary the questions, invite children to create their own visual comparisons, or ask them to design a backstory for a finished character.

Printable activities are at their best when they open a door to conversation. One page supports careful looking; the next supports imagination. Together, they give parents and teachers a flexible way to create screen-free learning time that is simple, social, and led by the child’s own ideas.

Building a Non-Blocking JPG-to-SVG Converter in the Browser with WebAssembly

Chynna He — Mon, 10 Aug 2026 13:10:44 +0000

Converting a raster image to SVG sounds like a backend job: upload the file, enqueue a worker, run a native tracer, and return the result.

For simple logos, icons, badges, and flat illustrations, that architecture is often unnecessary. Modern browsers can decode the image, run a WebAssembly tracer, construct the SVG, and let the user download it without sending the source image to a server.

I recently used this approach for a browser-based JPG-to-SVG workflow. This post focuses on the engineering decisions that made the converter responsive and predictable rather than on the surrounding UI.

The pipeline

The browser-side pipeline has seven stages:

Decode the source image.
Downscale it to a bounded tracing resolution.
Draw the pixels into a temporary canvas.
Initialize a WebAssembly vector tracer.
Run the tracer in short time slices.
Validate and serialize the generated SVG.
Remove every temporary DOM node and object URL.

The important part is not any single API. It is keeping CPU work, memory, and cleanup under control.

Lazy-load the WebAssembly module

A vector tracer is much larger than normal UI code, so it should not be part of the initial page bundle. Load it only when a conversion begins and cache the promise so concurrent calls share the same module initialization:

type VTracerModule = typeof import("vtracer-webapp");

let vtracerPromise: Promise<VTracerModule> | null = null;

function loadVTracer() {
  vtracerPromise ??= import("vtracer-webapp");
  return vtracerPromise;
}

This pattern has two useful properties:

The landing page stays lightweight for visitors who never upload an image.
A second conversion reuses the initialized module instead of downloading and compiling it again.

Start image decoding and module loading in parallel:

const [{ ColorImageConverter }, image] = await Promise.all([
  loadVTracer(),
  loadImage(sourceUrl),
]);

On a cold run, this hides some of the WebAssembly startup cost behind image decoding.

Bound the working resolution

Tracing cost grows with the number of pixels and the complexity of the image. Passing a 6000 × 4000 photograph directly into a tracer is a good way to freeze a tab and generate an SVG with thousands of noisy paths.

Instead, keep the original dimensions for the final SVG metadata but trace a smaller working image:

const maxSide = detail === "high" ? 900 : 560;
const scale = Math.min(
  1,
  maxSide / Math.max(image.naturalWidth, image.naturalHeight)
);

const width = Math.max(1, Math.round(image.naturalWidth * scale));
const height = Math.max(1, Math.round(image.naturalHeight * scale));

This is a product decision as much as a performance optimization. A JPG-to-SVG converter is best for flat artwork with clear edges, not for reproducing every pixel of a photograph. A bounded tracing resolution reinforces that goal.

After tracing, the SVG can retain the original width and height while using a viewBox based on the working coordinate system.

Use an isolated canvas and SVG workspace

The tracer I used expects IDs for a canvas input and an SVG output element. Rather than coupling those elements to the visible React tree, create a hidden workspace for each conversion:

function makeWorkspace(width: number, height: number) {
  const wrapper = document.createElement("div");
  wrapper.hidden = true;

  const canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  canvas.id = crypto.randomUUID();

  const svg = document.createElementNS(
    "http://www.w3.org/2000/svg",
    "svg"
  );
  svg.id = crypto.randomUUID();
  svg.setAttribute("viewBox", `0 0 ${width} ${height}`);

  wrapper.append(canvas, svg);
  document.body.append(wrapper);

  return {
    canvas,
    svg,
    dispose: () => wrapper.remove(),
  };
}

The visible interface only needs progress state and the final serialized SVG. The temporary workspace can be destroyed in a finally block even if decoding or tracing fails.

Keep the main thread responsive

WebAssembly is fast, but a long synchronous loop still blocks input, rendering, and accessibility updates. The tracer exposes a tick() method, which makes cooperative scheduling possible.

Run ticks for a small time budget, yield to the browser, and continue later:

function runConverter(converter: {
  init(): void;
  tick(): boolean;
  free(): void;
}) {
  converter.init();

  return new Promise<void>((resolve, reject) => {
    const step = () => {
      try {
        let done = false;
        const startedAt = performance.now();

        while (!done && performance.now() - startedAt < 25) {
          done = converter.tick();
        }

        if (done) {
          converter.free();
          resolve();
          return;
        }

        window.setTimeout(step, 1);
      } catch (error) {
        converter.free();
        reject(error);
      }
    };

    window.setTimeout(step, 1);
  });
}

A 25 ms slice is not a universal constant. It is a practical starting point. Shorter slices improve responsiveness but add scheduling overhead; longer slices finish sooner but produce more noticeable jank. Measure on mid-range hardware, not only on a development machine.

A Web Worker is another option, but it is not always the first one to reach for. If the library requires DOM element IDs, moving the entire pipeline off the main thread may require OffscreenCanvas, message serialization, or changes inside the library. Cooperative ticks provide a useful middle ground.

Map simple controls to tracing parameters

Users understand controls such as color count and detail level. They should not have to understand spline thresholds or clustering modes.

Translate a small UI surface into a stable parameter set:

const highDetail = detail === "high";
const colorPrecision = colors >= 12 ? 1 : colors >= 8 ? 2 : 3;

const params = {
  mode: "spline",
  clustering_mode: "color",
  hierarchical: "stacked",
  corner_threshold: degreesToRadians(highDetail ? 50 : 60),
  length_threshold: highDetail ? 3.5 : 4.5,
  filter_speckle: highDetail ? 8 : 16,
  color_precision: colorPrecision,
  path_precision: highDetail ? 3 : 2,
};

There is a real tradeoff here:

More colors preserve subtle differences but create more layers and paths.
Higher path precision can improve curves but increases output size.
More aggressive speckle filtering removes JPG artifacts but may erase small intentional details.

For logos and flat graphics, the smallest palette that preserves the design is usually the best default.

Validate before offering a download

A completed trace does not automatically mean a useful result. Validate that the SVG contains at least one path and compute a lightweight summary for the UI:

const paths = Array.from(svg.querySelectorAll("path"));

if (paths.length === 0) {
  throw new Error("No vector paths were generated.");
}

const fills = new Set(
  paths
    .map((path) => path.getAttribute("fill"))
    .filter(Boolean)
);

const serialized = new XMLSerializer().serializeToString(svg);

The path count and color count are useful signals. A surprisingly large path count often means the JPG contains compression noise, shadows, or photographic texture. The interface can recommend lowering the color count or cleaning the source image before another run.

For the download, create a Blob instead of navigating to a massive data URL:

const blob = new Blob([serialized], { type: "image/svg+xml" });
const url = URL.createObjectURL(blob);

const anchor = document.createElement("a");
anchor.href = url;
anchor.download = "converted.svg";
anchor.click();

URL.revokeObjectURL(url);

Cleanup is part of correctness

Image conversion creates temporary resources quickly:

hidden canvas and SVG nodes
object URLs for uploads and downloads
a WebAssembly converter instance
patched event handlers or logging hooks
serialized SVG strings held in component state

Treat every one as an owned resource. Remove DOM workspaces in finally, revoke object URLs when previews change, and call the converter's free() method on both success and failure.

Without explicit cleanup, repeated conversions can make a single-page app slower even though each individual conversion appears to work.

What this architecture does not solve

Automatic tracing is not the same as a designer redrawing an asset. Photos, hair, foliage, gradients, and soft shadows can produce huge SVGs that are technically valid but difficult to edit.

The best inputs are:

high-contrast logos
icons and interface symbols
badges and stickers
line art
flat illustrations with limited colors

For noisy JPG files, preprocess first: crop irrelevant background, use the highest-resolution source available, reduce colors, and remove obvious compression artifacts.

Takeaway

A practical browser vectorizer is mostly about boundaries:

bound the input resolution
lazy-load expensive code
slice CPU work so the UI can breathe
expose a small set of understandable controls
validate the generated document
clean up every temporary resource

WebAssembly makes local JPG-to-SVG conversion possible. Careful scheduling and lifecycle management are what make it feel like a real web tool rather than a demo.

A React Paint Editor for SVGs and Bitmaps (Core Engine of VectorArtGen)

Chynna He — Fri, 24 Jul 2026 03:33:03 +0000

Hi everyone! I want to share a project I've been working on: svg-editor, a React-based paint editor component that handles both SVG vector paths and bitmap graphics.

This library serves as the core editing workspace for VectorArtGen — an AI tool that converts text prompts into scalable SVG artwork.

The Problem it Solves

Most web-based editors force you to choose: either you are editing vector paths (like Figma/Illustrator), or you are painting pixels on a canvas (like MS Paint/Photoshop).

When working with AI-generated designs, you often get a mix of both. You might want to brush over some pixels, erase a small artifact, or reshape a vector path to make a logo perfect.

svg-editor provides a React component that bridges this gap, allowing seamless switching between vector and bitmap modes while importing and exporting clean SVG or PNG data.

Features

Vector Mode — Path editing, pen tools, text styling, and shape tools.
Bitmap Mode — Brush, eraser, bucket fill, and pixel-level edits.
Clean Output — Generates optimized SVG code and standard PNG exports.
State Management — Built-in undo/redo stack, layer ordering, and camera zoom controls.

Getting Started

You can install the package directly from npm:


bash
npm install @chynna/svg-editor