Change shape of a button with custom svg

Question

I have a website with a carousel sliders library. The thing is, each slider has a button circle-shaped with border radius and when I click one button I assign it the 'active' class, so when is active I make the button bigger. But I want to change it's shape too, to make it look like a star. I thought that putting an svg with clipPath would make the trick, but I didn't work. If anyone could tell me how to make it change it's shape, if it's any library or something, it would help me a lot.

Here's what I tried:

And wanted to style it this way:

button {
    width: 0.8em;
    height: 0.8em;
    border: none;
    border-radius: 50%;
    transition: 0.2s ease-out;
    position: relative;
    clip-path: url('#clipStar');

    .star2svg {
        position: absolute;
        left: 0;
        right: 0;
        display: block;
        width: 100%;
        height: 100%;
    }
}

user_15842737 · Answer

The svg element needs a viewBox to know where to start displaying the content and where to clip it.

In this case, your viewBox is about 650x650:

.star2svg {
  width: 25px;
}

user_15015675 · Answer

You could swap/transition the svg path shape via css path() function.

For transitions/morphing you need both shapes to have the exact same number of commands. Css tricks: Animate SVG Path Changes in CSS

Transitioning between a circle and a star could be done by:

reducing the star path to a polygon with 10 points
rounded corners are achieved by stroke-linecaps/stroke-linejoin properties
the initial circle shape is created by aligning all 10 points to the center and applying a larger stroke-width: M50,53.1L50,53.1L50,53.1L50,53.1L50,53.1L50,53.1L50,53.1L50,53.1L50,53.1L50,53.1L50,53.1z

Example

.btn {
  appearance: none;
  -webkit-appearance: none;
  font-size: 10vw;
  background: none;
  padding: 0;
  border: none;
  color: #000;
  cursor: pointer;
}

.btnSvg {
  display: inline-block;
  height: 1em;
}

.btn .btnSvgPath {
  transition: 0.3s;
  border: none;
  stroke-width: 75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn:hover .btnSvgPath {
  d: path('M50,77L23.3,91l5.1-29.7l-21.6-21L36.7,36L50,9l13.3,27l29.8,4.3l-21.6,21L76.7,91L50,77z');
  stroke-width: 5;
  color: gold;
}

Change shape of a button with custom svg

2 Answers

Example