<metaname="description"content="The SVG Cubic Morph component for KUTE.js enables animation for the d presentation attribute of path and glyph shapes.">
<aclass="facebook-link"target="_blank"href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Facebook">
<aclass="twitter-link"target="_blank"href="https://twitter.com/intent/tweet?text=Spread the word about %23KUTEJS animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Twitter">
<pclass="condensed lead">The component that also covers <i>SVG morphing</i>, with similar functionality as for the <ahref="svgMorph.html">SVG Morph</a> component, but with a different
implementation for value processing and animation setup.</p>
<pclass="condensed text-right">Animate SVG paths with <b>cubic-bezier</b> path commands and improved performance.</p>
</div>
<divclass="col9 border">
<pclass="lead condensed">The KUTE.js <b>SVG Cubic Morph</b> component enables animation for the <b>d</b> (description) presentation attribute and is the latest in all the SVG
<p>The component will process paths and out of the box will provide the closest possible interpolation by default. It also implements a series of solutions from
<ahref="https://github.com/paperjs/paper.js/">Paper.js</a> to determine paths draw direction and automatically reverse one of them for most accurate presentation and as a result
<p>The main difference with the <ahref="svgMorph.html">SVG Morph</a> component is the fact that this components is converting all path commands to <i>cubicBezierTo</i>, giving it
the upper hand over the original morph component in many regards. While the other component will spend time to process the path data and create polygons, this component should
deliver the animation faster and using considerably less power.</p>
<p>All path processing is powered by our <ahref="https://github.com/thednp/svg-path-commander">SVGPathCommander</a> starting KUTE.js version 2.0.14, which aims to modernize and
improve the path processing and enable transition from closed to and from un-closed shapes.</p>
<p>By default, the component will process the paths as authored and deliver its best without any option required, like for the first red rectangle below which applies to any of the above invocations:</p>
<li>The <bclass="text-blue">blue shape</b> and its corresponding end shape have been edited by removing their <code>Z</code> path commands and by adding additional curve points using a vector graphics editor to match
the amount of points in both shapes.</li>
</ul>
<p>In this example we focus on experimentation to discover ways to optimize the morph animation so that the points travel optimal distance. Keep in mind that the <code>Z</code> path command is actually a shorthand
for <code>L</code> (line path command), sometimes it's required to close the shape, however the path processing tools will remove it or replace it when converting path segments to <code>C</code> cubic-bezier.</p>
<p>Each morph animation as well as each pair of shapes can have its own quirks. You can use the technique on your shapes to optimize the animation to your style. Chris Coyier wrote
<ahref="https://css-tricks.com/svg-shape-morphing-works/">an excelent article</a> in which he explains the terminology and workflow on how SVG morphing animation works with simple examples.</p>
<h3>Morphing Unclosed Shapes To Closed Shapes</h3>
<p>The next set of morphing animations is a transition from a line into a circle and showcases the component's behavior when both shapes are closed (they have the <code>Z</code> path command) or one or another is not,
but first let's create the necessary markup and scripting:</p>
<p>As you can see, the functionality of this component is very different from the <ahref="svgMorph.html">svgMorph</a> component in the sense that it will
morph shapes as authored. If you replay the above animations, here are a few takeaways:</p>
<p>This is the visual presentation you can expect with this component. Keep in mind that stroke attributes like <code>stroke-linejoin</code> such can have
a small impact on your animation, particularly on start and end points.</p>
<p>Similar to the <ahref="svgMorph.html">svgMorph</a> component, this component doesn't provide multipath processing so we should split the sub-paths into multiple <b><path></b> shapes, analyze and associate them
in a way that corresponding shapes are close and their points travel the least possible distance.</p>
<p>Now since we've worked with these paths before, the first example below showcases how the <b>svgCubicMorph</b> component handles it by default. The following example was made possible by editing the shapes with a vector
graphics editor. The last example showcases a creative use of association between starting and end shapes. Let's have a look:</p>
<p>Make sure to check the markup here as well as the <ahref="assets/js/svgCubicMorph.js"target="_blank">svgCubicMorph.js</a> for a full code review.</p>
<h3>Intersecting Paths Example</h3>
<p>The same preparation apply here, however the outcome is a bit different with cubic-bezier path commands, as shown in the first example. For the next two examples, the shapes have been edited for a better outcome.
<p>So the technique involves creating <code><mask></code> elements, splitting multipath shapes into multiple <code><path></code> shapes, matching the amount of starting and ending shapes by duplicating
an existing shape or by sampling another shape for the same purpose, editing shapes for more accurate point-to-point animation, as well as various options to optimize the visual presentation.</p>
<li>Starting with KUTE.js version 2.0.14 the component implements <ahref="https://github.com/thednp/svg-path-commander">SVGPathCommander</a> for path processing, solving previous issues with over-optimized
path strings among other issues. You can try the <ahref="https://thednp.github.io/svg-path-commander/">SVGPathCommander demo page</a> to prepare your path strings.</li>
<li>Since animation works only with <code>path</code><b>SVGElement</b>s, you might need a <ahref="https://thednp.github.io/svg-path-commander/convert.html"target="_blank">shapeToPath</a> utility.</li>
<li>Both SVG morph components will always animate first sub-path from both starting and ending shapes, and for any case hopefully this demo will guide you in mastering the technique.</li>
<li>In some cases your start and end shapes don't have a very close size, you can use your vector graphics editor of choice or <ahref="https://github.com/Waest/SVGPathConverter">SVGPathCommander</a>
to apply a scale transformation to your shapes' path commands.</li>
<li>The <b>SVG Cubic Morph</b> component WILL NOT animate paths with sub-paths as of KUTE.js version 2.0.14, hopefuly this guide will help you break the ice.</li>
<li>Compared to <ahref="svgMorph.html">svgMorph</a>, this component can be more memory efficient, as we're dealing with significantly less interpolation points which translates directly
into better performance and the shapes never show any sign of "polygon artifacts".</li>
<li>Some shapes can be broken even if the browser won't throw any error so make sure you double check with your SVG editor of choice.</li>
<li>In some cases the duplicated curve bezier points don't produce the best morphing animation, but you can edit the shapes and add your own additional path commands between the existing ones
so that the component will work with actual points that travel less and produce a much more "natural" morphing animation.</li>
<li>The edited shapes can be found in the <b>assets/img</b> folder of this demo, make sure to check them out.</li>
<li>Make sure to check the <ahref="assets/js/svgCubicMorph.js"target="_blank">svgCubicMorph.js</a> for a full code review.</li>
<li>This component is affected by the the <code>fill-rule="evenodd"</code> specific SVG attribute, you must make sure you check your shapes in that regard as well.</li>
<li>This component is bundled with the <i>demo/src/kute-extra.js</i> file.</li>