# Bento Tile Bento2 Tile 1 - Stats overview bar chart

> Isolated stats overview bar chart tile with scroll-triggered entrance motion.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/bento-tile-bento2-tile1).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/bento-tile-bento2-tile1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/bento-tile-bento2-tile1-light-1e60d762f4419ab5.png
- Registry item: https://shadcnblocks.com/r/bento-tile-bento2-tile1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/bento-tile-bento2-tile1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `motion`

## Files

### `example/bento-tile/bento2-tile1.tsx`

```tsx
"use client";

import { Bento2Tile1 } from "@/components/shadcnblocks/bento-tile/bento2-tile1";

export const title = "Bento 2 tile 1";

const Example = () => (
  <div className="w-full max-w-2xl overflow-hidden rounded-xl border border-border bg-card p-6">
    <div className="min-h-80">
      <Bento2Tile1 />
    </div>
  </div>
);

export default Example;
```

### `components/shadcnblocks/bento-tile/bento2-tile1.tsx`

```tsx
"use client";

import { motion } from "motion/react";

interface Segment {
  id: string;
  d: string;
}

const segmentColors = ["fill-chart-1", "fill-chart-2", "fill-chart-3"] as const;

interface Month {
  id: string;
  segments: [Segment, Segment, Segment];
}

const months: Month[] = [
  {
    id: "jan-line",
    segments: [
      {
        id: "jan1",
        d: "m20.04 161.93c1.11 0 2.01 0.9 2.01 2.01v11.36c0 1.1-0.9 2-2.01 2-1.1 0-2-0.9-2-2v-11.36c0-1.11 0.9-2.01 2-2.01z",
      },
      {
        id: "jan2",
        d: "m20.04 142.56c1.11 0 2.01 0.89 2.01 2v10.02c0 1.11-0.9 2.01-2.01 2.01-1.1 0-2-0.9-2-2.01v-10.02c0-1.11 0.9-2 2-2z",
      },
      {
        id: "jan3",
        d: "m20.04 120.51c1.11 0 2.01 0.89 2.01 2v12.7c0 1.1-0.9 2-2.01 2-1.1 0-2-0.9-2-2v-12.7c0-1.11 0.9-2 2-2z",
      },
    ],
  },
  {
    id: "feb-line",
    segments: [
      {
        id: "feb1",
        d: "m48.92 139.21c1.11 0 2.01 0.9 2.01 2.01v34.07c0 1.11-0.9 2.01-2.01 2.01-1.1 0-2-0.9-2-2.01v-34.07c0-1.11 0.9-2.01 2-2.01z",
      },
      {
        id: "feb2",
        d: "m48.92 119.84c1.11 0 2.01 0.9 2.01 2v10.02c0 1.11-0.9 2.01-2.01 2.01-1.1 0-2-0.9-2-2.01v-10.02c0-1.1 0.9-2 2-2z",
      },
      {
        id: "feb3",
        d: "m48.92 97.79c1.11 0 2.01 0.9 2.01 2v12.7c0 1.11-0.9 2-2.01 2-1.1 0-2-0.89-2-2v-12.7c0-1.1 0.9-2 2-2z",
      },
    ],
  },
  {
    id: "mar-line",
    segments: [
      {
        id: "mar1",
        d: "m77.8 120.51c1.11 0 2.01 0.89 2.01 2v52.78c0 1.11-0.9 2.01-2.01 2.01-1.1 0-2-0.9-2-2.01v-52.78c0-1.11 0.9-2 2-2z",
      },
      {
        id: "mar2",
        d: "m77.8 87.1c1.11 0 2.01 0.9 2.01 2v24.06c0 1.1-0.9 2-2.01 2-1.1 0-2-0.9-2-2v-24.06c0-1.1 0.9-2 2-2z",
      },
      {
        id: "mar3",
        d: "m77.8 73.74c1.11 0 2.01 0.89 2.01 2v4.01c0 1.11-0.9 2-2.01 2-1.1 0-2-0.89-2-2v-4.01c0-1.11 0.9-2 2-2z",
      },
    ],
  },
  {
    id: "apr-line",
    segments: [
      {
        id: "apr1",
        d: "m106.68 156.59c1.11 0 2.01 0.89 2.01 2v16.7c0 1.11-0.9 2.01-2.01 2.01-1.11 0-2-0.9-2-2.01v-16.7c0-1.11 0.89-2 2-2z",
      },
      {
        id: "apr2",
        d: "m106.68 112.49c1.11 0 2.01 0.9 2.01 2v34.75c0 1.1-0.9 2-2.01 2-1.11 0-2-0.9-2-2v-34.75c0-1.1 0.89-2 2-2z",
      },
      {
        id: "apr3",
        d: "m106.68 71.73c1.11 0 2.01 0.9 2.01 2.01v31.4c0 1.11-0.9 2-2.01 2-1.11 0-2-0.89-2-2v-31.4c0-1.11 0.89-2.01 2-2.01z",
      },
    ],
  },
  {
    id: "may-line",
    segments: [
      {
        id: "may1",
        d: "m135.56 137.21c1.11 0 2 0.9 2 2v36.08c0 1.11-0.89 2.01-2 2.01-1.11 0-2-0.9-2-2.01v-36.08c0-1.1 0.89-2 2-2z",
      },
      {
        id: "may2",
        d: "m135.56 117.83c1.11 0 2 0.9 2 2.01v10.02c0 1.11-0.89 2.01-2 2.01-1.11 0-2-0.9-2-2.01v-10.02c0-1.11 0.89-2.01 2-2.01z",
      },
      {
        id: "may3",
        d: "m135.56 77.08c1.11 0 2 0.89 2 2v31.4c0 1.11-0.89 2.01-2 2.01-1.11 0-2-0.9-2-2.01v-31.4c0-1.11 0.89-2 2-2z",
      },
    ],
  },
  {
    id: "jun-line",
    segments: [
      {
        id: "jun1",
        d: "m164.44 135.21c1.11 0 2 0.89 2 2v38.09c0 1.1-0.89 2-2 2-1.11 0-2-0.9-2-2v-38.09c0-1.11 0.89-2 2-2z",
      },
      {
        id: "jun2",
        d: "m164.44 115.83c1.11 0 2 0.9 2 2v10.03c0 1.1-0.89 2-2 2-1.11 0-2-0.9-2-2v-10.03c0-1.1 0.89-2 2-2z",
      },
      {
        id: "jun3",
        d: "m164.44 93.78c1.11 0 2 0.9 2 2v12.7c0 1.11-0.89 2-2 2-1.11 0-2-0.89-2-2v-12.7c0-1.1 0.89-2 2-2z",
      },
    ],
  },
  {
    id: "jul-line",
    segments: [
      {
        id: "jul1",
        d: "m193.32 120.51c1.1 0 2 0.89 2 2v52.78c0 1.11-0.9 2.01-2 2.01-1.11 0-2.01-0.9-2.01-2.01v-52.78c0-1.11 0.9-2 2.01-2z",
      },
      {
        id: "jul2",
        d: "m193.32 87.1c1.1 0 2 0.9 2 2v24.06c0 1.1-0.9 2-2 2-1.11 0-2.01-0.9-2.01-2v-24.06c0-1.1 0.9-2 2.01-2z",
      },
      {
        id: "jul3",
        d: "m193.32 73.74c1.1 0 2 0.89 2 2v4.01c0 1.11-0.9 2-2 2-1.11 0-2.01-0.89-2.01-2v-4.01c0-1.11 0.9-2 2.01-2z",
      },
    ],
  },
  {
    id: "aug-line",
    segments: [
      {
        id: "aug1",
        d: "m222.2 120.51c1.1 0 2 0.89 2 2v52.78c0 1.11-0.9 2.01-2 2.01-1.11 0-2.01-0.9-2.01-2.01v-52.78c0-1.11 0.9-2 2.01-2z",
      },
      {
        id: "aug2",
        d: "m222.2 87.1c1.1 0 2 0.9 2 2v24.06c0 1.1-0.9 2-2 2-1.11 0-2.01-0.9-2.01-2v-24.06c0-1.1 0.9-2 2.01-2z",
      },
      {
        id: "aug3",
        d: "m222.2 73.74c1.1 0 2 0.89 2 2v4.01c0 1.11-0.9 2-2 2-1.11 0-2.01-0.89-2.01-2v-4.01c0-1.11 0.9-2 2.01-2z",
      },
    ],
  },
  {
    id: "sep-line",
    segments: [
      {
        id: "sep1",
        d: "m251.08 151.24c1.1 0 2 0.9 2 2.01v22.04c0 1.11-0.9 2.01-2 2.01-1.11 0-2.01-0.9-2.01-2.01v-22.04c0-1.11 0.9-2.01 2.01-2.01z",
      },
      {
        id: "sep2",
        d: "m251.08 131.87c1.1 0 2 0.89 2 2v10.02c0 1.11-0.9 2.01-2 2.01-1.11 0-2.01-0.9-2.01-2.01v-10.02c0-1.11 0.9-2 2.01-2z",
      },
      {
        id: "sep3",
        d: "m251.08 118.5c1.1 0 2 0.9 2 2.01v4.01c0 1.1-0.9 2-2 2-1.11 0-2.01-0.9-2.01-2v-4.01c0-1.11 0.9-2.01 2.01-2.01z",
      },
    ],
  },
  {
    id: "oct-line",
    segments: [
      {
        id: "oct1",
        d: "m279.95 139.21c1.11 0 2.01 0.9 2.01 2.01v34.07c0 1.11-0.9 2.01-2.01 2.01-1.1 0-2-0.9-2-2.01v-34.07c0-1.11 0.9-2.01 2-2.01z",
      },
      {
        id: "oct2",
        d: "m279.95 95.12c1.11 0 2.01 0.89 2.01 2v34.74c0 1.11-0.9 2.01-2.01 2.01-1.1 0-2-0.9-2-2.01v-34.74c0-1.11 0.9-2 2-2z",
      },
      {
        id: "oct3",
        d: "m279.95 73.07c1.11 0 2.01 0.89 2.01 2v12.7c0 1.1-0.9 2-2.01 2-1.1 0-2-0.9-2-2v-12.7c0-1.11 0.9-2 2-2z",
      },
    ],
  },
];

export function Bento2Tile1() {
  return (
    <svg
      viewBox="0 0 300 208"
      width="300"
      height="208"
      className="h-full w-full"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fillRule="evenodd"
        className="fill-muted/50"
        d="m5 0h290c2.76 0 5 2.24 5 5v197.35c0 2.76-2.24 4.99-5 4.99h-290c-2.76 0-5-2.23-5-4.99v-197.35c0-2.76 2.24-5 5-5z"
      />
      <path
        fillRule="evenodd"
        className="fill-chart-2"
        d="m25.37 21.38h0.04c5.15 0 9.33 4.18 9.33 9.34 0 5.15-4.18 9.33-9.33 9.33h-0.04c-5.15 0-9.33-4.18-9.33-9.33 0-5.16 4.18-9.34 9.33-9.34z"
      />
      <path
        className="fill-background"
        d="m25.37 27.29l-0.85 1.96h-0.84q-0.21 0-0.41 0.04l0.35-0.84 0.01-0.03 0.02-0.05q0.02-0.04 0.03-0.07c0.41-0.94 0.86-1.23 1.69-1.01z"
      />
      <path
        className="fill-background"
        d="m27.75 29.35h-0.01q-0.31-0.09-0.64-0.1h-2.19l0.78-1.82 0.02-0.03q0.07 0.03 0.15 0.06l0.78 0.33q0.64 0.26 0.91 0.58 0.05 0.06 0.09 0.13 0.05 0.07 0.07 0.15 0.02 0.05 0.03 0.09 0.08 0.27 0.01 0.61z"
      />
      <path
        className="fill-background"
        d="m25.57 32.69h0.09c0.11 0 0.19-0.09 0.19-0.21 0-0.14-0.04-0.16-0.13-0.2l-0.15-0.05z"
      />
      <path
        className="fill-background"
        d="m27.6 29.85q-0.24-0.07-0.5-0.07h-3.42q-0.36 0-0.68 0.14c-0.61 0.26-1.03 0.86-1.03 1.56v0.69q0 0.12 0.01 0.24 0.12 1.67 1.79 1.78 0.12 0.02 0.25 0.02h2.74q1.95 0 2.05-1.84 0-0.1 0.01-0.2v-0.69c0-0.77-0.52-1.42-1.22-1.63zm-1.76 2.09c0.16 0.05 0.38 0.17 0.38 0.54 0 0.32-0.25 0.58-0.56 0.58h-0.09v0.07c0 0.11-0.08 0.19-0.18 0.19-0.1 0-0.18-0.08-0.18-0.19v-0.07h-0.03c-0.34 0-0.62-0.29-0.62-0.64 0-0.1 0.08-0.18 0.18-0.18 0.11 0 0.19 0.08 0.19 0.18 0 0.15 0.11 0.27 0.25 0.27h0.03v-0.59l-0.27-0.09c-0.16-0.06-0.38-0.18-0.38-0.55 0-0.31 0.25-0.57 0.56-0.57h0.09v-0.08c0-0.1 0.08-0.18 0.18-0.18 0.1 0 0.18 0.08 0.18 0.18v0.08h0.03c0.34 0 0.62 0.28 0.62 0.63 0 0.1-0.08 0.18-0.18 0.18-0.11 0-0.19-0.08-0.19-0.18 0-0.14-0.11-0.27-0.25-0.27h-0.03v0.59z"
      />
      <path
        className="fill-background"
        d="m24.93 31.46c0 0.15 0.04 0.17 0.13 0.21l0.15 0.05v-0.47h-0.09c-0.11 0-0.19 0.1-0.19 0.21z"
      />
      <path
        className="fill-foreground"
        d="m46.22 34.38h-1.42v-7.3c-0.38 0.45-1.34 0.65-1.94 0.65h-0.31v-1.06c1.37-0.07 2.17-0.61 2.53-1.8h1.14zm4.97 0.13c-2.67 0-3.81-1.86-3.81-4.89 0-3.03 1.14-4.89 3.81-4.89 2.67 0 3.81 1.86 3.81 4.89 0 3.03-1.14 4.89-3.81 4.89zm0-1.15c1.54 0 2.39-1.12 2.39-3.74 0-2.62-0.85-3.74-2.39-3.74-1.54 0-2.39 1.12-2.39 3.74 0 2.62 0.85 3.74 2.39 3.74zm8.42 1.15c-2.67 0-3.81-1.86-3.81-4.89 0-3.03 1.14-4.89 3.81-4.89 2.67 0 3.81 1.86 3.81 4.89 0 3.03-1.14 4.89-3.81 4.89zm0-1.15c1.54 0 2.39-1.12 2.39-3.74 0-2.62-0.85-3.74-2.39-3.74-1.54 0-2.39 1.12-2.39 3.74 0 2.62 0.85 3.74 2.39 3.74zm5.45 1.11c-0.56 0-0.88-0.35-0.88-0.79 0-0.44 0.32-0.79 0.88-0.79 0.56 0 0.87 0.35 0.87 0.79 0 0.44-0.31 0.79-0.87 0.79zm5.46 0.04c-2.67 0-3.81-1.86-3.81-4.89 0-3.03 1.14-4.89 3.81-4.89 2.67 0 3.81 1.86 3.81 4.89 0 3.03-1.14 4.89-3.81 4.89zm0-1.15c1.53 0 2.39-1.12 2.39-3.74 0-2.62-0.86-3.74-2.39-3.74-1.54 0-2.39 1.12-2.39 3.74 0 2.62 0.85 3.74 2.39 3.74zm8.42 1.15c-2.68 0-3.81-1.86-3.81-4.89 0-3.03 1.13-4.89 3.81-4.89 2.67 0 3.8 1.86 3.8 4.89 0 3.03-1.13 4.89-3.8 4.89zm0-1.15c1.53 0 2.39-1.12 2.39-3.74 0-2.62-0.86-3.74-2.39-3.74-1.54 0-2.4 1.12-2.4 3.74 0 2.62 0.86 3.74 2.4 3.74zm8.41 1.15c-2.67 0-3.81-1.86-3.81-4.89 0-3.03 1.14-4.89 3.81-4.89 2.67 0 3.81 1.86 3.81 4.89 0 3.03-1.14 4.89-3.81 4.89zm0-1.15c1.54 0 2.39-1.12 2.39-3.74 0-2.62-0.85-3.74-2.39-3.74-1.53 0-2.39 1.12-2.39 3.74 0 2.62 0.86 3.74 2.39 3.74z"
      />
      <path
        className="fill-muted-foreground"
        d="m98.15 34.38h-0.69v-5.14h-1.82v-0.57h4.32v0.57h-1.81zm3.62 0.08c-1.27 0-1.98-0.82-1.98-2.15 0-1.32 0.71-2.15 1.98-2.15 1.28 0 1.99 0.83 1.99 2.15 0 1.33-0.71 2.15-1.99 2.15zm0-0.51c0.84 0 1.32-0.55 1.32-1.64 0-1.08-0.48-1.63-1.32-1.63-0.83 0-1.31 0.55-1.31 1.63 0 1.09 0.48 1.64 1.31 1.64zm4.05 0.47c-0.8 0-1.09-0.23-1.09-1v-2.69h-0.71v-0.49h0.71v-1.25h0.66v1.25h1v0.49h-1v2.71c0 0.4 0.14 0.49 0.56 0.49l0.44-0.01v0.46c-0.16 0.02-0.43 0.04-0.57 0.04zm2.51 0.04c-0.94 0-1.47-0.48-1.47-1.25 0-0.61 0.39-1.08 1.4-1.17l0.76-0.06c0.56-0.05 0.72-0.17 0.72-0.48 0-0.53-0.3-0.85-0.99-0.85q-0.95-0.01-1.02 0.85h-0.64c0-0.81 0.5-1.34 1.66-1.34 1.15 0 1.65 0.53 1.65 1.34v1.82q0.01 0.85 0.13 1.06h-0.58c-0.13-0.17-0.18-0.34-0.18-0.78q-0.34 0.86-1.44 0.86zm0.17-0.46c0.82 0 1.24-0.65 1.24-1.42v-0.41q-0.16 0.19-0.72 0.24l-0.57 0.05c-0.66 0.05-0.92 0.33-0.92 0.71 0 0.47 0.29 0.83 0.97 0.83zm3.42 0.38h-0.66v-5.71h0.66zm7.46-1.54c0 0.88-0.63 1.54-1.77 1.54h-2.78v-5.71h2.62c1.14 0 1.76 0.61 1.76 1.5 0 0.63-0.32 1.1-0.94 1.29 0.73 0.16 1.11 0.69 1.11 1.38zm-0.69-0.04c0-0.61-0.4-1.07-1.15-1.07h-2.02v2.12h2.02c0.75 0 1.15-0.45 1.15-1.05zm-0.16-2.59c0-0.61-0.4-1.01-1.15-1.01h-1.86v2.02h1.86c0.75 0 1.15-0.4 1.15-1.01zm2.84 4.25c-0.94 0-1.46-0.48-1.46-1.25 0-0.61 0.38-1.08 1.39-1.17l0.76-0.06c0.56-0.05 0.72-0.17 0.72-0.48 0-0.52-0.29-0.85-0.98-0.85q-0.96-0.01-1.03 0.85h-0.64c0-0.81 0.51-1.33 1.66-1.33 1.15 0 1.66 0.52 1.66 1.33v1.82q0 0.85 0.13 1.06h-0.59c-0.13-0.17-0.17-0.34-0.17-0.78q-0.35 0.86-1.45 0.86zm0.18-0.46c0.82 0 1.23-0.65 1.23-1.42v-0.41q-0.15 0.19-0.72 0.24l-0.57 0.05c-0.65 0.05-0.92 0.33-0.92 0.71 0 0.48 0.29 0.83 0.98 0.83zm3.42 0.38h-0.67v-5.71h0.67zm2.16 0.08c-0.94 0-1.47-0.48-1.47-1.25 0-0.61 0.39-1.08 1.4-1.17l0.76-0.06c0.56-0.05 0.72-0.17 0.72-0.47 0-0.53-0.3-0.86-0.99-0.86q-0.95-0.01-1.02 0.86h-0.64c0-0.82 0.5-1.34 1.65-1.34 1.16 0 1.67 0.52 1.67 1.34v1.82q0 0.84 0.12 1.05h-0.58c-0.13-0.17-0.18-0.34-0.18-0.78q-0.34 0.86-1.44 0.86zm0.18-0.46c0.81 0 1.23-0.65 1.23-1.42v-0.41q-0.16 0.19-0.72 0.24l-0.57 0.05c-0.66 0.05-0.92 0.33-0.92 0.71 0 0.48 0.28 0.83 0.98 0.83zm6.13 0.38h-0.66v-2.63c0-0.69-0.25-1.05-0.92-1.05-0.69 0-1.14 0.54-1.14 1.37v2.31h-0.66v-4.13h0.63v0.76c0.23-0.51 0.66-0.84 1.36-0.84q1.4-0.01 1.39 1.48zm2.62 0.08c-1.22 0-1.93-0.82-1.93-2.15 0-1.32 0.71-2.15 1.93-2.15 1.27 0 1.81 0.83 1.81 1.56h-0.6c-0.08-0.55-0.42-1.04-1.21-1.04-0.78 0-1.26 0.55-1.26 1.63 0 1.08 0.48 1.64 1.26 1.64 0.69 0 1.11-0.38 1.21-1.08h0.6c0 0.81-0.59 1.59-1.81 1.59zm4.24 0c-1.27 0-1.98-0.82-1.98-2.15 0-1.27 0.66-2.15 1.93-2.15 1.29 0 1.94 0.9 1.94 2.06q0.01 0.1-0.01 0.2h-3.19c0.01 1.12 0.54 1.58 1.31 1.58 0.67 0 1.07-0.36 1.21-0.88h0.6c-0.2 0.83-0.77 1.34-1.81 1.34zm-0.05-3.83c-0.71 0-1.17 0.44-1.26 1.34h2.54c-0.09-0.9-0.56-1.34-1.28-1.34z"
      />
      <path
        className="fill-muted-foreground"
        d="m44.22 47.42c-1.31 0-1.85-0.93-1.85-2.45 0-1.52 0.54-2.44 1.85-2.44 1.32 0 1.86 0.92 1.86 2.44 0 1.52-0.54 2.45-1.86 2.45zm0-0.45c0.83 0 1.31-0.6 1.31-2 0-1.39-0.48-2-1.31-2-0.82 0-1.29 0.61-1.29 2 0 1.4 0.47 2 1.29 2zm3.99 0.38h-0.55v-3.88c-0.19 0.28-0.67 0.41-1.02 0.41h-0.12v-0.43c0.65-0.02 1.07-0.28 1.25-0.86h0.44zm0.91 0h-0.51l1.75-4.75h0.51zm3.66 0h-0.55v-3.89c-0.2 0.28-0.67 0.41-1.02 0.41h-0.12v-0.42c0.65-0.03 1.06-0.29 1.24-0.86h0.45zm2.31 0h-0.56v-3.88c-0.19 0.28-0.67 0.4-1.02 0.4h-0.12v-0.42c0.65-0.02 1.07-0.28 1.25-0.86h0.45zm0.9 0h-0.51l1.75-4.76h0.51zm5.28 0h-3.31v-0.28c0-1.02 0.34-1.54 1.29-1.89l0.72-0.26c0.55-0.2 0.75-0.52 0.75-0.95 0-0.62-0.42-0.99-1.05-0.99-0.7 0-1.04 0.39-1.11 1.17h-0.49c0-1.06 0.55-1.62 1.6-1.62 1.02 0 1.6 0.56 1.6 1.45 0 0.67-0.39 1.08-1.06 1.33l-0.76 0.27c-0.65 0.24-0.93 0.64-0.93 1.33h2.75zm2.29 0.06c-1.32 0-1.85-0.93-1.85-2.44 0-1.52 0.53-2.45 1.85-2.45 1.32 0 1.86 0.93 1.86 2.45 0 1.51-0.54 2.44-1.86 2.44zm0-0.44c0.83 0 1.3-0.6 1.3-2 0-1.4-0.47-2-1.3-2-0.83 0-1.3 0.6-1.3 2 0 1.4 0.47 2 1.3 2zm5.61 0.38h-3.31v-0.29c0-1.02 0.33-1.54 1.28-1.88l0.73-0.27c0.55-0.2 0.74-0.52 0.74-0.95 0-0.62-0.41-0.99-1.04-0.99-0.7 0-1.04 0.39-1.11 1.18h-0.5c0-1.07 0.56-1.63 1.6-1.63 1.02 0 1.61 0.56 1.61 1.45 0 0.67-0.4 1.09-1.07 1.33l-0.75 0.28c-0.66 0.23-0.93 0.63-0.94 1.32h2.76zm2.16 0.07c-1.03 0-1.73-0.43-1.73-1.63h0.5c0.07 0.86 0.49 1.18 1.24 1.18 0.76 0 1.18-0.4 1.18-0.96q0-0.88-1-0.87h-0.64v-0.43h0.57c0.65 0 1-0.25 1-0.81 0-0.53-0.41-0.93-1.12-0.93-0.74 0-1.11 0.38-1.17 1.05h-0.49c0-0.93 0.6-1.49 1.66-1.49 1 0 1.67 0.52 1.67 1.33 0 0.6-0.32 0.94-0.79 1.05 0.53 0.13 0.86 0.45 0.86 1.18 0 0.82-0.7 1.33-1.74 1.33zm5.66-1.77h-1.71v-0.43h1.71zm3.94 1.77c-1.03 0-1.73-0.43-1.73-1.63h0.5c0.07 0.87 0.48 1.18 1.24 1.18 0.76 0 1.17-0.4 1.17-0.95q0.01-0.89-0.99-0.88h-0.64v-0.43h0.57c0.64 0 1-0.25 1-0.81 0-0.53-0.42-0.92-1.12-0.92-0.74 0-1.11 0.38-1.17 1.04h-0.49c0-0.93 0.6-1.49 1.66-1.49 1 0 1.67 0.52 1.67 1.33 0 0.61-0.32 0.95-0.79 1.05 0.53 0.14 0.86 0.46 0.86 1.18 0 0.82-0.7 1.33-1.74 1.33zm4.03 0c-1.32 0-1.85-0.93-1.85-2.45 0-1.51 0.53-2.44 1.85-2.44 1.32 0 1.86 0.93 1.86 2.44 0 1.52-0.54 2.45-1.86 2.45zm0-0.45c0.83 0 1.3-0.59 1.3-2 0-1.39-0.47-1.99-1.3-1.99-0.83 0-1.3 0.6-1.3 1.99 0 1.41 0.47 2 1.3 2zm2.59 0.38h-0.51l1.75-4.76h0.51zm3.66 0h-0.55v-3.88c-0.19 0.28-0.67 0.41-1.02 0.41h-0.12v-0.42c0.65-0.03 1.07-0.29 1.25-0.86h0.44zm2.31 0h-0.56v-3.88c-0.19 0.28-0.66 0.4-1.02 0.4h-0.11v-0.42c0.65-0.02 1.06-0.29 1.24-0.86h0.45zm0.91 0h-0.52l1.75-4.76h0.52zm5.27 0h-3.3v-0.28c0-1.02 0.33-1.54 1.28-1.89l0.73-0.27c0.54-0.19 0.74-0.51 0.74-0.94 0-0.63-0.42-0.99-1.04-0.99-0.71 0-1.05 0.39-1.11 1.17h-0.5c0-1.06 0.56-1.62 1.6-1.62 1.02 0 1.6 0.56 1.6 1.45 0 0.67-0.39 1.08-1.06 1.33l-0.75 0.27c-0.66 0.24-0.93 0.64-0.94 1.33h2.75zm2.29 0.06c-1.31 0-1.85-0.93-1.85-2.44 0-1.52 0.54-2.45 1.85-2.45 1.32 0 1.86 0.93 1.86 2.45 0 1.51-0.54 2.44-1.86 2.44zm0-0.45c0.83 0 1.31-0.59 1.31-1.99 0-1.4-0.48-2-1.31-2-0.83 0-1.29 0.6-1.29 2 0 1.4 0.46 1.99 1.29 1.99zm5.61 0.39h-3.31v-0.29c0-1.02 0.34-1.54 1.28-1.89l0.73-0.26c0.55-0.2 0.74-0.52 0.74-0.95 0-0.62-0.41-0.99-1.04-0.99-0.7 0-1.04 0.39-1.11 1.17h-0.49c0-1.06 0.55-1.62 1.6-1.62 1.02 0 1.6 0.56 1.6 1.45 0 0.67-0.4 1.08-1.06 1.33l-0.76 0.27c-0.65 0.24-0.93 0.64-0.93 1.33h2.75zm3.34 0h-0.54v-1.3h-2.36v-0.53l2.27-2.93h0.63v3.01h0.67v0.45h-0.67zm-0.54-1.75v-2.41l-1.87 2.41z"
      />
      <path
        className="fill-muted/50"
        d="m254.33 24.34c0-1.63 1.33-2.96 2.97-2.96h6.66c1.64 0 2.96 1.33 2.96 2.96v6.67c0 1.64-1.32 2.96-2.96 2.96h-6.66c-1.64 0-2.97-1.32-2.97-2.96z"
      />
      <path
        fillRule="evenodd"
        className="fill-chart-1"
        d="m258.21 25.71c0-0.43 0.33-0.78 0.75-0.78h3.34c0.41 0 0.75 0.34 0.75 0.75v0.56q-0.01 0.23-0.1 0.42-0.09 0.2-0.23 0.34 0 0-0.01 0.01l-1.08 0.96h-0.01q-0.06 0.05-0.11 0.17-0.05 0.12-0.05 0.22v1.09q-0.01 0.19-0.09 0.35-0.08 0.17-0.25 0.29l-0.36 0.22c-0.48 0.3-1.16-0.02-1.16-0.64v-1.34q0-0.07-0.05-0.19-0.05-0.11-0.1-0.17l-0.94-1q-0.14-0.14-0.21-0.32-0.09-0.17-0.09-0.36zm0.75-0.28c-0.13 0-0.25 0.11-0.25 0.28v0.58q0 0.05 0.04 0.16 0.05 0.11 0.11 0.17h0.01l0.96 1.01q0 0.01 0.01 0.02 0.1 0.13 0.18 0.31 0.07 0.17 0.08 0.38v1.33c0 0.2 0.22 0.33 0.4 0.22l0.35-0.22v-0.01q0.02-0.01 0.07-0.09 0.04-0.08 0.04-0.12v-1.09q0-0.21 0.09-0.42 0.08-0.2 0.25-0.35l1.08-0.95q0.05-0.06 0.11-0.19 0.06-0.13 0.06-0.21v-0.56c0-0.14-0.11-0.25-0.25-0.25z"
      />
      <path
        className="fill-muted/50"
        d="m271.37 24.34c0-1.63 1.33-2.96 2.96-2.96h6.67c1.64 0 2.96 1.33 2.96 2.96v6.67c0 1.64-1.32 2.96-2.96 2.96h-6.67c-1.63 0-2.96-1.32-2.96-2.96z"
      />
      <path
        className="fill-chart-1"
        d="m276.11 27.16c0.28 0 0.52 0.23 0.52 0.52 0 0.28-0.24 0.52-0.52 0.52-0.29 0-0.53-0.24-0.53-0.52 0-0.29 0.24-0.52 0.53-0.52zm1.56 0c0.28 0 0.52 0.23 0.52 0.52 0 0.28-0.24 0.52-0.52 0.52-0.29 0-0.52-0.24-0.52-0.52 0-0.29 0.23-0.52 0.52-0.52zm1.56 0c0.29 0 0.52 0.23 0.52 0.52 0 0.28-0.23 0.52-0.52 0.52-0.29 0-0.52-0.24-0.52-0.52 0-0.29 0.23-0.52 0.52-0.52z"
      />

      {months.map((month) => (
        <g id={month.id} key={month.id}>
          {month.segments.map((segment, index) => (
            <motion.path
              key={segment.id}
              id={segment.id}
              fillRule="evenodd"
              className={segmentColors[index]}
              d={segment.d}
              style={{
                transformBox: "fill-box",
                transformOrigin: "bottom center",
              }}
              initial={{ scaleY: 0 }}
              whileInView={{ scaleY: 1 }}
              viewport={{ once: true, amount: 0.5 }}
              transition={{
                duration: 0.4,
                delay: index * 0.14,
                ease: [0.22, 1, 0.36, 1],
              }}
            />
          ))}
        </g>
      ))}

      <path
        className="fill-chart-1"
        d="m17.79 193.72c-1.13 0-1.56-0.57-1.56-1.62v-0.13h0.55v0.13c0 0.84 0.32 1.15 1 1.15 0.67 0 0.99-0.31 0.99-1.15v-3.2h0.58v3.2c0 1.05-0.43 1.62-1.56 1.62zm3.33 0c-0.78 0-1.22-0.4-1.22-1.04 0-0.51 0.32-0.9 1.16-0.98l0.63-0.05c0.47-0.04 0.61-0.14 0.61-0.4 0-0.44-0.25-0.71-0.83-0.71q-0.8-0.01-0.85 0.71h-0.54c0-0.68 0.42-1.11 1.39-1.11 0.96 0 1.38 0.43 1.38 1.11v1.52q0 0.71 0.11 0.88h-0.49c-0.11-0.14-0.15-0.28-0.15-0.65q-0.28 0.72-1.2 0.72zm0.15-0.39c0.68 0 1.03-0.54 1.03-1.18v-0.34q-0.14 0.16-0.61 0.2l-0.47 0.04c-0.55 0.04-0.77 0.27-0.77 0.59 0 0.4 0.24 0.69 0.82 0.69zm5.11 0.32h-0.55v-2.19c0-0.57-0.21-0.87-0.77-0.87-0.57 0-0.95 0.44-0.95 1.14v1.92h-0.55v-3.44h0.53v0.63c0.19-0.43 0.55-0.7 1.13-0.7q1.17-0.01 1.16 1.24z"
      />
      <path
        className="fill-chart-1"
        d="m45.11 193.65h-0.58v-4.75h3.27v0.47h-2.69v1.63h2.48v0.46h-2.48zm4.63 0.06c-1.07 0-1.66-0.68-1.66-1.79 0-1.06 0.55-1.79 1.62-1.79 1.06 0 1.61 0.75 1.61 1.71q0.01 0.09-0.01 0.17h-2.66c0.01 0.93 0.45 1.32 1.1 1.32 0.55 0 0.88-0.3 1-0.73h0.5c-0.16 0.69-0.64 1.11-1.5 1.11zm-0.04-3.19c-0.6 0-0.99 0.37-1.06 1.11h2.12c-0.08-0.74-0.47-1.11-1.06-1.11zm3.93 3.19q-0.93-0.01-1.22-0.75v0.69h-0.52v-4.76h0.55v1.96q0.3-0.72 1.19-0.72c0.93 0 1.5 0.66 1.5 1.79 0 1.13-0.57 1.79-1.5 1.79zm-0.13-0.42c0.64 0 1.07-0.43 1.07-1.37 0-0.94-0.43-1.36-1.07-1.36-0.63 0-1.06 0.42-1.06 1.36 0 0.94 0.43 1.37 1.06 1.37z"
      />
      <path
        className="fill-chart-1"
        d="m78.69 193.65h-0.55v-4.21l-1.73 4.21h-0.5l-1.72-4.21v4.21h-0.55v-4.75h0.89l1.64 3.92 1.63-3.92h0.89zm1.84 0.06c-0.78 0-1.22-0.4-1.22-1.04 0-0.51 0.32-0.9 1.16-0.98l0.64-0.05c0.46-0.04 0.6-0.14 0.6-0.39 0-0.44-0.25-0.72-0.83-0.72q-0.79-0.01-0.85 0.72h-0.53c0-0.68 0.42-1.12 1.38-1.12 0.96 0 1.38 0.44 1.38 1.12v1.51q0 0.71 0.11 0.89h-0.49c-0.11-0.15-0.15-0.29-0.15-0.66q-0.28 0.72-1.2 0.72zm0.15-0.38c0.68 0 1.03-0.55 1.03-1.19v-0.34q-0.13 0.16-0.6 0.2l-0.48 0.04c-0.55 0.04-0.77 0.28-0.77 0.6 0 0.39 0.24 0.69 0.82 0.69zm2.85 0.32h-0.56v-3.45h0.53v0.81c0.19-0.6 0.5-0.85 1.02-0.85q0.15 0.01 0.31 0.04v0.48l-0.33-0.01c-0.59 0-0.97 0.46-0.97 1.31z"
      />
      <path
        className="fill-chart-1"
        d="m106.86 193.65h-0.6l-0.47-1.2h-2.29l-0.47 1.2h-0.6l1.87-4.75h0.69zm-1.22-1.65l-0.99-2.56-1 2.56zm3.41 1.71q-0.89 0-1.19-0.72v1.97h-0.55v-4.76h0.53v0.69q0.29-0.75 1.21-0.76c0.93 0 1.5 0.66 1.5 1.79 0 1.13-0.57 1.79-1.5 1.79zm-0.12-0.42c0.63 0 1.07-0.42 1.07-1.37 0-0.94-0.44-1.36-1.07-1.36-0.63 0-1.07 0.42-1.07 1.36 0 0.95 0.44 1.37 1.07 1.37zm2.75 0.36h-0.55v-3.45h0.53v0.81c0.18-0.6 0.5-0.85 1.01-0.85q0.15 0.01 0.31 0.04v0.48l-0.33-0.01c-0.59 0-0.97 0.46-0.97 1.31z"
      />
      <path
        className="fill-chart-1"
        d="m135.9 193.65h-0.55v-4.21l-1.73 4.21h-0.5l-1.72-4.21v4.21h-0.56v-4.75h0.9l1.63 3.92 1.63-3.92h0.9zm1.84 0.06c-0.78 0-1.23-0.4-1.23-1.04 0-0.51 0.33-0.9 1.17-0.98l0.63-0.05c0.47-0.04 0.6-0.14 0.6-0.39 0-0.44-0.24-0.72-0.82-0.72q-0.8-0.01-0.85 0.72h-0.54c0-0.68 0.42-1.12 1.39-1.12 0.96 0 1.38 0.44 1.38 1.12v1.51q0 0.71 0.1 0.89h-0.48c-0.11-0.15-0.15-0.29-0.15-0.66q-0.29 0.72-1.2 0.72zm0.14-0.38c0.69 0 1.03-0.55 1.03-1.19v-0.34q-0.13 0.16-0.6 0.2l-0.47 0.04c-0.55 0.04-0.77 0.28-0.77 0.6 0 0.39 0.24 0.69 0.81 0.69zm2.18 1.63v-0.4h0.27c0.4 0 0.65-0.22 0.84-0.73l-1.42-3.63h0.57l1.1 2.98 1.11-2.98h0.57l-1.41 3.57c-0.37 0.92-0.71 1.19-1.36 1.19z"
      />
      <path
        className="fill-chart-1"
        d="m162.31 193.72c-1.13 0-1.56-0.57-1.56-1.62v-0.13h0.55v0.13c0 0.84 0.31 1.15 0.99 1.15 0.68 0 1-0.31 1-1.15v-3.2h0.58v3.2c0 1.05-0.43 1.62-1.56 1.62zm3.39 0c-0.79 0-1.15-0.4-1.15-1.24v-2.27h0.55v2.19c0 0.57 0.21 0.87 0.76 0.87 0.58 0 0.95-0.45 0.95-1.14v-1.92h0.56v3.44h-0.53v-0.63c-0.2 0.43-0.55 0.7-1.14 0.7zm5.2-0.07h-0.56v-2.19c0-0.57-0.21-0.87-0.76-0.87-0.58 0-0.95 0.44-0.95 1.14v1.92h-0.55v-3.44h0.52v0.63c0.2-0.43 0.55-0.7 1.13-0.7q1.18-0.01 1.17 1.24z"
      />
      <path
        className="fill-chart-1"
        d="m190.41 193.72c-1.13 0-1.56-0.57-1.56-1.62v-0.13h0.55v0.13c0 0.84 0.32 1.15 1 1.15 0.67 0 0.99-0.31 0.99-1.15v-3.2h0.58v3.2c0 1.05-0.43 1.62-1.56 1.62zm3.4 0q-1.17 0.01-1.16-1.24v-2.27h0.55v2.19c0 0.57 0.21 0.87 0.77 0.87 0.57 0 0.94-0.45 0.94-1.14v-1.92h0.56v3.44h-0.53v-0.63c-0.19 0.43-0.55 0.7-1.13 0.7zm2.92-0.07h-0.55v-4.75h0.55z"
      />
      <path
        className="fill-chart-1"
        d="m219.27 193.65h-0.6l-0.47-1.2h-2.29l-0.47 1.2h-0.6l1.87-4.75h0.69zm-1.22-1.65l-0.99-2.56-0.99 2.56zm2.69 1.71c-0.79 0-1.16-0.4-1.16-1.23v-2.28h0.56v2.19c0 0.57 0.2 0.87 0.76 0.87 0.57 0 0.95-0.44 0.95-1.14v-1.92h0.55v3.45h-0.53v-0.64c-0.19 0.43-0.54 0.7-1.13 0.7zm3.74-0.2c-0.93 0-1.5-0.69-1.5-1.69 0-1 0.57-1.69 1.5-1.69q0.92 0.01 1.21 0.76v-0.69h0.53v3.22c0 1.06-0.57 1.6-1.59 1.6-0.97 0-1.46-0.49-1.46-1.19h0.51c0.04 0.52 0.4 0.81 0.98 0.81 0.63 0 1.01-0.34 1.01-1.1v-0.75q-0.3 0.72-1.19 0.72zm0.12-0.4c0.63 0 1.07-0.45 1.07-1.29 0-0.84-0.44-1.29-1.07-1.29-0.63 0-1.07 0.45-1.07 1.29 0 0.84 0.44 1.29 1.07 1.29z"
      />
      <path
        className="fill-chart-1"
        d="m245.93 193.72c-1.26 0-1.85-0.54-1.85-1.56h0.54c0.09 0.75 0.4 1.12 1.32 1.12 0.9 0 1.25-0.38 1.25-1 0-0.36-0.2-0.64-0.98-0.75l-0.72-0.11c-0.96-0.14-1.29-0.5-1.29-1.17 0-0.84 0.56-1.42 1.73-1.42 1.16 0 1.72 0.56 1.72 1.49h-0.53c-0.08-0.7-0.41-1.05-1.21-1.05-0.78 0-1.13 0.37-1.13 0.95 0 0.39 0.18 0.61 0.88 0.72l0.72 0.11c0.91 0.13 1.39 0.48 1.39 1.21 0 0.91-0.59 1.46-1.84 1.46zm3.57 0c-0.79 0-1.16-0.4-1.16-1.24v-2.27h0.56v2.19c0 0.57 0.21 0.87 0.76 0.87 0.58 0 0.95-0.45 0.95-1.14v-1.92h0.55v3.44h-0.52v-0.63c-0.2 0.43-0.55 0.7-1.14 0.7zm4.12 0q-0.89 0-1.19-0.72v1.96h-0.56v-4.75h0.53v0.68q0.29-0.74 1.22-0.75c0.93 0 1.5 0.66 1.5 1.79 0 1.13-0.57 1.79-1.5 1.79zm-0.13-0.43c0.64 0 1.07-0.42 1.07-1.36 0-0.94-0.43-1.36-1.07-1.36-0.63 0-1.06 0.42-1.06 1.36 0 0.94 0.43 1.36 1.06 1.36z"
      />
      <path
        className="fill-chart-1"
        d="m275.44 193.72c-1.49 0-2.26-1-2.26-2.44 0-1.46 0.77-2.45 2.26-2.45 1.5 0 2.27 0.99 2.27 2.45 0 1.44-0.77 2.44-2.27 2.44zm0-0.47c1.12 0 1.69-0.72 1.69-1.97 0-1.26-0.57-1.98-1.69-1.98-1.11 0-1.68 0.72-1.68 1.98 0 1.25 0.57 1.97 1.68 1.97zm4.32 0.47c-1.02 0-1.61-0.68-1.61-1.79 0-1.1 0.59-1.79 1.61-1.79 1.06 0 1.5 0.69 1.5 1.3h-0.5c-0.07-0.46-0.34-0.87-1-0.87-0.65 0-1.06 0.46-1.06 1.36 0 0.9 0.41 1.36 1.06 1.36q0.87-0.01 1-0.89h0.5c0 0.67-0.48 1.32-1.5 1.32zm3.22-0.03c-0.66 0-0.91-0.2-0.91-0.84v-2.24h-0.58v-0.4h0.58v-1.05h0.56v1.05h0.83v0.4h-0.83v2.26c0 0.33 0.11 0.41 0.47 0.41l0.36-0.01v0.38c-0.14 0.02-0.36 0.04-0.48 0.04z"
      />
      <path
        className="fill-chart-1"
        d="m135.56 68.15c0-2.95 2.39-5.34 5.35-5.34h16.46c2.95 0 5.35 2.39 5.35 5.34v0.66c0 2.95-2.4 5.34-5.35 5.34h-21.81z"
      />
      <path
        className="fill-background"
        d="m143.12 70.53c-1.19 0-1.81-0.79-1.81-1.95 0-1.16 0.62-1.96 1.81-1.96 1.2 0 1.81 0.8 1.81 1.96 0 1.16-0.61 1.95-1.81 1.95zm0-0.38c0.89 0 1.35-0.57 1.35-1.57 0-1.01-0.46-1.58-1.35-1.58-0.89 0-1.35 0.57-1.35 1.58 0 1 0.46 1.57 1.35 1.57zm3.45 0.38c-0.81 0-1.28-0.54-1.28-1.43 0-0.88 0.47-1.43 1.28-1.43 0.85 0 1.21 0.55 1.21 1.03h-0.4c-0.06-0.36-0.28-0.69-0.81-0.69-0.52 0-0.84 0.37-0.84 1.09 0 0.72 0.32 1.09 0.84 1.09q0.7-0.01 0.81-0.72h0.4c0 0.54-0.39 1.06-1.21 1.06zm2.58-0.02c-0.53 0-0.72-0.16-0.72-0.67v-1.8h-0.47v-0.32h0.47v-0.83h0.44v0.83h0.66v0.32h-0.66v1.81c0 0.27 0.09 0.33 0.37 0.33l0.29-0.01v0.31c-0.1 0.01-0.28 0.03-0.38 0.03zm3.39-0.03h-0.45v-3.11c-0.15 0.23-0.53 0.33-0.81 0.33h-0.1v-0.34c0.52-0.02 0.85-0.23 1-0.69h0.36zm1.97 0.06c-1.05 0-1.48-0.75-1.48-1.96 0-1.21 0.43-1.96 1.48-1.96 1.05 0 1.48 0.75 1.48 1.96 0 1.21-0.43 1.96-1.48 1.96zm0-0.36c0.66 0 1.04-0.48 1.04-1.6 0-1.12-0.38-1.6-1.04-1.6-0.67 0-1.04 0.48-1.04 1.6 0 1.12 0.37 1.6 1.04 1.6z"
      />
    </svg>
  );
}
```