Burned text using svg filter

SVG filter can be used to make the edge of text feel burned. Features customizable filter effects, responsive design, and optimized rendering for creating dramatic visual text effects.

v0.0.1
🍰
🏃
🎓
Beginner
css-tricks
#css#svg#svg-filter

Burned Text Effect

A React component that creates a burned text effect using SVG filters. The text appears to have been burned or charred around the edges, creating a dramatic visual effect.

Features

  • SVG Filter Based: Uses advanced SVG filters for realistic burned effect
  • Customizable: Adjustable font size, weight, color, and styling
  • Responsive: Works across different screen sizes
  • Accessible: Proper ARIA labels and semantic HTML
  • TypeScript: Fully typed with TypeScript support

Details

  • Title: Burned text using svg filter
  • Author: Mangle Kuo
  • GitHub: ghcpuman902
  • Tags: css, svg, svg-filter
  • Version: 0.0.1
  • Complexity: beginner
  • Category: css-tricks

Usage

Basic Usage

import { BurnedText } from './burned-text';

<BurnedText>
  Your text here
</BurnedText>

With Custom Styling

<BurnedText 
  fontSize={36}
  fontWeight="normal"
  color="#8B0000"
  className="bg-gray-100"
>
  Custom styled text
</BurnedText>

Props

  • children (ReactNode, default: "Burned Text"): The text content to display.
  • className (string, default: ""): Additional CSS classes.
  • fontSize (number, default: 48): Font size in pixels.
  • fontWeight (string, default: "bold"): Font weight.
  • color (string, default: "black"): Text color.

Examples

Burned Text Components Demo

Stateful Component (Adjustable)

Burned TextBurned Text

Stateless Component (Fixed Settings)

Burned TextBurned Text
Different Text Sizes Preview

Small Text (24px)

Burned TextBurned Text

Medium Text (36px)

Burned TextBurned Text

Large Text (64px)

Burned TextBurned Text
Current Settings
contrast: 3
brightness: 0.5
secondBlurAmount: 2.1
secondBrightness: 0.17

How It Works

The burned effect is achieved using SVG filters:

  1. Gaussian Blur: Creates a soft shadow around the text
  2. Offset: Positions the shadow for depth
  3. Component Transfer: Applies color transformations to create the burned appearance
  4. Merge: Combines the original text with the filtered shadow

This creates a realistic burned text effect that can be customized for different use cases.