• Townie
    AI
  • Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
dcm31

dcm31

sketchyTextGenerator

Public
Like
sketchyTextGenerator
Home
Code
2
README.md
H
main.tsx
Branches
1
Pull requests
Remixes
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
Code
/
Search
main.tsx
https://dcm31--a5989ff8278311f0b46e569c3dd06744.web.val.run
README.md

Sketchy Text Generator

An interactive tool for generating hand-drawn looking text using Rough.js. This application allows you to convert regular text into sketchy, hand-drawn style graphics that can be downloaded as PNG images.

Features

  • Text to Sketch: Convert any text into hand-drawn sketches
  • Font Selection: Choose from various font families as the base for your sketch
  • Size Control: Adjust the font size to your needs
  • Roughness Control: Fine-tune how sketchy or hand-drawn the text appears
  • Fill Styles: Multiple fill styles including solid, hachure, zigzag, cross-hatch, dots, and dashed
  • Color Options: Customize both fill and stroke colors
  • Randomize: Generate new variations with the randomize feature
  • Download: Save your creation as a PNG image

How It Works

Under the hood, this application:

  1. Renders your text normally using HTML Canvas
  2. Samples the pixel data to identify the text shape
  3. Simplifies the outline to create a more efficient path
  4. Uses Rough.js to render the sketchy version with customized options

Technology

  • React for the user interface
  • Rough.js for the sketchy, hand-drawn rendering
  • HTML Canvas for the drawing operations

Usage

  1. Enter your text in the input field
  2. Adjust the font, size, roughness, and style options as desired
  3. Click "Randomize Style" to generate variations
  4. Once satisfied, click "Download Image" to save your creation

This tool is perfect for creating unique headers, logos, or graphics with a hand-drawn aesthetic for your projects.

HTTP
  • main.tsx
    dcm31--a5…44.web.val.run
Code
README.md
H
main.tsx
FeaturesVersion controlCode intelligenceCLI
Use cases
TeamsAI agentsSlackGTM
ExploreDocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.