BrutalShape

A neo-brutalist decorative totem library rendered as inline SVG, providing corner stickers, seal badges and HUD calibration visuals for host elements such as cards, headings and buttons. All shapes inherit fill/stroke injected at the root and reference semantic tokens by default, staying in sync with theme presets and dark mode automatically.

Preview

Preview

五类图腾总览

爆炸多角星 Burst

工业图章 Seal

HUD 标定十字 Crosshair

8-Bit 像素 Pixel

符号图腾 Glyph

尺寸与配色定制

压角贴纸装饰（配合绝对定位）

Limited Edition

图腾作为装饰性 SVG 默认对读屏隐藏（decorative），可自由叠加在卡片、标题或按钮上， pointer-events 已禁用，不会干扰宿主交互。

Installation

pnpm dlx brutx-vue@latest add brutal-shape

Usage

Basic Totem

Pick a shape via name and control the rendered edge length (px) with size.

<script setup>
import { BrutalShape } from 'brutx-ui-vue'
</script>

<template>
    <BrutalShape name="star-8" :size="44" />
</template>

Color & Stroke Customization

color and stroke accept any CSS color value. Setting color to transparent with a thicker strokeWidth yields an outline variant.

<template>
    <!-- Solid fill + hard stroke -->
    <BrutalShape name="lightning" :size="48" color="var(--brutal-primary)" stroke="var(--brutal-primary)" />

    <!-- Outline variant -->
    <BrutalShape name="diamond" :size="48" color="transparent" stroke="var(--brutal-fg)" :stroke-width="6" />
</template>

Corner Sticker

Combine with absolute positioning for a sticker-over-corner effect. The root already declares pointer-events-none, so host interactions stay untouched.

<template>
    <div class="relative border-3 border-brutal p-6">
        <BrutalShape
            name="seal-badge"
            :size="52"
            class="absolute -right-4 -top-4 rotate-12"
        />
        <h4>Limited Edition</h4>
    </div>
</template>

Shape Catalog

Category	Names
Burst Stars	star-4 · star-5 · star-6 · star-8 · star-12 · star-16
Industrial Seals	seal-saw-16 · seal-cog-8 · seal-scallop-8 · seal-badge
Crosshairs	crosshair-plus · crosshair-target · crosshair-corner
Pixel Icons	pixel-burst · pixel-heart · pixel-spark
Glyphs	lightning · heart · skull · thumb · diamond

Unknown names are skipped with a console warning.

API Reference

BrutalShape — Props

Name	Type	Default	Description
name Required	string	—	The shape name from the catalog in this guide. Unknown names skip SVG rendering and produce a warning.
Details Declared type string Default value details Not declared — Source BrutalShape.vue:9 packages/ui/src/components/brutal-shape/BrutalShape.vue
size	string | number | undefined	32	Sets both SVG width and height. Numbers are interpreted as pixels; strings are passed directly to the SVG dimensions.
Details Declared type string | number | undefined Default value details Declaration 32 Source: packages/ui/src/components/brutal-shape/BrutalShape.vue Resolved value 32 Source BrutalShape.vue:11 packages/ui/src/components/brutal-shape/BrutalShape.vue
color	string | undefined	"var(--brutal-accent, #FFE66D)"	The SVG fill color. By default it uses the accent semantic token and follows the theme.
Details Declared type string | undefined Default value details Declaration 'var(--brutal-accent, #FFE66D)' Source: packages/ui/src/components/brutal-shape/BrutalShape.vue Resolved value "var(--brutal-accent, #FFE66D)" Source BrutalShape.vue:13 packages/ui/src/components/brutal-shape/BrutalShape.vue
stroke	string | undefined	"var(--brutal-fg, #000000)"	The SVG stroke color, using the foreground semantic token by default.
Details Declared type string | undefined Default value details Declaration 'var(--brutal-fg, #000000)' Source: packages/ui/src/components/brutal-shape/BrutalShape.vue Resolved value "var(--brutal-fg, #000000)" Source BrutalShape.vue:15 packages/ui/src/components/brutal-shape/BrutalShape.vue
strokeWidth	string | number | undefined	3	The SVG stroke width in the 100-unit viewBox coordinate system.
Details Declared type string | number | undefined Default value details Declaration 3 Source: packages/ui/src/components/brutal-shape/BrutalShape.vue Resolved value 3 Source BrutalShape.vue:17 packages/ui/src/components/brutal-shape/BrutalShape.vue
decorative	boolean | undefined	true	Hides the shape from assistive technology through aria-hidden when true. Set it to false for semantic use and provide a text alternative on the parent.
Details Declared type boolean | undefined Literal values false true Default value details Declaration true Source: packages/ui/src/components/brutal-shape/BrutalShape.vue Resolved value true Source BrutalShape.vue:19 packages/ui/src/components/brutal-shape/BrutalShape.vue
class	string | undefined	undefined	Custom CSS classes merged onto the SVG root, for example for rotation or positioning.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/brutal-shape/BrutalShape.vue Resolved value undefined Source BrutalShape.vue:21 packages/ui/src/components/brutal-shape/BrutalShape.vue

Accessibility

• Decorative semantics: hidden from screen readers by default via decorative; pass :decorative="false" when the shape conveys meaning and provide a text alternative on the parent.
• Interaction transparency: the root is pointer-events-none; hover/click events fully fall through to the host element.
• Motion agnostic: the component renders static vector graphics; rotation/scaling transforms are controlled by consumers and respect the global reduced-motion policy.