Pattern: simplified defintions

[techniq]

In order to support Canvas and simplify common use cases, we should support

<Pattern lines=[{ x2: '100%', class: 'stroke-surface-content' }] width={4} height={4}>
  {#snippet children({ pattern })}
    <rect fill={pattern} />
  {/snippet}
</Pattern>

or

<Pattern shapes=[{ type: 'rect', x2: '100%', class: 'stroke-surface-content' }] width={4} height={4}>
  {#snippet children({ pattern })}
    <rect fill={pattern} />
  {/snippet}
</Pattern>

which translates to:

<Pattern width={4} height={4}>
  {#snippet patternContent()}
    <line x2="100%" class="stroke-surface-content" />
  {/snippet}

  {#snippet children({ pattern })}
    <rect fill={pattern} />
  {/snippet}
</Pattern>

We would support line, circle, and other shape types. Using <Pattern shapes> would allow controlling the render/stack order, but would be a more verbose API as well (commonly you only need a single type, or the shapes do not overlap)

Might also be nice to simplify further, similar to Nivo (source) and Visx (source)

[techniq]

Implemented the simpler <Pattern lines={...} circles={...}> as it handles all the current use cases / examples and can always overrides the patternContent slot (like LinearGradient's stopsContent`).

lines and circles can be a boolean for simple use cases (rely on defaults), single object, or array (when you want to for instance have a crossing pattern). circles also supports stagger for offsetting the pattern per row.

There is a a new size prop instead of requiring width and height (since most patterns are square (but still supports explicit width/height) and background for setting the overall pattern background.

Overall very happy with the simplification of pattern definitions for both simple and more complex use cases.

[techniq]

Completed as part of [email protected]