This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Ken Yiu
Posted Apr 29 - Read on Facebook

A quick test of using SVG path to create circular progress. Still using stroke-dasharray and stroke-dashoffset to create the animation.

http://share.framerjs.com/xhnuhk2a3s0j/

4 Comments

Benjamin Den Boer

This is nice!

Viktor Engelbert

Cool! In objective-c the end points can be animated. How do you get that gradient on the line? It's neither radial or linear...

Ken Yiu

It is svg linear gradient but from top-right to bottom-left
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">

Noam Elbaz

Ken Yiu could I control the svg fill like a slide / scroll / control percentage of fill? Or can I only start an animation with this method?

Read the entire post on Facebook