fix polygon shapes

realvjy · Mar 31, 2024 · 28d7b75 · 28d7b75
1 parent ff76a86
commit 28d7b75
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 30 deletions.
diff --git a/coolshapes-react-0.0.8-alpha.0.tgz b/coolshapes-react-0.0.8-alpha.0.tgz
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coolshapes-react",
-  "version": "0.0.7-alpha.0",
+  "version": "0.0.8-alpha.0",
   "description": "A react component library for coolshapes",
   "keywords": [
     "coolshapes",

diff --git a/src/shapes/polygons/p_7.tsx b/src/shapes/polygons/p_7.tsx
@@ -4,35 +4,43 @@ import { ShapeBase, ShapeType } from "../../lib";
 const Polygon7: ShapeType = forwardRef((props, ref) => {
   const shapeId = "polygon-7";
   const maskId = `cs_mask_1_${shapeId}`;
+  const clipId = `cs_clip_1_${shapeId}`;
 
   return (
     <ShapeBase {...props} shapeName={shapeId} ref={ref}>
-      <mask
-        id={maskId}
-        style={{ maskType: "alpha" }}
-        width="182"
-        height="200"
-        x="0"
-        y="0"
-        maskUnits="userSpaceOnUse">
-        <path
-          fill="#fff"
-          d="M77.449 3.601a27.296 27.296 0 0127.102 0l63.805 36.514C176.796 44.945 182 53.9 182 63.594v72.812c0 9.694-5.204 18.649-13.644 23.479l-63.805 36.514a27.3 27.3 0 01-27.102 0l-63.805-36.514C5.204 155.055 0 146.1 0 136.406V63.594c0-9.694 5.204-18.649 13.644-23.48L77.45 3.602z"></path>
-      </mask>
-      <g mask={`url(#${maskId})`}>
-        <path fill="#fff" d="M191 0H-9v200h200V0z"></path>
-        <path fill="#0E6FFF" d="M191 0H-9v200h200V0z"></path>
-        <g filter="url(#filter0_f_748_4356)">
-          <path fill="#8F5BFF" d="M200 126H-18v108h218V126z"></path>
-          <ellipse cx="78" cy="57.5" fill="#00F0FF" rx="59" ry="34.5"></ellipse>
+      <g clipPath={`url(#${clipId})`}>
+        <mask
+          id={maskId}
+          style={{ maskType: "alpha" }}
+          width="182"
+          height="200"
+          x="9"
+          y="0"
+          maskUnits="userSpaceOnUse">
+          <path
+            fill="#fff"
+            d="M86.449 3.601a27.296 27.296 0 0127.102 0l63.805 36.514C185.796 44.945 191 53.9 191 63.594v72.812c0 9.694-5.204 18.649-13.644 23.479l-63.805 36.514a27.3 27.3 0 01-27.102 0l-63.805-36.514C14.204 155.055 9 146.1 9 136.406V63.594c0-9.694 5.204-18.649 13.644-23.48L86.45 3.602z"></path>
+        </mask>
+        <g mask={`url(#${maskId})`}>
+          <path fill="#fff" d="M200 0H0v200h200V0z"></path>
+          <path fill="#0E6FFF" d="M200 0H0v200h200V0z"></path>
+          <g filter="url(#filter0_f_748_4355)">
+            <path fill="#8F5BFF" d="M209 126H-9v108h218V126z"></path>
+            <ellipse
+              cx="87"
+              cy="57.5"
+              fill="#00F0FF"
+              rx="59"
+              ry="34.5"></ellipse>
+          </g>
         </g>
       </g>
       <defs>
         <filter
-          id="filter0_f_748_4356"
+          id="filter0_f_748_4355"
           width="338"
           height="331"
-          x="-78"
+          x="-69"
           y="-37"
           colorInterpolationFilters="sRGB"
           filterUnits="userSpaceOnUse">
@@ -42,10 +50,13 @@ const Polygon7: ShapeType = forwardRef((props, ref) => {
             in2="BackgroundImageFix"
             result="shape"></feBlend>
           <feGaussianBlur
-            result="effect1_foregroundBlur_748_4356"
+            result="effect1_foregroundBlur_748_4355"
             stdDeviation="30"></feGaussianBlur>
         </filter>
-      </defs>
+        <clipPath id={clipId}>
+          <path fill="#fff" d="M0 0H200V200H0z"></path>
+        </clipPath>
+      </defs>{" "}
     </ShapeBase>
   );
 });

diff --git a/src/shapes/polygons/p_8.tsx b/src/shapes/polygons/p_8.tsx
@@ -12,24 +12,26 @@ const Polygon8: ShapeType = forwardRef((props, ref) => {
         style={{ maskType: "alpha" }}
         width="175"
         height="200"
-        x="0"
+        x="13"
         y="0"
         maskUnits="userSpaceOnUse">
-        <path fill="#fff" d="M87.397 0l87 50v100l-87 50-87-50V50l87-50z"></path>
+        <path
+          fill="#fff"
+          d="M100.397 0l87 50v100l-87 50-87-50V50l87-50z"></path>
       </mask>
       <g mask={`url(#${maskId})`}>
-        <path fill="#00B2FF" d="M187 0H-13v200h200V0z"></path>
+        <path fill="#00B2FF" d="M200 0H0v200h200V0z"></path>
         <path
-          fill="url(#paint0_radial_748_4347)"
-          d="M187 0H-13v200h200V0z"></path>
+          fill="url(#paint0_radial_748_4346)"
+          d="M200 0H0v200h200V0z"></path>
       </g>
       <defs>
         <radialGradient
-          id="paint0_radial_748_4347"
+          id="paint0_radial_748_4346"
           cx="0"
           cy="0"
           r="1"
-          gradientTransform="rotate(-83.01 156.51 50.84) scale(184.874)"
+          gradientTransform="rotate(-83.01 163.01 43.495) scale(184.874)"
           gradientUnits="userSpaceOnUse">
           <stop stopColor="#F7C617"></stop>
           <stop offset="1" stopColor="#FFF500" stopOpacity="0"></stop>