Top Features of the Angular Signature Control

[{"selector":"#anim-6aaccb98-e9ff-4df7-adc0-545e79979d2a","keyframes":{"transform":["translate3d(-126.83824%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b689bd75-014e-4e36-89bf-3ea715e9c338","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c415784f-b323-45d0-b4d8-50f0d5b1f15b","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] · Draw a signature · Save a signature · Customization · Loading

[{"selector":"#anim-7dd29851-af55-41e3-a83a-997ca34efceb","keyframes":{"transform":["translate3d(-115.13158%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-baff6ff5-1091-46de-9e9a-4a3fa1fb9bd5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9dc881ac-8728-49cb-a5d5-39d20bdf12de","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-041cdbc8-8a02-4a1e-8aa4-a34ae7723fc9","keyframes":{"transform":["translate3d(-115.13158%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9f728b84-35d9-45ed-8485-461ac63d0362","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d789ed15-9bfb-482f-9de3-dda9a7339155","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Draw a signature The Draw method is used to render text as a signature, with a selection of font families such as Arial and Serif, along with various font sizes. Its parameters include text, font family, and font size.

[{"selector":"#anim-7fc8f658-b1aa-4a8d-aa6b-389b032b7a58","keyframes":{"transform":["translate3d(-115.13158%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-908b4557-c2f3-4f5b-99cf-7b92f8b1c885","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c11584af-b1b7-4965-beef-de1a09db4971","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-d6c116b6-0d7a-4743-b4ea-0a80a0bf3485","keyframes":{"transform":["translate3d(-115.46053%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fb1d6962-4845-42ec-b55e-de698cf311f4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2572d016-4463-4d7b-92de-58fe73d86884","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] The Signature component preserves signatures in formats such as base64, blob, and various image types including PNG, JPEG, and SVG. Save a signature

[{"selector":"#anim-a720c3a4-2256-4690-acf5-c82d79352c37","keyframes":{"transform":["translate3d(-115.78948%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f52fee29-217f-4826-9392-99ab285d6d86","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-962c5609-132a-45c9-b7d0-778d7c144ef6","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-ad12255e-d218-4244-9077-772a87871f5f","keyframes":{"transform":["translate3d(-115.46053%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7d2b9202-2067-4085-9841-999b98bd9050","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2bf21352-5b3a-45fb-bff3-e5cb8f9fb609","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Customization Use diverse customization features: background color, background image, stroke color, stroke width, save with background, undo, redo, clear, read-only mode, and disable functionality.

[{"selector":"#anim-2784d1ec-acbe-4624-b286-8efd8f382aa8","keyframes":{"transform":["translate3d(-115.46053%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-36c5ef23-36d8-47de-999b-88b8752dfb45","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f8affd68-7ed7-40b5-8283-51a1b775328c","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-ade7e52b-6103-45b1-a4d0-c8f0c8879401","keyframes":{"transform":["translate3d(-115.78948%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-35231569-236b-4311-9e68-c7a8daa110d3","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-96915132-28af-435e-8055-c0f57de81274","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] The Signature component enables the loading of predrawn signatures, facilitating the opening of signatures through either hosted/online URLs or base64 formats. Loading

[{"selector":"#anim-0398a1ae-00c5-4f02-81ed-24dbd188d083","keyframes":{"transform":["translate3d(-115.97444%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-54997e0e-ab43-42c4-9804-791cd8f8bba4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-402383f1-c78e-4500-8a51-28c0abc1c157","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-ddd3f8fc-ce9f-458e-a46c-2ca46d8b46ab","keyframes":{"transform":["translate3d(-115.72327%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-81094af3-6cc2-4559-82d6-dc5f360f2632","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e121ce8c-7c4e-4d33-91f6-c065864b4884","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-b4d9510a-a7d2-4f71-b05f-303e6c168357","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":1,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] Syncfusion Angular Signature Pad The Angular Signature component is a graphical interface that allows users to draw smooth vector signatures with variable-width Bezier curves and save signatures as images. Users can use a finger, pen, or mouse on desktop and mobile devices to draw signatures. No credit card required.