Help please: movable clip-path

Using JavaScript with Hype
1

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

2

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

example reacts on mousemove and hypedrag
css_clipPath.hype.zip (1.1 MB)

3

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

4

adding a new line setting the webkit-prefix should work:

element.style.webkitClipPath = 'circle(' + cW + 'px at ' + cPos[0] + 'px ' + cPos[1] + 'px)'

5

It works but only on mouse click.

regards

6

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

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

7

Works perfect - thx a lot

8

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

<style>
	#test{
	-webkit-clip-path : polygon(51% 21%, 26% 65%, 79% 65%);
	clip-path : polygon(51% 21%, 26% 65%, 79% 65%);
	}
	
	</style>
	
element.style.clipPath = 'polygon(' + cW + 'px at ' + cPos[0] + 'px ' + cPos[1] + 'px)'
element.style.webkitClipPath = 'polygon(' + cW + 'px at ' + cPos[0] + 'px ' + cPos[1] + 'px)'
9

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

10

thx for reply is there an example

regards

marc

11

Or is it possible with svg mask?

cssplant

12

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

13

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

Thanks a lot

14

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

49 AM

15

css_clipPathPolygon.hype.zip (1.1 MB)
this may not be perfect, but does a job :slight_smile:

1 Like
16

Thx a lot