Clip-path Maker is an interactive tool that allows users to create and modify clip-path shapes by dragging handles on a visual interface. The tool generates clip-path polygons that can be applied to elements using CSS. Users can add, remove, and adjust handles to customize the shape.
- Interactive Handles: Drag handles to adjust the clip-path points visually.
- Add New Handles: Right-click on an existing handle to add a new point after the clicked handle.
- Delete Handles: Left-click and delete handles to remove a point from the shape.
- Dynamic Shape Updates: As you drag, add, or delete handles, the clip-path polygon is updated and applied instantly.
- Responsive Design: The tool is designed to adapt to different screen sizes.
-
Clone the repository:
git clone https://github.com/ManolisMariakakis/Clip-path-Maker-by-Drag-Drop
-
Include the project files in your web project:
ClipPathDragMaker.jsClipPathDragMaker.cssindex.html(optional for basic usage)
-
Include the necessary JavaScript file in your HTML:
<script src="ClipPathDragMaker.js" defer></script>
-
Add an empty
.clipboxdiv and a.clippathcode element:<div class="clipbox"></div> <code class="clippath"></code>
-
Initialize the
ClipPathMakerin your JavaScript:window.onload = function () { var clipPathMaker = new ClipPathMaker('.clipbox', '.clippath'); var coords = [ [20, 0], [80, 0], [100, 20], [100, 80], [80, 100], [20, 100], [0, 80], [0, 20], ]; clipPathMaker.makeShape(coords); };
- Drag Handles: Click and drag handles to adjust their positions. The corresponding
clip-pathvalues are automatically updated. - Right-click to Add Handle: Right-click on any handle to add a new handle next to it. The new handle will be positioned with a slight offset from the original point.
- Delete Handle: Left-click on any handle to bring up the delete button. Clicking the delete button will remove that handle and update the clip-path.
Here's a simple example that creates a polygon shape:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clip-path Maker by Drag/Drop</title>
<script src="ClipPathDragMaker.js" defer></script>
</head>
<body>
<div class="clipbox"></div>
<code class="clippath"></code>
<script>
window.onload = function () {
var clipPathMaker = new ClipPathMaker('.clipbox', '.clippath');
var coords = [
[20, 0],
[80, 0],
[100, 20],
[100, 80],
[80, 100],
[20, 100],
[0, 80],
[0, 20],
];
clipPathMaker.makeShape(coords);
};
</script>
</body>
</html>- Modify the Initial Shape: Adjust the
coordsarray to create different shapes according to your needs. - Styling: If you wish to customize the appearance beyond the default styles, you can modify the
ClipPathDragMaker.cssfile. Note that since the CSS is dynamically loaded by the JavaScript, you'll need to ensure your custom styles are applied correctly.
- ClipPathDragMaker.js: Contains the main JavaScript logic to create and manage the clip-path shapes and handle dragging events. It also dynamically appends the CSS file to the document.
- index.html: Basic HTML setup to demonstrate the tool.
- ClipPathDragMaker.css: CSS file for customizing styles if needed.