knalle

I have all I need for now, thanks I wanted the MorphSVG features but with the ablity to have vertices show up as dots. So the posts from @mikel are excellent for this thread, though not working with MorphSVG.

Here is a codepen where I have removed the parts that are not needed for the anchors: https://codepen.io/knalle/pen/rNBWbRx But it can probably be improved.

Good idea... most of it is related to the lines/tracers. Will try that

That almost works - but I need more control. I was thinking of looping through path and and draw each vertex as a circle?

What would be the best approach to render dots, that follows the vertices of the SVG path? - like a simple version of the points (not tracers) seen in the demo: https://codepen.io/GreenSock/pen/vvjOGq

Thank you PointC - that makes sense!

Mikkel, the closing "look" is right, but my CodePen is simplified and the case of simply reversing isn't going to work - I need to have svg working in in 0.9.1 again. Perhaps there are new MorphSVG setting I need to fill in?

I upgraded to latest MorphSVG (v. 0.9.1) - but now the SVG path closing animation is not working (the background should "scale" back in). What could be the problem? It works in 0.8.8.

Ah yes, thatnk you. You are right I missed that! It happened with SVGOMG that optimized it "too much". A notice on this in the docs is better if the alternative is additional checks in convertToPath(), that has a negative impact on speed

I just noticed that a <rect> with the rx attribute is not converted to a <path> with the same appearance. <rect x="90" y="115" width="228" height="206" rx="23"/> Well, it depends on how you look at it. I guess it is intended behavior from GSAP but not what I expected. Perhaps it should be mentioned in the docs - also if other "basic" SVG shapes attributes are ignored.

That works Thanks! The waveSVG is a solution that works just as fine as Blake's demo. Is there any benefits in speed / CPU load compared to the other (blob) solution?

I wan't to wiggle an existing path - in the style og the blobs here: https://codepen.io/osublake/pen/vdzjyg , but this one creates blobs instead of using an existing. In this previous post there are some discussion on the topic: I have tried Jack's waveSVG that accepts existing path data. But I notice the start and end points aren't aligning in the wave motion. I will only wiggle a blob consisting of around 20 points. The various blobs are used as backgrounds for line icons. Thanks in advance

aaaahh stupid and a bit weird error I use the lovely ScrollMagic and while developing I use the addIndicators plugin... and every now and then I hide the indicator through CSS with: script ~ div {display: none;} Since the indicators (divs that has no IDs og classes) were added after the last <script> tag - so I though I had come up with a smart way of targetting those divs I had not transferred that CSS line to the Codepen, so it worked of course So it works now, but I don't understand how it causes the error in Firefox (?).

it's the area beneath the image that is supposed to be draggable (and it is working in the pen somehow)... but I cannot work out why the link I posted isn't working in FF

codepen - the snapping isn't working in the pen ... but it appears to working in firefix here.