Create Handwritten SVG Text Animations in JavaScript – Khoshnus.js

Preview:

Description:

Khoshnus is a JavaScript library that transforms static text into SVG animations that mimic handwritten strokes.

It currently includes nine distinct font styles, from formal scripts to artistic variants. Users can modify stroke timing, fill colors, and animation speeds.

You can use the library to create animated signatures for websites, dynamic greetings on landing pages, or animated text for artistic endeavors, digital invitations, and logos. It’s also useful for crafting narrative experiences with flowing, hand-drawn text.

How to use it:

1. Install Khoshnus using npm or yarn:

# NPM
npm install khoshnus
# Yarn
yarn add khoshnus

2. Import the necessary modules and styles into your project:

import { initialize, write, FONT_MATRIX } from "khoshnus";
import "khoshnus/style.css";

3. Add an empty SVG element to your HTML where the text will appear:

<svg id="khoshnus" width="600" height="600" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg>

4. Initialize the library and select your desired font. Available fonts include: BlackCherry, Celtic, Eutemia, Kingthings, Ruritania, VTKS, Parisienne, Sevillana, and Pinyon Script. Each font has a default stroke offset that influences the animation.

const instance = new Manuscript();
instance.setup({
  font: FONT_MATRIX["Pinyon Script"].name,
  // more global configs here
});

5. All possible global configs to tweak the animation, stroke width, and color to match your design needs:

initialize({
  font: FONT_MATRIX["Pinyon Script"].name,
  fontSize: "16px",
  start: {
    startStrokeDashoffset: FONT_MATRIX["Pinyon Script"].strokeDashoffset,
    startStroke: "black",
    startStrokeWidth: 0.0000000001,
    startFill: "transparent",
  },
  end: {
    endStrokeDashoffset: 0,
    endStroke: "transparent",
    endStrokeWidth: 0.3,
    endFill: "black",
  },
  durations: {
    strokeDashoffsetDuration: 3500,
    strokeWidthDuration: 2500,
    strokeDuration: 2500,
    fillDuration: 4000,
  },
});

6. The library also allows you to animate text letter-by-letter.

const myExample = instance.write("CSSScript", {
  textElementAttributes: { y: "67.5%", },
  writeConfiguration: {
    eachLetterDelay: 250, 
    delayOperation: 0
  },
  textConfiguration: {
    x: "50%",
    y: "50%",
    textAnchor: "middle", 
    dominantBaseline: "middle", 
    fontSize: "12px"
  }
});

7. Erase the text after the desired waiting period.

manuscript.erase(myExample, { delayOperation: 15000 })

Changelog:

v3.0 (12/02/2024)

• Add Erase Mechanism And Refactor Structure
• Add delayOperation to write and fix wait time calculation
• Support Multiple SVG Elements

v2.1 (11/08/2024)

• Fix Spreading Configurations

v2.0 (10/29/2024)

• Add Erase Mechanism And Refactor Structure