Custom attachments

See the exact values for edges, corners, partial edges, and grid points.

Live previewDrag the cloth

Attachment value

Grid X 32

attachments.ts

import { createFlagCloth, type Attachment } from 'flag-cloth';

const attachment: Attachment = 'left';

const flag = createFlagCloth({
  container: document.querySelector<HTMLElement>('#flag')!,
  texture: '/my-flag.webp',
  segments: { x: 32, y: 20 },
  attachment,
});

// Pinning can also change after creation.
await flag.setOptions({ attachment });