animations/checkbox.xml

<?xml version="1.0" encoding="utf-8" ?>
<screenplay xmlns="urn:screenplay">

	<path id="check">
		<moveTo x="20" y="50" />
        <quadTo x1="40" y1="70" x2="40" y2="77" />
		<quadTo x1="45" y1="55" x2="75" y2="30" />
	</path>

    <roundRect id="frame"
               left="3" top="3" right="97" bottom="97"
               rx="17" ry="17" />

	<event kind="onLoad">
		<paint antiAlias="true" />

        <!-- draw the background -->

        <paint stroke="true" strokeWidth="4">
            <color color="0x66000000"/>
        </paint>
        <matrix translate="[0,2]"/>
        <add use="frame" />
        <paint>
            <color color="black"/>
        </paint>
        <matrix translate="[0,-2]"/>
        <add use="frame" />

        <paint stroke="false">
			<linearGradient points="[0,frame.top,0,frame.bottom]" tileMode="clamp"
                    offsets="[0,0.65,1]">
				<color color="#F2F2F2" />
				<color color="#AFAFAF" />
				<color color="#C7C7C7" />
			</linearGradient>
        </paint>
        <add use="frame" />

        <!-- draw the checkmark background -->

		<paint stroke="true" strokeWidth="9">
            <shader/>
            <blur radius="1" blurStyle="normal"/>
            <color color="0x88777777"/>
        </paint>
        <matrix translate="[0,-2]" />
        <add use="check" />

		<paint>
            <color color="0x88BBBBBB"/>
        </paint>
        <matrix translate="[0,4]" />
        <add use="check" />

        <!-- draw the checkmark -->

		<paint>
            <maskFilter/>
            <color color="#66CC00"/>
        </paint>
        <matrix translate="[0,-2]" />
        <add use="check" />

	</event>

</screenplay>