| CARVIEW |
Select Language
HTTP/2 200
content-type: text/html
x-guploader-uploadid: AAwnv3Ie5lP1RFF0ujhrav3QS_R1_4U-tx5kKd-eg0dyXSJvXcR5the-d2PZ8Kcs0jwhfvou
cache-control: public, max-age=3600
expires: Fri, 10 Oct 2025 12:18:15 GMT
last-modified: Fri, 10 Oct 2025 01:07:22 GMT
etag: W/"768bed5ab9e473b62ec25918eed347c1"
x-goog-generation: 1760058442670510
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 161521
x-goog-meta-goog-reserved-file-mtime: 1760057008
x-goog-hash: crc32c=0MiyRw==, md5=dovtWrnkc7YuwlkY7tNHwQ==
x-goog-storage-class: STANDARD
accept-ranges: none
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: 8341fe28dd05534acec7abba4ae5c230
date: Fri, 10 Oct 2025 11:18:15 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
keySplines - SVG | MDN
Toggle sidebar
keySplines
The keySplines attribute defines a set of Bézier curve control points associated with the keyTimes list, defining a cubic Bézier function that controls interval pacing.
This attribute is ignored unless the calcMode attribute is set to spline.
If there are any errors in the keySplines specification (bad values, too many or too few values), the animation will not occur.
You can use this attribute with the following SVG elements:
Example
html,
body,
svg {
height: 100%;
}
html
<svg viewBox="0 0 120 120" xmlns="https://www.w3.org/2000/svg">
<circle cx="60" cy="10" r="10">
<animate
attributeName="cx"
dur="4s"
calcMode="spline"
repeatCount="indefinite"
values="60; 110; 60; 10; 60"
keyTimes="0; 0.25; 0.5; 0.75; 1"
keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1" />
<animate
attributeName="cy"
dur="4s"
calcMode="spline"
repeatCount="indefinite"
values="10; 60; 110; 60; 10"
keyTimes="0; 0.25; 0.5; 0.75; 1"
keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1" />
</circle>
</svg>
Usage notes
| Value |
<control-point> [ ;
<control-point> ]* ;?
|
|---|---|
| Default value | None |
| Animatable | No |
The attribute value is a semicolon-separated list of control point descriptions.
<control-point>-
Each control point description is a set of four values:
x1 y1 x2 y2, describing the Bézier control points for one time segment. ThekeyTimesvalues that define the associated segment are the Bézier "anchor points", and thekeySplinesvalues are the control points. Thus, there must be one fewer sets of control points than there arekeyTimes.The values of
x1 y1 x2 y2must all be in the range 0 to 1. - Safari issues
-
keyTimesvalues should be separated with semicolon without space before, f.e:keyTimes="0; 0.25; 0.5; 0.75; 1"
Specifications
| Specification |
|---|
| SVG Animations Level 2 # KeySplinesAttribute |