I am trying to make a javascript game that has a character running in the dark with a torch.

I have a circle mask that follows the mouse using blend modes.

I have also created a triangle clipping path, however I can't find anything on how to make individual points of the triangle follow the mouse.

Basically I need two points to follow the mouse/circle mask and 1 point to memain on the play to give a torch effect; is this even possible? I'm just using basic js, html and css.

Here is my pen

<p 
  class="codepen" 
  data-height="300" 
  data-default-tab="result" 
  data-slug-hash="wvrzJbp" 
  data-user="noelosha" 
  style="
    height: 300px; box-sizing: border-box; display: flex; align-items: center; 
    justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
>
    <span>
      See the Pen 
      <a href="https://codepen.io/noelosha/pen/wvrzJbp">
        forest run
      </a> 
      by noel o'shaughnessy ( 
      <a href="https://codepen.io/noelosha">@noelosha</a>)
      on <a href="https://codepen.io">CodePen</a>.
    </span>
</p>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

worst case scenario I just make it fixed to helicopter or something, but really wanted it to follow the mouse while pinned to the running character.