Mask#

import { component, render } from 'sigx';
import { Mask } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Mask shape="squircle" class="w-24 h-24">
            <img src="https://i.pravatar.cc/150?u=30" alt="Masked photo" />
        </Mask>
    );
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { Mask, Row, Col, Text } from '@sigx/daisyui';

const shapes = [
    'squircle', 'heart', 'hexagon', 'hexagon-2', 'decagon', 'pentagon', 'diamond',
    'square', 'circle', 'parallelogram', 'parallelogram-2', 'parallelogram-3', 'parallelogram-4',
    'star', 'star-2', 'triangle', 'triangle-2', 'triangle-3', 'triangle-4',
] as const;

const Demo = component(() => {
    return () => (
        <Row gap="4" wrap>
            {shapes.map((shape) => (
                <Col align="center" gap="1">
                    <Mask shape={shape} class="w-16 h-16 bg-primary" />
                    <Text size="xs" class="opacity-70">{shape}</Text>
                </Col>
            ))}
        </Row>
    );
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { Mask, Row } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Row gap="1">
            <Mask shape="star-2" class="mask-half-1 w-16 h-16 bg-warning" />
            <Mask shape="star-2" class="mask-half-2 w-16 h-16 bg-warning opacity-30" />
        </Row>
    );
});

render(<Demo />, "#sandbox");