Skip to content

Custom Tween function that you can draw the path using SVG

Notifications You must be signed in to change notification settings

brunnolou/path-easing

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Path easing

npm version

Tween a given t value based on a bezier curve specified in SVG path data format.

How to use

import pathEasing from 'path-easing';

const extremeInOutEasing = pathEasing('M0,100 C40,100 50,90 50,50 C50,10 60,3 100,0', { samples: 200 });

console.log(extremeInOutEasing(0.5)); // 0.0019976899246115787

Options {

  • sampleCount: default: 300

    The number of samples to generate. The larger the number the more accurate the easing, at the expense of initialization time.

  • height: default: 100

    The height of the assumed viewBox.

  • width: default: 100

    The width of the assumed viewBox.

}

Sample SVG curve

Edit on Sketch / Illustrator the copy the path: d="[path]".

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path d="M0 100c7.23411923 0 12.2886231-6.2780918 16.6923138-16.736703 10.5675899-25.0976562 25.3431261 14.1781717 29.9459438 6.8527068C50.4136997 84.1073216 50 54.7677807 50 50c0-4.7677807 0-17.1687062 3.5858682-26.2067126C58.6308363 11.0776904 70.7735846 0 100 0"/>
</svg>

Credits to: Tim Lucas https://codepen.io/toolmantim/pen/bpgXaM

Inspired by Oleg Solomka’s work on http://mojs.io/

About

Custom Tween function that you can draw the path using SVG

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published