Vue

by Andrei Gheorghiu

HTML

<div id="app">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="180" y="100"
     viewBox="0 0 180 100" xml:space="preserve">
        <defs>
          <filter xmlns="http://www.w3.org/2000/svg" id="dropshadow" height="130%">
      <feDropShadow dx="0" dy="-4" flood-color="rgba(0,0,0,.21)"/>
    </filter>
        </defs>
        <g filter="url(#dropshadow)">
  <path fill="#fff"
    :style="{transformOrigin: '50% 85%', transform: `rotate(${angle}deg)`}"
        d="M102.2,89.5c0-0.1,0-0.1,0-0.2c0-0.2,0-0.4-0.1-0.6L92.9,6.8c-0.1-0.8-3.2-0.9-3.3,0
        L78.7,88.5c-0.1,0.2-0.1,0.4-0.1,0.6c0,0.1,0,0.1,0,0.2l0,0.1c0,0,0,0.1,0.1,0.1c0.5,2.4,5.6,4.4,11.7,4.4
        c6.2,0.1,11.2-1.8,11.8-4.2c0,0,0.1-0.1,0.1-0.1L102.2,89.5z"></path>        
        </g>
  

      </svg>
      <input type="range" min="-90" max="90" v-model="angle">
      {{angle}}
</div>

CSS

#app {
  width: 270px;
}
input {
  margin-top: 60px;
  width: 260px;
}
body {
  min-height: 100vh;
  margin: 0;
  padding-top: 10px;
  background-color: #f5f5f5;
  box-sizing: border-box;
}

Vue

new Vue({
  el: "#app",
  data: () => ({
  	angle: 0
  })
  
})