Raw Edge

A customizable HTML element that provides a "wiggly" or "raw" edge effect to elements.

Features

• Creates a dynamic, wiggly edge effect on any block-level or inline HTML element, including sharp, V-shaped tears.
• Customizable appearance through data attributes (color, stroke, animation speed, etc.).
• Animated edge effect on hover and focus-within.
• Responsive and redraws the edge on element resize.
• Built with vanilla JavaScript and GSAP for animations.
• Can be used as an ES Module or directly in the browser.

Getting Started

Installation

You can install raw-edge using either npm or yarn:

npm install raw-edge

yarn add raw-edge

ES Module Usage

To use the custom elements, you must first import and call the register function. This will define the <raw-edge-container> and <raw-edge-inline> custom elements.

import { register } from 'raw-edge';

// Register the custom elements
register();

// Now you can use the elements in your HTML, or create them programmatically
const myRawEdgeContainer = document.createElement('raw-edge-container');

// Set its properties (attributes)
myRawEdgeContainer.pointSpacing = 15;
myRawEdgeContainer.curveDepth = 10;
myRawEdgeContainer.fillColor = 'purple';
myRawEdgeContainer.strokeColor = 'darkblue';
myRawEdgeContainer.strokeWidth = 3;
myRawEdgeContainer.useHover = true;

// Append it to the DOM
document.body.appendChild(myRawEdgeContainer);

Browser Usage

You can also use raw-edge directly in the browser by including the UMD file from a CDN like JSDelivr. This will expose a global RawEdge object.

<script src="https://cdn.jsdelivr.net/npm/raw-edge/dist/raw-edge.umd.js"></script>
<script>
  // Register the custom elements
  RawEdge.register();
</script>

Components

<raw-edge-container>

A block-level element that applies the raw edge effect to its children.

<raw-edge-inline>

An inline element that applies the raw edge effect to its content.

Configuration

The <raw-edge-container> and <raw-edge-inline> elements can be customized using the following HTML attributes:

| Attribute | Description | Default | | --- | --- | --- | | namespace | A namespace for the generated SVG and classes. | raw-edge | | stroke-color | The color of the edge's stroke. | pink | | fill-color| The fill color of the shape. | pink | | stroke-width | The width of the edge's stroke. | 0 | | transition | The CSS transition property for fill and stroke color changes. | fill 0.3s ease-out, stroke-color 0.3s ease-out | | point-spacing| The spacing between points on the edge. | 25 | | curve-depth | The depth or "waviness" of the edge. | 15 | | defs-count | The number of alternate paths for the hover animation. | 5 | | use-hover | Enable the hover animation. | false | | use-focus-within | Enable the animation on focus-within. | false | | use-resize | Enable redrawing on resize. | true | | speed | The speed of the hover animation. | 1 | | tear-frequency | The probability (0 to 1) of a tear appearing on an edge segment. | 0 | | tear-min-depth | The minimum depth (in pixels) of a tear. | 0 | | tear-max-depth | The maximum depth (in pixels) of a tear. | 0 | | tear-min-width | The minimum width (in pixels) of a tear. | 0 | | tear-max-width | The maximum width (in pixels) of a tear. | 0 | | fill-image | URL to an image to use as the fill for the shape. | null | | overlay-gradient | A JSON string defining a radial gradient overlay. | null | | overlay-gradient-blend | The blend mode for the overlay gradient (e.g., 'multiply', 'screen', 'overlay'). | normal | | randomize-path-flip | Randomly flips or rotates the SVG path to create visual variety between instances. | false | | fill-parent | Positions the container absolutely to fill its relative parent. | false |

Note: For boolean attributes like use-hover, use-focus-within, use-resize, randomize-path-flip, and fill-parent, the presence of the attribute sets the value to true.

Example:

<raw-edge-container
  point-spacing="30"
  curve-depth="5"
  fill-color="lightcoral"
  stroke-color="darkred"
  stroke-width="3">
  <div>
    <h2>A Custom Edged Box</h2>
    <p>This box demonstrates the tear feature with high frequency and depth.</p>
  </div>
</raw-edge-container>

<raw-edge-container
  point-spacing="30"
  curve-depth="5"
  fill-color="lightcoral"
  stroke-color="darkred"
  stroke-width="3"
  tear-frequency="0.2"
  tear-min-depth="5"
  tear-max-depth="20"
  tear-min-width="3"
  tear-max-width="15">
  <div>
    <h2>A Custom Edged Box + Tears</h2>
    <p>This box demonstrates the tear feature with high frequency and depth.</p>
  </div>
</raw-edge-container>

<raw-edge-container
  style="border-radius: 20px;"
  fill-image="/texture.jpg"
  tear-frequency="0.2"
  tear-min-depth="2"
  tear-max-depth="30"
  tear-min-width="4"
  tear-max-width="10"
  fill-color="lightcoral"
  overlay-gradient='{"cx": "50%", "cy": "50%", "r": "50%", "fx": "50%", "fy": "50%", "opacity": 0.3, "stops": [{"offset": "0%", "stop-color": "#F8F2E5"}, {"offset": "100%", "stop-color": "#E4C396"}]}'
  overlay-gradient-blend="multiply">
  <div>
    <h2>Container with Image, Gradient Overlay, and Blend Mode</h2>
    <p>This box demonstrates an image fill with a radial gradient overlay set to 'multiply' blend mode.</p>
  </div>
</raw-edge-container>

Here's an example of how we might do a button with an outline:

<style>
  :root {
    --color-fill: pink;
    --color-border: lightcoral;
    --button-stroke-width: 3;
    --button-radius: 42px;
    --box-padding: 40px;
  }
</style>

<raw-edge-inline style="border-radius: var(--button-radius);" use-hover="true" use-focus-within="true" fill-color="var(--color-fill)" stroke-color="var(--color-border)" stroke-width="var(--button-stroke-width)">
  <button>
    <span>Hover or focus me!</span>
  </button>
</raw-edge-inline>

Using CSS Variables for Colors

You can use CSS variables for fill-color, stroke-color, and stroke-width to easily manage your styles.

Example:

:root {
  --color-fill: pink;
  --color-border: lightcoral;
  --stroke-width: 4;
}

Then, in your HTML:

<raw-edge-container
  point-spacing="10"
  curve-depth="5"
  fill-color="var(--color-fill)"
  stroke-color="var(--color-border)"
  stroke-width="var(--stroke-width)">
  <div>
    <h2>A Custom Edged Box</h2>
  </div>
</raw-edge-container>