<div class="clip-wrap">
  <div class="clip-shape-transition"></div>				
					  <p>Notice how the CSS transition between <br /> clipping path shapes on hover is not smooth.</p>
  <p>Solution <a href="https://codepen.io/imohkay/pen/ZGbjyG">here</a></p>          
</div> <!-- /clip-wrap -->	

<svg class="clip-svg">
  							<defs>
								    <clipPath id="hexagon-clip" clipPathUnits="objectBoundingBox">
									      <polygon points="0.5 0, 1 0.25, 1 0.75, 0.5 1, 0 0.75, 0 0.25" />
								    </clipPath>
							  </defs>
						</svg>
						
						<svg class="clip-svg">
							  <defs>
								    <clipPath id="octagon-clip" clipPathUnits="objectBoundingBox">
									      <polygon points="0.3 0, 0.7 0, 1 0.3, 1 0.7, 0.7 1, 0.3 1, 0 0.7, 0 0.3" />
								    </clipPath>
							  </defs>
						</svg>	
		
body {
  font-family: "Roboto Condensed", sans-serif;
}

.clip-wrap {
  text-align: center;
}

.clip-shape-transition {
  background-color: #639;
  background-color: rebeccaPurple;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-clip-path: url("#hexagon-clip");
  clip-path: url("#hexagon-clip");
}

.clip-shape-transition:hover {
  -webkit-clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  -webkit-clip-path: url("#octagon-clip");
  clip-path: url("#octagon-clip");
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.