CSS instead of svg Shapes Animations
For Exampple, CSS instead of svg Shapes on hover...
Demo
HTML
<div class="arrow-shape"></div>
CSS
<style> .arrow-shape { -webkit-clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%); clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%); background: #037cd5; width: 240px; height: 240px; -webkit-transition: all 2s ease; transition: all 2s ease; } .arrow-shape:hover { -webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%); clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%); background: #fdd921; } </style>