How can I change this SVG shape that's generated?

Question

I have a website I'm customizing for a client, and I'll admit I'm not too skilled with generating SVGs.

The site -- LINKED HERE uses a theme that has a built-in review feature and it currently uses a hexagon as the shape. My client wants it to be a square instead.

I've found the area with the shape in the Theme Files, but when I change the hexagon to a circle, it does not format properly nor looks all that well. I was hoping a simple new SVG path would solve the issue, but it doesn't seem to do so. It seems to completely throw off the formatting.

Any guidance or assistance you can give would be greatly appreciated

The code that generates the hexagon is below for reference. There is the "path" section in the middle that generates the hexagon.

PHP CODE

 $reviewScoreOutput = '';
        if(($reviewScore != '') && ($reviewScore > 0)) {
            $reviewScoreOutput .= '<div class="overlay-center-y text-center">';
            $reviewScoreOutput .= '<div class="post-score-hexagon">';
            $reviewScoreOutput .= '<svg class="hexagon-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 184 210">';
            $reviewScoreOutput .= '<g>';
            $reviewScoreOutput .= '<path fill="#FC3C2D" stroke="#fff" stroke-width="10px" d="M81.40638795573723 2.9999999999999996Q86.60254037844386 0 91.7986928011505 2.9999999999999996L168.0089283341811 47Q173.20508075688772 50 173.20508075688772 56L173.20508075688772 144Q173.20508075688772 150 168.0089283341811 153L91.7986928011505 197Q86.60254037844386 200 81.40638795573723 197L5.196152422706632 153Q0 150 0 144L0 56Q0 50 5.196152422706632 47Z"></path>';
            $reviewScoreOutput .= '</g>';
            $reviewScoreOutput .= '</svg>';
            $reviewScoreOutput .= '<span class="post-score-value">'.$reviewScore.'</span>';
            $reviewScoreOutput .= '</div>';
            $reviewScoreOutput .= '</div>';
        }

CSS CODE

.post-score {
display: inline-block;
color: #fff;
font-weight: 700;
line-height: 1;
text-align: center
}

.post-score__inner {
    position: relative;
    z-index: 10
}

.post-score-star {
    font-size: 1.2em;
    line-height: 1;
    color: #f7e74a
}

.hexagon-svg {
    width: 100%;
    height: auto
}

.post-score-hexagon {
    position: relative;
    display: inline-block;
    line-height: 0;
    vertical-align: middle
}

.post-score-hexagon .hexagon-svg {
    width: 50px;
    padding: 2px;
    -webkit-filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.25));
    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.25));
    overflow: visible
}

@media(min-width:768px) {
    .post-score-hexagon .hexagon-svg {
        width: 60px
    }
}

@media(min-width:1200px) {
    .post-score-hexagon .hexagon-svg {
        width: 64px
    }
}

.post-score-hexagon .hexagon-svg g path {
    fill: #fc3c2d
}

.post-score-hexagon .post-score-value {
    position: absolute;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 0 10px rgba(0, 0, 0, .08)
}

@media(min-width:768px) {
    .post-score-hexagon .post-score-value {
        font-size: 22px
    }
}

@media(min-width:1200px) {
    .post-score-hexagon .post-score-value {
        font-size: 26px
    }
}

.post-score-hexagon--s .hexagon-svg {
    width: 50px
}

.post-score-hexagon--s .post-score-value {
    font-size: 20px
}

.post-score-hexagon--l .hexagon-svg {
    width: 100px
}

.post-score-hexagon--l .post-score-value {
    font-size: 42px
}

.post-score-hexagon--xl .hexagon-svg {
    width: 100px
}

@media(min-width:1200px) {
    .post-score-hexagon--xl .hexagon-svg {
        width: 120px
    }
}

.post-score-hexagon--xl .post-score-value {
    font-size: 42px
}

@media(min-width:1200px) {
    .post-score-hexagon--xl .post-score-value {
        font-size: 50px
    }
}

.mnmd-review .post-score-hexagon .hexagon-svg {
    -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.3));
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.3))
}

Answer 1

You can use some vector graphics editor to edit svg, then replace code in the theme, e.g. https://vectr.com/