css-easing-1/cubic-bezier-easing-curve.svg

<!-- vim: set expandtab ts=2 sw=2 tw=80: -->
<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="100%" height="100%" viewBox="0 0 535 510">
  <title>Cubic bézier easing function example</title>
  <defs>
    <style type="text/css">
    svg {
      font-size: 23px;
      font-family: sans-serif;
    }

    /*
     * Line work
     */
    .axis, .tickMark {
      stroke: black;
      stroke-width: 1.5;
      fill: none;
      stroke-linecap: square;
    }
    .boundaryLine {
      stroke: grey;
      stroke-width: 1.5;
      stroke-dasharray: 3 4;
      fill: none;
    }
    .curve {
      fill: none;
      stroke: blue;
      stroke-width: 7;
      stroke-linecap: round;
    }
    .controlPoint {
      fill: white;
      stroke: black;
      stroke-width: 3;
    }
    .handleLine {
      fill: none;
      stroke: black;
      stroke-width: 2;
    }

    /*
     * Background
     */
    .graphBackground {
      stroke: none;
      fill: white;
    }

    /*
     * Text labels
     */
    .axisLabel {
      text-anchor: middle;
    }
    .axisValue {
      fill: grey;
    }
    .axisValue.vert {
      text-anchor: end;
    }
    .axisValue.horz {
      text-anchor: middle;
    }
    .pointLabel {
      fill: black;
      font-size: 25px;
    }
    </style>
  </defs>
  <!-- Translate to origin -->
  <g transform="translate(110 420)">
    <!-- Backing -->
    <rect y="-400" width="400" height="400" class="graphBackground"/>
    <!-- Bounds -->
    <line x1="400" x2="400" y2="-400" class="boundaryLine"/>
    <line y1="-400" x2="400" y2="-400" class="boundaryLine"/>
    <!-- Y axis -->
    <line y2="-400" class="axis"/>
    <line y1="-200" x2="-20" y2="-200" class="tickMark"/>
    <line y1="-400" x2="-20" y2="-400" class="tickMark"/>
    <text x="-30" y="-200" dy="0.3em" class="axisValue vert">0.5</text>
    <text x="-30" y="-400" dy="0.3em" class="axisValue vert">1</text>
    <text x="200" y="-80" class="axisLabel"
      transform="rotate(-90)">Output progress</text>
    <!-- X axis -->
    <line x2="400"  class="axis"/>
    <line x1="200"  x2="200" y2="20" class="tickMark"/>
    <line x1="400"  x2="400" y2="20" class="tickMark"/>
    <text x="200" y="20" dy="1.1em" class="axisValue horz">0.5</text>
    <text x="400" y="20" dy="1.1em" class="axisValue horz">1</text>
    <text x="200" y="80" class="axisLabel">Input progress</text>
    <!-- Origin -->
    <text x="-25" y="25" class="axisValue">0</text>
    <!-- Control point: P1 -->
    <line x2="240" y2="-40" class="handleLine"/>
    <circle cx="240" cy="-40" r="10" class="controlPoint"/>
    <text x="260" y="-40" dy="0.4em" class="pointLabel">P1</text>
    <!-- Control point: P2 -->
    <line x1="400" y1="-400" x2="80" y2="-280" class="handleLine"/>
    <circle cx="80" cy="-280" r="10" class="controlPoint"/>
    <text x="60" y="-280" dy="0.4em" class="pointLabel"
      text-anchor="end">P2</text>
    <!-- Curve -->
    <path d="M0 0C240-40 80-280 400-400" class="curve"/>
    <!-- Control point: P0 -->
    <circle r="10" class="controlPoint"/>
    <text x="-10" y="-20" dy="0.4em" class="pointLabel"
      text-anchor="end">P0</text>
    <!-- Control point: P1 -->
    <circle cx="400" cy="-400" r="10" class="controlPoint"/>
    <text x="395" y="-375" dy="0.4em" class="pointLabel"
      text-anchor="end">P3</text>
  </g>
</svg>