New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details
Socket
Book a DemoSign in
Socket

path-easing

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

path-easing

Easing function based on svg path

latest
Source
npmnpm
Version
1.3.1
Version published
Maintainers
1
Created
Source

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/

Keywords

easing

FAQs

Package last updated on 05 Mar 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts