On this page Shape Shape

The m3e-shape component allows you to use abstract shapes thoughtfully to add emphasis and decorative flair, including built-in shape morphing.

Installation 
npm i @m3e/shape
 Usage

This section outlines usage examples and configuration guidance for the components in this package.

Shapes

The m3e-shape allows you to easily use shapes from the Material Design 3 Shape Library to to add emphasis and decorative flair.

It supports 31 shapes, specified using the name attribute: 4-leaf-clover 4-sided-cookie, 6-sided-cookie, 7-sided-cookie, 8-leaf-clover, 9-sided-cookie, 12-sided-cookie, arch, arrow, boom, bun, burst, circle, diamond, fan, flower, gem, ghost-ish, heart, hexagon, oval, pentagon, pill, pixel-circle, pixel-triangle, puffy, puffy-diamond, semicircle, slanted, soft-boom, soft-burst, square, sunny, triangle, and very-sunny. 





<m3e-shape name="12-sided-cookie"></m3e-shape>
<m3e-shape name="9-sided-cookie"></m3e-shape>
<m3e-shape name="8-leaf-clover"></m3e-shape>
<m3e-shape name="7-sided-cookie"></m3e-shape>
<m3e-shape name="6-sided-cookie"></m3e-shape>
<m3e-shape name="4-sided-cookie"></m3e-shape>
<m3e-shape name="4-leaf-clover"></m3e-shape>
<br />
<m3e-shape name="arch"></m3e-shape>
<m3e-shape name="arrow"></m3e-shape>
<m3e-shape name="boom"></m3e-shape>
<m3e-shape name="bun"></m3e-shape>
<m3e-shape name="diamond"></m3e-shape>
<m3e-shape name="fan"></m3e-shape>
<m3e-shape name="flower"></m3e-shape>
<br />
<m3e-shape name="gem"></m3e-shape>
<m3e-shape name="ghost-ish"></m3e-shape>
<m3e-shape name="heart"></m3e-shape>
<m3e-shape name="hexagon"></m3e-shape>
<m3e-shape name="pentagon"></m3e-shape>
<m3e-shape name="pill"></m3e-shape>
<m3e-shape name="pixel-circle"></m3e-shape>
<br />
<m3e-shape name="pixel-triangle"></m3e-shape>
<m3e-shape name="puffy"></m3e-shape>
<m3e-shape name="puffy-diamond"></m3e-shape>
<m3e-shape name="semicircle"></m3e-shape>
<m3e-shape name="slanted"></m3e-shape>
<m3e-shape name="soft-boom"></m3e-shape>
<m3e-shape name="soft-burst"></m3e-shape>
<br />
<m3e-shape name="square"></m3e-shape>
<m3e-shape name="circle"></m3e-shape>
<m3e-shape name="triangle"></m3e-shape>
 Images and video

Nest images or videos inside a m3e-shape to clip them using the shape.

 
<m3e-shape name="sunny">
  <img src="https://www.shutterstock.com/shutterstock/videos/1006393/thumb/1.jpg?ip=x480" />
</m3e-shape>
<m3e-shape name="sunny">
  <video
    autoplay
    loop
    poster="https://www.shutterstock.com/shutterstock/videos/1006393/thumb/1.jpg?ip=x480"
    preload="auto"
  >
    <source
      src="https://www.shutterstock.com/shutterstock/videos/1006393/preview/stock-footage-business-people-working-in-office.webm"
      type="video/webm"
    />
    <source
      src="https://www.shutterstock.com/shutterstock/videos/1006393/preview/stock-footage-business-people-working-in-office.mp4"
      type="video/mp4"
    />
  </video>
</m3e-shape>
 Morphing

All shape paths are normalized to the same number of points allowing shapes to be morphed using CSS clip-path transitions.


Accessibility

By default, shapes are not given an ARIA role, indicating that they are treated as neutral, non-semantic elements in the accessibility tree unless explicitly referenced or annotated.

Native module support

This package uses JavaScript Modules. To use it directly in a browser without a bundler, use a module script similar to the following. 

<script type="module" src="/node_modules/@m3e/shape/dist/index.js"></script>

In addition, you must use an import map to include dependencies. 

<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "@m3e/core": "/node_modules/@m3e/core/dist/index.js"
    }
  }
</script>

For production, use index.min.js for faster load times.

API

This package includes a Custom Elements Manifest (custom-elements.json), which documents the properties, attributes, slots, events and CSS custom properties of each component.

You can explore the API below, or integrate the manifest into your own tooling.