title: How to draw animations of feathered/blurred stroked paths
body: <p>In <a href="https://stackoverflow.com/questions/63768810/how-do-you-create-a-feathered-circle-wipe-animation-in-ios">this thread</a> I asked how to create animations of blurred-edged filled paths, to create a &quot;circle wipe&quot; animation with feathered edges.</p>
  <p>The solution is to install the path in the shadowPath property of a layer an animate that. Core Graphics applies a variable amount of blur to the shadow path, and the shadowPath property is animatable. However, it fills whatever path you install into it. You can't use it to draw feathered/blurred <em>stroked</em> paths, since what gets rendered as the shadow is a closed, filled version of whatever path you install.</p>
  <p>There is a method <code>copy(strokingWithWidth:lineCap:lineJoin:miterLimit:transform:)</code> that will convert a stroked path into a closed path that traces the outline of the stroked path. If you <strong>fill</strong> the output of that method, you get what looks like a stroked version of the original path. You can install that converted path into the shadowPath of a layer and get a nice, blurred stroked path.</p>
  <p>However, under the covers, the <code>copy(strokingWithWidth:lineCap:lineJoin:miterLimit:transform:)</code> method does some things that make the resulting path unsuitable for path animation.  If you look at <a href="https://stackoverflow.com/a/45135864/205185"><strong>Rob Mayoff's excellent answer in this thread</strong></a>, you see that for inside corners, Core Graphics creates odd triangles that overlap with the interior of the stroked shape. It also seems to sometimes vary the number of vertices in the output of the path depending on it's shape.</p>
  <p>For paths stroked with a fairly thin line width, they animate well. Here is an example:
  <a href="https://i.stack.imgur.com/9Ge1L.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Ge1L.gif" alt="enter image description here" /></a></p>
  <p>But when you increase the line width and/or blur radius, things go &quot;all pear-shaped&quot; (meaning they go very wrong.) Here is an animation of the same curve with different settings:</p>
  <p><a href="https://i.stack.imgur.com/3nuHv.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3nuHv.gif" alt="enter image description here" /></a></p>
  <p>You can see <a href="https://github.com/DuncanMC/BlurredStrokedPath.git" rel="nofollow noreferrer"><strong>the project that generates these images on Github</strong></a>, and try it yourself.</p>
  <h2>Question:</h2>
  <p>Does anybody know of a way to convert a stroked path to a filled path that does not have the artifacts described in <a href="https://stackoverflow.com/a/45135864/205185"><strong>Rob Mayoff's post</strong></a>?</p>
  <p>If I have to I can write my own version of <code>copy(strokingWithWidth:lineCap:lineJoin:miterLimit:transform:)</code> that creates a filled path with a fixed number of vertexes and without the artifacts that method creates, but it would be pretty involved. I'm hoping there is an existing solution.</p>