From 09ddcbce0c171d56fb7649880f7fd9ef3918cc6f Mon Sep 17 00:00:00 2001
From: BaderSerhan <baderserhan@gmail.com>
Date: Tue, 7 Jun 2022 13:45:36 +0300
Subject: [PATCH] update README to include rounded corners example

---
 README.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/README.md b/README.md
index d8c39a78..e2838cf8 100644
--- a/README.md
+++ b/README.md
@@ -250,6 +250,21 @@ copilot({
 })(RootComponent);
 ```
 
+Example with rounded corners:
+
+```js
+const roundedRectangleSvgPath = ({ position, canvasSize, size }) => {
+  const br = 10; // border radius
+  const sizeX = size.x._value - 2 * br;
+  const sizeY = size.y._value - 2 * br;
+  return `M 0 0 H ${canvasSize.x} V ${canvasSize.y} H 0 V 0 Z M ${position.x._value+br} ${position.y._value} Z h ${sizeX} a ${br} ${br} 0 0 1 ${br} ${br} v ${sizeY} a ${br} ${br} 0 0 1 -${br} ${br} h -${sizeX} a ${br} ${br} 0 0 1 -${br} -${br} v -${sizeY} a ${br} ${br} 0 0 1 ${br} -${br} z`;
+}
+
+copilot({
+  svgMaskPath: circleSvgPath
+})(RootComponent);
+```
+
 Example with different overlay for specific step:
 
 Give name prop for the step