<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 covers <i>SVG morphing</i>, an animation that's close to impossible with CSS3 transitions and not supported in some legacy browsers. It comes packed
with tools and options to improve performance and visual presentation.</p>
<pclass="condensed text-right">Animate SVG paths with <b>line-to</b> path commands, improve visual presentation and optimize performance on any device.</p>
</div>
<divclass="col9 border">
<pclass="lead condensed">The KUTE.js <b>SVG Morph</b> component enables animation for the <b>d</b> (description) presentation attribute and is one of the most important in all the
<p>It only works with inline <b>SVGPathElement</b> shapes and the presentation is always the same when shapes are closed or not (their <b>d</b> attribute ends with <b>Z</b> path command).
On initialization or animation start, depending on the chosen KUTE.js method, it will <ahref="http://phrogz.net/SVG/convert_path_to_polygon.xhtml"target="_blank">sample a number of points</a>
<p>This component was originally inspired by a <ahref="http://bl.ocks.org/mbostock/3081153"target="_blank">D3.js path morphing example</a> and now implements a set of
<ahref="https://github.com/d3/d3-polygon">D3 polygon</a> geometric operations and other functionalities from <ahref="https://github.com/veltman/flubber">flubber</a> to
produce the coordinates for a very consistent morphing animation.</p>
<p>While in some cases you might be able to create SVG morphing animations via CSS3 <i>transition</i>, this component was developed to provide various solutions for working
with complex shapes, bringing convenience, resources and clarity to one of the most complex types of animation.</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
<pclass="condensed text-right">The easy way to optimize morphing animation for every device in a single option.</p>
</div>
<divclass="col9 border">
<pclass="lead condensed">The <b>SVG Morph</b> component comes with a simple option to optimize animation on every device. Previous versions used to have additional options required for processing,
<li><kbd>morphPrecision: <bclass='text-olive'>Number</b></kbd> option allows you to set the sampling size of the shapes in pixels. The lesser value the better visual but the more power consumption
and less performance. The default value is <b>10</b> but the processing functions will determine the best possible outcome depending on shapes' path commands.</li>
</ul>
</div>
</div>
</div>
</div>
<divclass="content-wrap">
<h3>Basic Example</h3>
<p>The first morphing animation example is a transition from a rectangle into a star, the first path is the start shape and the second is the end shape; we can also add some ID to the
paths so we can easily target them with our code.</p>
<h3>Morphing Unclosed Shapes To Closed Shapes</h3>
<p>The next morphing animation example is a transition from a line into a circle and this example showcases the component's behavior when one of the paths is not closed (it doesn't have the <i>Z</i> path command),
while the other is closed. In all cases, the component will always consider shapes to be closed, so let's have a look at the example:</p>
<p>The functionality of this component is different from the <ahref="svgCubicMorph.html">svgCubicMorph</a> component in the sense that it will animate the shapes as if they are both and always closed.
In the above example, the orange line is closed while the green line is not, and the animation is the same.</p>
<p>When your paths are only <code>lineto</code>, <code>vertical-lineto</code> and <code>horizontal-lineto</code> based shapes (the <code>d</code> attribute consists of only <code>L</code>, <code>V</code> and
<code>H</code> path commands), the <b>SVG Morph</b> component will work differently from previous versions, it will sample points as for any other non-polygon shapes. In this case you can set a higher
<b>morphPrecision</b> value to optimize performance.</p>
<pre><codeclass="language-javascript">// let's morph a triangle into a star
var tween1 = KUTE.to('#triangle', { path: '#star' }).start();
// or same path into a square
var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
<p>As you can see, both these paths have subpaths, and this component will only animate the first subpath from both paths. To animate them all there are a few easy steps required in preparation for
<li>Use the <ahref="https://thednp.github.io/svg-path-commander/">SVGPathCommander demo page</a> to split your path string into multiple sub-path strings. It's <b>important</b> to do this to avoid
inconsistencies with shapes having relative sub-path commands. You can also use the utility to reverse paths if required.</li>
<li>Create a new <b><path></b> shape for each sub-path string from <b>M</b> to <b>Z</b> path commands. See the sample code below.</li>
<li>Give the new paths an <b>id="uniqueID"</b> attribute so you can target them easily. You could use relevant namespace to help you better understand positioning. EG: <b>id="square-top-left"</b>
or <b>id="left-eye"</b></li>
<li>In the browser console inspect with your mouse all paths from both starting and ending shapes and determine which shapes should morph to which. The idea is to produce a morphing animation
where points from each shape travel the least possible distance, however this is where you can get creative, as shown in one of the examples below.</li>
<li>If the number of the starting and ending shapes are not equal, you can consider either duplicating one of the subpath shapes close to it's corresponding subpath shape or creating a sample
shape close to the corresponding subpath shape.</li>
<li>Update the <b>id</b> attribute for all starting and ending shapes to match positions and make it easier to work with the tween objects.</li>
<li>Optional: set a <b>fill</b> attribute for each new shape if you like, normally you coulnd't have done it with the original paths.</li>
<li>Create your tween objects and get to animating and tweaking.</li>
</ol>
<p>For our example here, this is the end result markup for the shapes to be used for morphing animation:</p>
<p>The graphic on the left side of the below example is exactly for the above markup, no option needed out of the box nearly perfect animation, while the right side example showcases a different or
perhaps more creative example of this morph animation:</p>
<p>As you can imagine, it's quite hard if not impossible to code something that would do all this work automatically. Perhaps in the future we could have dedicated AI powered APIs to train and
program for this work, but until then, it's up to you to learn, observe, adapt and tweak in order to get the most out of this component.</p>
<h3>Intersecting Paths Example</h3>
<p>The last morph example is a bit more complex as the paths have intersecting subpaths with different positions as well as different amounts of subpaths. In this case you can manually clone one or
more subpaths in a way that the number of starting shapes is equal to the number of ending shapes, as well as making sure the starting shapes are close to their corresponding ending shapes; at this point
you should be just like in the previous examples.</p>
<p>You need to inspect the markup here in your browser console to get an idea on how the shapes have been arranged, we have used a <code><mask></code> where we included the subpaths of both start
and end shape, just to get the same visual as the original paths.</p>
<p>The example on the left side showcases the cloning of one of the shapes to match the amount of starting and ending shapes, while the right side showcases
using a sample shape, somewhere close to its corresponding end shape, a much better animation, but in the end, it's up to you and your need on preparing,
analyzing as well as deciding on how to optimize these cases.</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>
<ahref="https://github.com/Waest/SVGPathConverter"target="_blank">grab one here</a>.</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 morphing animation is expensive so try to optimize the number of morph animations that run at the same time. When morphing sub-paths/multi-paths instead of cloning shapes to have same number
of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the overal animation performance, mobile devices still don't do very much, regardless
<li>Large displays would need best resolution possible so a small <code>morphPrecision</code> value (1-10) would be required, assuming performant hardware are powering the displays. For small displays
you can get quite comfortable with almost any value, including the default value.</li>
<li>With all the tools at hand, you can also try to use a <code>morphPrecision</code> value for every resolution. Take some time to experiement, you might find a better <code>morphPrecision</code>
value you can use for any particular device and / or resolution.</li>
<li>The animation performance is the same for both <code>.to()</code> and <code>.fromTo()</code> methods, but the ones that use the second method will start faster, because the values have been prepared
already and for the first method the processing of the two paths happens on tween <code>.start()</code> call, thus delaying the animation, so keep that in mind when working with syncing multiple tweens,
the <code>.to()</code> based morph will always start later. Of course this assumes the you cache the tween objects first and start the animation later, if not (you start the animation on object creation),
both methods will be delayed.</li>
<li>The <b>SVG Morph</b> component uses approximatelly the same algorithm as D3.js for determining the coordinates for interpolation, the visual presentation is more natural compared to the other component,
it might be a better solution for your applications.</li>
<li>Make sure to check the <ahref="assets/js/svgMorph.js"target="_blank">svgMorph.js</a> for a full code review.</li>
<li>This component should ignore the <code>fill-rule="evenodd"</code> specific SVG attribute, but you can make sure you check your shapes in that regard as well.</li>