,, , ,, , , , image/svg+xml , image/svg+xml , interact.js , image/svg+xml , ,, , ,
<div id="rotate-area">
  <div id="angle-info">0&deg;</div>
  <svg id="arrow" viewbox="0 0 100 100">
    <polygon points="50,0 75,25 62.5,25 62.5,100 37.5,100 37.5,25 25,25" fill="#29e"></polygon>
.draggable {
  touch-action: none;
  user-select: none;
var angle = 0

  onmove: function (event) {
    var arrow = document.getElementById('arrow')

    angle += event.da

    arrow.style.webkitTransform =
    arrow.style.transform =
      'rotate(' + angle + 'deg)'

    document.getElementById('angle-info').textContent =
      angle.toFixed(2) + '\u00b0'

Gesture events are triggered when two pointers go down and are moved. In gesture events, page and client coordinates are the averages of touch coordinates and velocity is calculated from these averages. The events also have the following properties:

Gesture Event propertyDescription
distanceThe distance between the event’s first two touches
angleThe angle of the line made by the two touches
daThe change in angle since previous event
scaleThe ratio of the distance of the start event to the distance of the current event
dsThe change in scale since the previous event
boxA box enclosing all touch points

Remember to use CSS touch-action: none to prevent the browser from panning when the user drags with a touch pointer, and user-select: none to disable text selection.