Help please: movable clip-path

Hi i found this example for movable Text text follows mouse. How can i make this with a clip-path or svg mask? thx a lot for sugestions or help

css-clippath is one option … as always: read about browsersupport …

example reacts on mousemove and hypedrag (1.1 MB)

Wow thx a lot! perfect, but doesn’t work in safari…

adding a new line setting the webkit-prefix should work: = 'circle(' + cW + 'px at ' + cPos[0] + 'px ' + cPos[1] + 'px)'

It works but only on mouse click.


for the mousemove it’ll be = 'circle(' + cW + 'px at ' + cPos[0] + 'px ' + cPos[1] + 'px)'

there are two function within the document … one for dragging … one for mousemove …

Works perfect - thx a lot

I have changed the clip path to a triangle. The triangle appears, but no interaction:

	-webkit-clip-path : polygon(51% 21%, 26% 65%, 79% 65%);
	clip-path : polygon(51% 21%, 26% 65%, 79% 65%);
	</style> = 'polygon(' + cW + 'px at ' + cPos[0] + 'px ' + cPos[1] + 'px)' = 'polygon(' + cW + 'px at ' + cPos[0] + 'px ' + cPos[1] + 'px)'

can’t work …
the example js was for a circle.
to use a polygon you’ll have to calculate all its point-coordinates

thx for reply is there an example



Or is it possible with svg mask?


both types need to calculate the polygonpoints on-drag-or-move

Ok, do you have link or a resource file, that i can understand how to calculate it on drag or move?

Thanks a lot

BTW I edited your post so that it appears as code by clicking this button with your code selected:

49 AM (1.1 MB)
this may not be perfect, but does a job :slight_smile:

1 Like

Thx a lot