css-easing-1/frames-timing-func-examples.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 310 160">
  <defs>
    <style type="text/css">
    svg {
      font-size: 15px;
      font-family: sans-serif;
    }

    /*
     * Line work
     */
    .axis, .tickMark {
      stroke: black;
      stroke-width: 1.2;
      fill: none;
      stroke-linecap: square;
    }
    .curve {
      fill: none;
      stroke: blue;
      stroke-width: 3;
      stroke-linecap: round;
    }
    .dotted {
      fill: none;
      stroke: blue;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-dasharray: 2 6;
    }
    .filledEndPoint {
      fill: blue;
      stroke: none;
    }
    .openEndPoint {
      fill: none;
      stroke: blue;
      stroke-width: 1.5;
    }

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

    /*
     * Masking
     */
    .lineKnockout {
      fill: none;
      stroke: #555;
      stroke-width: 2;
    }
    .circleKnockout {
      fill: #555;
      stroke: none;
    }

    /*
     * Text labels
     */
    .axisValue {
      fill: grey;
    }
    .axisValue.vert {
      text-anchor: end;
    }
    .axisValue.horz {
      text-anchor: middle;
    }
    .pointLabel {
      fill: black;
      font-size: 11px;
    }
    .paramLabel {
      font-size: 15px;
      text-anchor: middle;
    }
    </style>
    <!-- Graph background -->
    <g id="graph" style="font-size: 10px">
      <!-- Backing -->
      <rect y="-100" width="100" height="100" class="graphBackground"/>
      <!-- Y axis -->
      <line y2="-100" class="axis"/>
      <line y1="-50" x2="-5" y2="-50" class="tickMark"/>
      <line y1="-100" x2="-5" y2="-100" class="tickMark"/>
      <text x="-9" y="-50" dy="0.3em" class="axisValue vert">0.5</text>
      <text x="-9" y="-100" dy="0.3em" class="axisValue vert">1</text>
      <!-- X axis -->
      <line x2="100" class="axis"/>
      <line x1="50" x2="50" y2="5" class="tickMark"/>
      <line x1="100" x2="100" y2="5" class="tickMark"/>
      <text x="50" y="7.5" dy="1.1em" class="axisValue horz">0.5</text>
      <text x="100" y="7.5" dy="1.1em" class="axisValue horz">1</text>
      <!-- Origin -->
      <text x="-0.5em" y="1em" class="axisValue" text-anchor="end">0</text>
    </g>
  </defs>
  <g transform="translate(30 110)">
    <!-- frames(2) -->
    <g>
      <defs>
        <mask id="frames2GridMask" maskUnits="userSpaceOnUse"
          x="-30" y="-110" width="135" height="135">
          <rect x="-30" y="-110" width="100%" height="100%" fill="white"/>
          <circle cx="50" r="3" class="circleKnockout"/>
        </mask>
        <mask id="frames2LineMask">
          <rect x="-5" y="-105" width="110" height="110" fill="white"/>
          <circle cx="50" r="3" fill="black"/>
          <circle cx="100" cy="-100" r="3" fill="black"/>
        </mask>
      </defs>
      <use xlink:href="#graph" mask="url(#frames2GridMask)"/>
      <g mask="url(#frames2LineMask)">
        <path d="M0 0h50m0-100h50" class="curve"/>
        <path d="M50 0v-100" class="dotted"/>
      </g>
      <circle r="3.5" class="filledEndPoint"/>
      <circle cx="50" r="3" class="openEndPoint"/>
      <circle cx="50" cy="-100" r="3.5" class="filledEndPoint"/>
      <circle cx="100" cy="-100" r="3.5" class="filledEndPoint"/>
      <text x="50" y="40" class="paramLabel">frames(2)</text>
    </g>
    <!-- frames(4) -->
    <g transform="translate(170 0)">
      <defs>
        <mask id="frames4GridMask" maskUnits="userSpaceOnUse"
          x="-30" y="-110" width="135" height="135">
          <rect x="-30" y="-110" width="100%" height="100%" fill="white"/>
          <circle cx="25" r="3" class="circleKnockout"/>
        </mask>
        <mask id="frames4LineMask">
          <rect x="-5" y="-105" width="110" height="110" fill="white"/>
          <circle cx="25" r="3" fill="black"/>
          <circle cx="50" cy="-33.3" r="3" fill="black"/>
          <circle cx="75" cy="-66.6" r="3" fill="black"/>
          <circle cx="100" cy="-100" r="3" fill="black"/>
        </mask>
      </defs>
      <use xlink:href="#graph" mask="url(#frames4GridMask)"/>
      <g mask="url(#frames4LineMask)">
        <path d="M0 0h25m0-33.3h25m0-33.3h25m0-33.3h25" class="curve"/>
        <path d="M25 0v-33.3m25 0v-33.3m25 0v-33.3" class="dotted"/>
      </g>
      <circle r="3.5" class="filledEndPoint"/>
      <circle cx="25" r="3" class="openEndPoint"/>
      <circle cx="25" cy="-33.3" r="3.5" class="filledEndPoint"/>
      <circle cx="50" cy="-33.3" r="3" class="openEndPoint"/>
      <circle cx="50" cy="-66.6" r="3.5" class="filledEndPoint"/>
      <circle cx="75" cy="-66.6" r="3" class="openEndPoint"/>
      <circle cx="75" cy="-100" r="3.5" class="filledEndPoint"/>
      <circle cx="100" cy="-100" r="3.5" class="filledEndPoint"/>
      <text x="50" y="40" class="paramLabel">frames(4)</text>
    </g>
  </g>
</svg>