files/en-us/web/api/svganimatednumber/animval/index.md
{{APIRef("SVG")}}
The animVal read-only property of the {{domxref("SVGAnimatedNumber")}} interface represents the animated value of an SVG element's numeric attribute.
Some animatable SVG attributes accept a single number, such as the {{SVGAttr("radius")}} attribute of the {{SVGElement("circle")}} or {{SVGElement("ellipse")}} elements and the {{SVGAttr("width")}} and {{SVGAttr("height")}} attributes of the {{SVGElement("rect")}} element, and many others. The animVal attribute provides access to the current animated value of the animatable numeric attribute during animations.
A number; the current value of the animated attribute as a float.
This example includes a {{SVGElement("path")}} element with a nested {{SVGElement("animate")}} element that animates the value of the path's {{SVGAttr("pathLength")}} attribute:
<path d="M 0,40 h100" pathLength="90" id="path">
<animate
attributeName="pathLength"
values="50; 90; 50;"
dur="10s"
repeatCount="indefinite" />
</path>
const path = document.querySelector("path");
console.log(path.pathLength.animVal); // output: 50
console.log(path.pathLength.baseVal); // output: 90
We use the animVal property to access the current value of the animating pathLength, while the {{domxref("SVGAnimatedNumber.baseVal")}} reflects the base (non-animating) value of the {{domxref("SVGGeometryElement.pathLength", "pathLength")}}.
{{Specifications}}
{{Compat}}