How to remove curved border around the outer svg path

svg path:

M8930.86,6095.09c0,1523.93,9,3047.93-4.38,4571.74-5.45,620.4-298.7,1092-862.41,1374.07-180.83,90.48-374.86,136.11-582.76,135.54q-2247.4-6.12-4494.82-3c-491.81-.06-983.64-1.56-1475.44,1.55-558.1,3.53-975.64-248.06-1266.78-710.13-161-255.5-243.4-541.67-243.35-848.4.55-3019.42-4.28-6038.86,4-9058.26C6.68,903.92,376.89,342.15,991.59,107.9,1171.59,39.31,1361.09,0,1557.69.15c1941.87,1.37,3883.75-2.62,5825.6,2.77C8027.88,4.71,8584.42,354.73,8819,975.72c65,172.06,106.12,364.33,107.13,547.61C8934.47,3047.21,8930.86,4571.16,8930.86,6095.09ZM4474.19,5074.93C2965.08,5059.49,1690,6304.66,1698.93,7868.18c8.67,1523.83,1258.57,2799.5,2852.42,2759.35,1453.25-36.61,2693.51-1236.28,2693.74-2789.26C7245.32,6317.33,5996.39,5073.06,4474.19,5074.93ZM2932.53,2921.82c-3.47,827.66,686.25,1528.08,1493.15,1546.32C5281.11,4487.47,6002.93,3803.83,6013,2929c9.69-838.49-690.34-1541.14-1537.41-1546.16C3634,1377.88,2936.09,2073.87,2932.53,2921.82Z

The 4 Corners

How to remove border radius around svg path.

I want it to be a plain rectangle, no curves.

I am trying to make the 4 curved areas smooth curves.

I am using this to do that, but I keep messing up

I suggest you use a <rect> element to create the rectangle and use <mask> elements to ‘punch’ the two circular holes.

1 Like

I managed to do it using math.

https://jsfiddle.net/7vLzpb24/

Assuming no transparency is required, it can be done this way:

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.