Skip to content

Latest commit

 

History

History
57 lines (43 loc) · 1.84 KB

README.md

File metadata and controls

57 lines (43 loc) · 1.84 KB
Raw

Clip Path Cutout Generator

This project provides a TypeScript function to generate a clip-path CSS property value for creating circular cutouts in HTML elements. Other shapes like triangles, square, octagons, etc. are supported by lowering the precision parameter to below 32.

For example, a precision value of 4 will generate a triangle cutout. Increasing the precision to 5 adds a side to the shape, getting you a square cutout.

Features

  • Generate a clip-path polygon for circular cutouts
  • Customizable parameters for precise control
  • Option to apply the generated clip-path directly to an HTML element
  • Written in TypeScript for type safety

Usage

The clipPathCutout function accepts an object with the following optional parameters:

  • precision: Number of points to use for the circle approximation (default: 128)
  • diameter: Diameter of the circular cutout in percentage (default: 50)
  • rotation: Rotation of the cutout in degrees (default: 0)
  • offsetX: Horizontal offset of the cutout center in percentage (default: 0)
  • offsetY: Vertical offset of the cutout center in percentage (default: 0)
  • stretchX: Horizontal stretch factor (default: 1)
  • stretchY: Vertical stretch factor (default: 1)
  • element: HTMLElement to apply the clip-path to (optional)

Example

// Generate a clip-path string for use in CSS or as an HTML `style` attribute
const clipPath = clipPathCutout({
	diameter: 60,
	rotation: 45,
	offsetX: 10,
	offsetY: -5,
	stretchX: 1.2,
	stretchY: 0.8
})
console.log(clipPath)

// Apply to an HTML element
const element = document.getElementById('my-element')
clipPathCutout({
	diameter: 70,
	element: element
})

Installation

  1. Clone this repository
  2. Install dependencies (if any) using npm install
  3. Import the clipPathCutout function from index.ts in your project

License

MIT