---
title: "Mask path animated icon"
description: "Mask path animated icon (Motion design). A mask is reshaped by dragging one of its vertices. Light: the right vertex is grabbed (it swells) and dragged out, and the mask boundary stretches with it into a new shape; on release it snaps back past its place, denting the mask a little, and settles. Strong: the vertex is first pushed in, then dragged farther out so the mask bulges wider, and the release springs back through decaying swings. The frame and the other vertices never move."
canonical: https://generativeicons.com/icons/mask-path/
---

# Mask path animated icon

A mask is reshaped by dragging one of its vertices. Light: the right vertex is grabbed (it swells) and dragged out, and the mask boundary stretches with it into a new shape; on release it snaps back past its place, denting the mask a little, and settles. Strong: the vertex is first pushed in, then dragged farther out so the mask bulges wider, and the release springs back through decaying swings. The frame and the other vertices never move.

- Id: `mask-path`
- Category: Motion design
- Search terms: clipping mask, clip path, clipping path, vector mask, layer mask, edit mask, mask vertex, reshape mask, rotoscope, cut out
- One action, back to rest
- Styles: outline, solid, duotone; outline weights 1.5, 2, 2.5 (any from 1 to 3); motion light or strong
- File: https://generativeicons.com/assets/mask-path.lottie (dotLottie, 4620 bytes, sha256 dd0d6d0c005edaaa077aa0471631046d2e478cc6f495e442190c026d1a5509ef)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add mask-path
```

## React

```tsx
// npm install @lottiefiles/generative-icons-react
'use client';
import { AnimatedIcon } from '@lottiefiles/generative-icons-react';
import icon, { src } from './generative-icons/mask-path.mjs';

export function MaskPathIcon() {
  return <AnimatedIcon icon={icon} src={src} size={32}
    color="#ffffff" variant="outline" weight={2}
    motion="light" theme="dark" />;
}
```

## JavaScript

```js
import { createIcon } from '@lottiefiles/generative-icons-runtime';
import icon, { src } from './generative-icons/mask-path.mjs';

const handle = await createIcon(canvas, {
  icon, src,
  color: '#ffffff', style: 'outline', weight: 2,
  motion: 'light', theme: 'dark'
});
button.addEventListener('click', () => handle.play());
// On removal: handle.destroy();
```

More: https://generativeicons.com/icons/mask-path/ · https://generativeicons.com/api/icons/mask-path