Animating Pattern

Start Start <pattern id="pat" x="0" y="0" width="30" height="30" overflow="visible" patternUnits="userSpaceOnUse" preserveAspectRatio="xMidYMid meet"> <rect x="0" y="0" width="30" height="30" > <animate begin="st.click" attributeName="r" values="13;1;13" repeatCount="2" dur="2s"/> <animate begin="st.click" attributeName="fill" values="lemonchiffon;mediumslateblue;lemonchiffon" repeatCount="1" dur="4s"/> <animate begin="st.click" attributeName="width" values="30;0;30" repeatCount="1" dur="4s"/> <animate begin="st.click" attributeName="height" values="30;0;30" repeatCount="1" dur="4s"/> <animate begin="st.click" attributeName="x" values="0;30;0" repeatCount="1" dur="4s"/> <animate begin="st.click" attributeName="y" values="0;30;0" repeatCount="1" dur="4s"/></rect> <circle transform="translate(15 15)" cx="0" cy="0" r="13" style="fill:paleturquoise"> <animate begin="st.click" attributeName="r" values="13;1;13" repeatCount="2" dur="2s"/> <animate begin="st.click" attributeName="fill" values="paleturquoise;mediumslateblue;paleturquoise" repeatCount="2" dur="2s"/> <animate begin="st.click" attributeName="cx" values="0;14;0" repeatCount="2" dur="2s"/> <animate begin="st.click" attributeName="cy" values="0;14;0" repeatCount="2" dur="2s"/> </circle> </pattern> http://pilat.free.fr/