CSS Cubic Bezier Generator

curl --request POST \
  --url https://api.iotools.cloud/v1/tool/css-cubic-bezier-generator \
  --header 'Authorization: Bearer <token>' \
  --header 'Content-Type: application/json' \
  --data '
{
  "preset": "ease",
  "x1": "0.25",
  "y1": "0.1",
  "x2": "0.25",
  "y2": "1",
  "duration": "1"
}
'

{
  "tool": "css-cubic-bezier-generator",
  "tool_version": "1.0.1",
  "outputs": {
    "cssCode": "/* Preset: Ease — cubic-bezier(0.25, 0.1, 0.25, 1) */\ntransition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);\nanimation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);\n\n/* Example usage */\ntransition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);",
    "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"300\" height=\"300\" viewBox=\"0 0 300 300\"><rect width=\"300\" height=\"300\" fill=\"#ffffff\"/><rect x=\"30.00\" y=\"53.23\" width=\"240.00\" height=\"193.55\" fill=\"none\" stroke=\"#e2e2f0\" stroke-width=\"1\"/><line x1=\"30.00\" y1=\"246.77\" x2=\"90.00\" y2=\"227.42\" stroke=\"#aaaaaa\" stroke-width=\"1.5\" stroke-dasharray=\"4 4\"/><line x1=\"270.00\" y1=\"53.23\" x2=\"90.00\" y2=\"53.23\" stroke=\"#aaaaaa\" stroke-width=\"1.5\" stroke-dasharray=\"4 4\"/><path d=\"M 30.00 246.77 C 90.00 227.42, 90.00 53.23, 270.00 53.23\" fill=\"none\" stroke=\"#464aff\" stroke-width=\"3\" stroke-linecap=\"round\"/><circle cx=\"30.00\" cy=\"246.77\" r=\"5\" fill=\"#666666\"/><circle cx=\"270.00\" cy=\"53.23\" r=\"5\" fill=\"#666666\"/><circle cx=\"90.00\" cy=\"227.42\" r=\"7\" fill=\"#464aff\" stroke=\"#ffffff\" stroke-width=\"2\"/><circle cx=\"90.00\" cy=\"53.23\" r=\"7\" fill=\"#464aff\" stroke=\"#ffffff\" stroke-width=\"2\"/></svg>",
    "curveInfo": [
      {
        "property": "cubic-bezier()",
        "value": "cubic-bezier(0.25, 0.1, 0.25, 1)"
      },
      {
        "property": "Preset",
        "value": "Ease"
      },
      {
        "property": "Behavior",
        "value": "Standard eased curve — stays within the 0–1 range"
      }
    ]
  },
  "credits_used": 3,
  "credits_remaining": null
}

POST

tool

css-cubic-bezier-generator

curl --request POST \
  --url https://api.iotools.cloud/v1/tool/css-cubic-bezier-generator \
  --header 'Authorization: Bearer <token>' \
  --header 'Content-Type: application/json' \
  --data '
{
  "preset": "ease",
  "x1": "0.25",
  "y1": "0.1",
  "x2": "0.25",
  "y2": "1",
  "duration": "1"
}
'

{
  "tool": "css-cubic-bezier-generator",
  "tool_version": "1.0.1",
  "outputs": {
    "cssCode": "/* Preset: Ease — cubic-bezier(0.25, 0.1, 0.25, 1) */\ntransition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);\nanimation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);\n\n/* Example usage */\ntransition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);",
    "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"300\" height=\"300\" viewBox=\"0 0 300 300\"><rect width=\"300\" height=\"300\" fill=\"#ffffff\"/><rect x=\"30.00\" y=\"53.23\" width=\"240.00\" height=\"193.55\" fill=\"none\" stroke=\"#e2e2f0\" stroke-width=\"1\"/><line x1=\"30.00\" y1=\"246.77\" x2=\"90.00\" y2=\"227.42\" stroke=\"#aaaaaa\" stroke-width=\"1.5\" stroke-dasharray=\"4 4\"/><line x1=\"270.00\" y1=\"53.23\" x2=\"90.00\" y2=\"53.23\" stroke=\"#aaaaaa\" stroke-width=\"1.5\" stroke-dasharray=\"4 4\"/><path d=\"M 30.00 246.77 C 90.00 227.42, 90.00 53.23, 270.00 53.23\" fill=\"none\" stroke=\"#464aff\" stroke-width=\"3\" stroke-linecap=\"round\"/><circle cx=\"30.00\" cy=\"246.77\" r=\"5\" fill=\"#666666\"/><circle cx=\"270.00\" cy=\"53.23\" r=\"5\" fill=\"#666666\"/><circle cx=\"90.00\" cy=\"227.42\" r=\"7\" fill=\"#464aff\" stroke=\"#ffffff\" stroke-width=\"2\"/><circle cx=\"90.00\" cy=\"53.23\" r=\"7\" fill=\"#464aff\" stroke=\"#ffffff\" stroke-width=\"2\"/></svg>",
    "curveInfo": [
      {
        "property": "cubic-bezier()",
        "value": "cubic-bezier(0.25, 0.1, 0.25, 1)"
      },
      {
        "property": "Preset",
        "value": "Ease"
      },
      {
        "property": "Behavior",
        "value": "Standard eased curve — stays within the 0–1 range"
      }
    ]
  },
  "credits_used": 3,
  "credits_remaining": null
}

Authorizations

Authorization

string

header

required

Bearer authentication header of the form Bearer <token>, where <token> is your auth token.

Body

application/json

preset

enum<string>

Preset

Available options:

custom,

linear,

ease,

ease-in,

ease-out,

ease-in-out,

ease-in-sine,

ease-out-sine,

ease-in-out-sine,

ease-in-quad,

ease-out-quad,

ease-in-out-quad,

ease-in-cubic,

ease-out-cubic,

ease-in-out-cubic,

ease-in-quart,

ease-out-quart,

ease-in-out-quart,

ease-in-quint,

ease-out-quint,

ease-in-out-quint,

ease-in-expo,

ease-out-expo,

ease-in-out-expo,

ease-in-circ,

ease-out-circ,

ease-in-out-circ,

ease-in-back,

ease-out-back,

ease-in-out-back

number

Required range: 0 <= x <= 1

number

Required range: 0 <= x <= 1

number

duration

number

Duration (seconds)

Required range: 0.1 <= x <= 10

Response

Tool output

outputs

object

required

Show child attributes

tool

string

required

The tool's slug, echoing the {slug} in the request path.

tool_version

string

required

Output-contract version for this tool.

credits_used

integer

required

Credits this call consumed, after any settlement refund. 0 when metering is disabled.

credits_remaining

integer | null

required

Credits left in the current monthly allowance, or null when metering is disabled.

request_id

string

Correlation id, also sent as x-request-id.

Overview

Catalog

Account

Tools

CSS Cubic Bezier Generator

Authorizations

Body

Response