css-easing-2/linear-bounce-example.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 -70 600 600">
  <title>Easing function example</title>
  <defs>
    <style type="text/css">
    svg {
      font-size: 23px;
      font-family: sans-serif;
    }

    svg {
      --foreground: black;
      --background: white;
      --grey: grey;
      --blue: blue;
      --red: red;
    }

    @media (prefers-color-scheme: dark) {
      svg {
        --foreground: #ddd;
        --background: black;
        --grey: grey;
        --blue: #6969ff;
        --red: #ff6767;
      }
    }

    /*
     * Line work
     */
    .axis, .tickMark {
      stroke: var(--foreground);
      stroke-width: 1.5;
      fill: none;
      stroke-linecap: square;
    }
    .boundaryLine {
      stroke: var(--grey);
      stroke-width: 1.5;
      stroke-dasharray: 3 4;
      fill: none;
    }
    .curve,
    .curve-continued {
      fill: none;
      stroke: var(--blue);
      stroke-width: 7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .curve-continued {
      stroke-dasharray: 4 16;
    }

    /*
     * Text labels
     */
    .axisLabel {
      text-anchor: middle;
      fill: var(--foreground);
    }
    .axisValue {
      fill: var(--grey);
    }
    .intersectVal {
      fill: var(--red);
      font-size: 32px;
    }
    .axisValue.vert, .intersectVal.vert {
      text-anchor: end;
    }
    .axisValue.horz, .intersectVal.horz {
      text-anchor: middle;
    }
    </style>
  </defs>
  <!-- Translate to origin -->
  <g transform="translate(130 420)">
    <!-- 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="-100" x2="-20" y2="-100" class="tickMark"/>
    <line y1="-200" x2="-20" y2="-200" class="tickMark"/>
    <line y1="-300" x2="-20" y2="-300" class="tickMark"/>
    <line y1="-400" x2="-20" y2="-400" class="tickMark"/>
    <text x="-30" y="-100" dy="0.3em" class="axisValue vert">0.25</text>
    <text x="-30" y="-200" dy="0.3em" class="axisValue vert">0.5</text>
    <text x="-30" y="-300" dy="0.3em" class="axisValue vert">0.75</text>
    <text x="-30" y="-400" dy="0.3em" class="axisValue vert">1</text>
    <text x="200" y="-100" class="axisLabel"
      transform="rotate(-90)">Output progress</text>
    <!-- X axis -->
    <line x2="400" class="axis"/>
    <line x1="100" x2="100" y2="20" class="tickMark"/>
    <line x1="200" x2="200" y2="20" class="tickMark"/>
    <line x1="300" x2="300" y2="20" class="tickMark"/>
    <line x1="400" x2="400" y2="20" class="tickMark"/>
    <text x="100" y="20" dy="1.1em" class="axisValue horz">0.25</text>
    <text x="200" y="20" dy="1.1em" class="axisValue horz">0.5</text>
    <text x="300" y="20" dy="1.1em" class="axisValue horz">0.75</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="-20" y="20" class="axisValue">0</text>
    <!-- Curve -->
    <path d="
      M0 0 L36.4 -25 L72.8 -100 L109.2 -225 L145.6 -400 L182 -325 L218 -300 L254.4 -325 L290.8 -400 L309.2 -381.25 L327.2 -375 L345.6 -381.25 L363.6 -400 L382 -393.75 L400 -400
    " class="curve"/>
    <path d="
      M-100 68.68
      L0 0
      M400 -400
      L500 -400
    " class="curve-continued"/>
  </g>
</svg>