# Shape

The M3 shape system includes original shapes, a corner radius scale, and built-in shape morphing. Thanks to [@dariadororoshchuk](https://www.figma.com/@dariadoroshchuk) for all 35 svg files and [@KTibow](https://github.com/KTibow) for the loading indicator svg file.

## Element

```html
<div class="shape">...</div>

<...>
  <div class="shape max">...</div>
</...>
```

## Most used helpers

**Animations**

rotate, slow-rotate, fast-rotate 

**Sizes**

tiny, small, medium, large, extra, max

**Spaces**

space, tiny-space, small-space, medium-space, large-space, extra-space

**SVGs**

arch, arrow, boom, bun, burst, circle, clamshell, diamond, fan, flower, gem, ghost-ish, heart, leaf-clover4, leaft-clover8, loading-indicator, oval, pentagon, pill, pixel-circle, pixel-triangle, puffy, puffy-diamond, semicircle, sided-cookie4, sided-cookie6, sided-cookie7, sided-cookie9, sided-cookie12, slanted, soft-boom, soft-burst, square, sunny, triangle, very-sunny

## Example

You can use shapes inside circle and square containers. Use `space` helpers to adjust the shape inside container.

```html
<div class="shape sunny"></div>

<div class="shape sunny">
  <img class="responsive" src="/favicon.png">
</div>

<div class="small-width small-height">
  <div class="shape sunny max"></div>
</div>
```

## Go to

[Begin](INDEX.md), [Elements](ELEMENTS.md), [Helpers](HELPERS.md), [Settings](SETTINGS.md), [Summary](SUMMARY.md), [Javascript](JAVASCRIPT.md), [beercss.com](https://www.beercss.com)

[Badge](BADGE.md), [Button](BUTTON.md), [Card](CARD.md), [Checkbox](CHECKBOX.md), [Chip](CHIP.md), [Container](CONTAINER.md), [Dialog](DIALOG.md), [Divider](DIVIDER.md), [Expansion](EXPANSION.md), [Grid](GRID.md), [Icon](ICON.md), [Input](INPUT.md), [Layout](LAYOUT.md), [List](LIST.md), [Main layout](MAIN_LAYOUT.md), [Media](MEDIA.md), [Menu](MENU.md), [Navigation](NAVIGATION.md), [Overlay](OVERLAY.md), [Page](PAGE.md), [Progress](PROGRESS.md), [Radio](RADIO.md), [Select](SELECT.md), [Shape](SHAPE.md), [Slider](SLIDER.md), [Snackbar](SNACKBAR.md), [Switch](SWITCH.md), [Table](TABLE.md), [Tabs](TABS.md), [Textarea](TEXTAREA.md), [Tooltip](TOOLTIP.md), [Typography](TYPOGRAPHY.md)