import CodeRender from '../../CodeRender'

### Squircle

<CodeRender code={`
<img alt="Squircle CSS mask" class="mask mask-squircle w-40 h-40" src="/pig.jpg" />

`} />
  
```html
<img alt="Squircle CSS mask" class="mask mask-squircle w-40 h-40" src="/pig.jpg" />

```
### Heart

<CodeRender code={`
<img alt="Heart CSS mask" class="mask mask-heart w-40 h-40" src="/pig.jpg" />

`} />
  
```html
<img alt="Heart CSS mask" class="mask mask-heart w-40 h-40" src="/pig.jpg" />

```
### Hexagon

<CodeRender code={`
<img alt="Hexagon CSS mask" class="mask mask-hexagon w-40 h-40" src="/pig.jpg" />

`} />
  
```html
<img alt="Hexagon CSS mask" class="mask mask-hexagon w-40 h-40" src="/pig.jpg" />

```
### Hexagon-2

<CodeRender code={`
<img alt="Hexagon-2 CSS mask" class="mask mask-hexagon-2 w-40 h-40" src="/pig.jpg" />

`} />
  
```html
<img alt="Hexagon-2 CSS mask" class="mask mask-hexagon-2 w-40 h-40" src="/pig.jpg" />

```
### Decagon

<CodeRender code={`
<img alt="Decagon CSS mask" class="mask mask-decagon w-40 h-40" src="/pig.jpg" />

`} />
  
```html
<img alt="Decagon CSS mask" class="mask mask-decagon w-40 h-40" src="/pig.jpg" />

```
### Pentagon

<CodeRender code={`
<img alt="Pentagon CSS mask" class="mask mask-pentagon w-40 h-40" src="/pig.jpg" />

`} />
  
```html
<img alt="Pentagon CSS mask" class="mask mask-pentagon w-40 h-40" src="/pig.jpg" />

```
### Diamond

<CodeRender code={`
<img alt="Diamond CSS mask" class="mask mask-diamond w-40 h-40" src="/pig.jpg" />

`} />
  
```html
<img alt="Diamond CSS mask" class="mask mask-diamond w-40 h-40" src="/pig.jpg" />

```
### Square

<CodeRender code={`
<img alt="Square CSS mask" class="mask mask-square w-40 h-40" src="/pig.jpg" />

`} />
  
```html
<img alt="Square CSS mask" class="mask mask-square w-40 h-40" src="/pig.jpg" />

```
### Circle

<CodeRender code={`
<img alt="Circle CSS mask" class="mask mask-circle w-40 h-40" src="/pig.jpg" />

`} />
  
```html
<img alt="Circle CSS mask" class="mask mask-circle w-40 h-40" src="/pig.jpg" />

```
### Parallelogram

<CodeRender code={`
<img alt="Parallelogram CSS mask" class="mask mask-parallelogram w-40 h-40" src="/pig.jpg" />

`} />
  
```html
<img alt="Parallelogram CSS mask" class="mask mask-parallelogram w-40 h-40" src="/pig.jpg" />

```
### Parallelogram-2

<CodeRender code={`
<img alt="Parallelogram-2 CSS mask" class="mask mask-parallelogram-2 w-40 h-40" src="/pig.jpg" />

`} />
  
```html
<img alt="Parallelogram-2 CSS mask" class="mask mask-parallelogram-2 w-40 h-40" src="/pig.jpg" />

```
### Parallelogram-3

<CodeRender code={`
<img alt="Parallelogram-3 CSS mask" class="mask mask-parallelogram-3 w-40 h-40" src="/pig.jpg" />

`} />
  
```html
<img alt="Parallelogram-3 CSS mask" class="mask mask-parallelogram-3 w-40 h-40" src="/pig.jpg" />

```
### Parallelogram-4

<CodeRender code={`
<img alt="Parallelogram-4 CSS mask" class="mask mask-parallelogram-4 w-40 h-40" src="/pig.jpg" />

`} />
  
```html
<img alt="Parallelogram-4 CSS mask" class="mask mask-parallelogram-4 w-40 h-40" src="/pig.jpg" />

```
### Star

<CodeRender code={`
<img alt="Star CSS mask" class="mask mask-star w-40 h-40" src="/pig.jpg" />

`} />
  
```html
<img alt="Star CSS mask" class="mask mask-star w-40 h-40" src="/pig.jpg" />

```
### Star-2

<CodeRender code={`
<img alt="Star-2 CSS mask" class="mask mask-star-2 w-40 h-40" src="/pig.jpg" />

`} />
  
```html
<img alt="Star-2 CSS mask" class="mask mask-star-2 w-40 h-40" src="/pig.jpg" />

```
### Triangle

<CodeRender code={`
<img alt="Triangle CSS mask" class="mask mask-triangle w-40 h-40" src="/pig.jpg" />

`} />
  
```html
<img alt="Triangle CSS mask" class="mask mask-triangle w-40 h-40" src="/pig.jpg" />

```
### Triangle-2

<CodeRender code={`
<img alt="Triangle-2 CSS mask" class="mask mask-triangle-2 w-40 h-40" src="/pig.jpg" />

`} />
  
```html
<img alt="Triangle-2 CSS mask" class="mask mask-triangle-2 w-40 h-40" src="/pig.jpg" />

```
### Triangle-3

<CodeRender code={`
<img alt="Triangle-3 CSS mask" class="mask mask-triangle-3 w-40 h-40" src="/pig.jpg" />

`} />
  
```html
<img alt="Triangle-3 CSS mask" class="mask mask-triangle-3 w-40 h-40" src="/pig.jpg" />

```
### Triangle-4

<CodeRender code={`
<img alt="Triangle-4 CSS mask" class="mask mask-triangle-4 w-40 h-40" src="/pig.jpg" />

`} />
  
```html
<img alt="Triangle-4 CSS mask" class="mask mask-triangle-4 w-40 h-40" src="/pig.jpg" />

```   

    