feat: improve svg-transform example

diegomura · Nov 14, 2024 · 71883be · 71883be
1 parent 8cdf77c
commit 71883be
Showing 1 changed file with 19 additions and 5 deletions.
diff --git a/packages/examples/vite/src/examples/svg-transform/index.jsx b/packages/examples/vite/src/examples/svg-transform/index.jsx
@@ -1,14 +1,28 @@
+/* eslint-disable react/no-array-index-key */
+
 import React from 'react';
 import { Document, Page, Svg, G, Rect } from '@react-pdf/renderer';
 
+const COLORS = ['red', 'green', 'blue', 'yellow', 'purple'];
+
+const randBetween = (min, max) =>
+  Math.floor(Math.random() * (max - min + 1) + min);
+
 const SvgTransform = () => {
   return (
     <Document>
-      <Page>
-        <Svg width="600" height="300">
-          <G style={{ transform: 'translate(50, 50)' }}>
-            <Rect fill="red" width="200" height="50" />
-          </G>
+      <Page size={[600, 600]}>
+        <Svg width="600" height="600">
+          {Array.from({ length: 200 }).map((_, i) => (
+            <G
+              key={i}
+              style={{
+                transform: `translate(${randBetween(0, 600)}, ${randBetween(0, 600)}) rotate(${randBetween(-180, 180)}deg)`,
+              }}
+            >
+              <Rect fill={COLORS[i % COLORS.length]} width="200" height="50" />
+            </G>
+          ))}
         </Svg>
       </Page>
     </Document>