tool selection and play/skip animation

1 files changed, 253 insertions, 0 deletions

diff --git a/components/play-skip.tsx b/components/play-skip.tsx
new file mode 100644
index 0000000..8493710
--- /dev/null
+++ b/components/play-skip.tsx
@@ -0,0 +1,253 @@
+export default function PlaySkipIconAni() {
+	return <div className='shapeshifter play-pause ani'>
+		<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 456 24' width='456' height='24'>
+			<g>
+				<path
+					d='M16.8 11.4c.331.442.242 1.069-.2 1.4l-4 3c-.442.331-1.069.242-1.4-.2-.331-.442-.242-1.069.2-1.4l4-3c.442-.331 1.069-.242 1.4.2z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M11.2 8.4c.331-.442.958-.531 1.4-.2l4 3c.442.331.531.958.2 1.4-.331.442-.958.531-1.4.2l-4-3c-.442-.331-.531-.958-.2-1.4z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M9.187 17.886l8.386-5.125c.265-.162.427-.45.427-.761s-.162-.599-.427-.761L9.187 6.114C9.065 6.04 8.924 6 8.78 6c-.431 0-.78.349-.78.78v10.44c0 .431.349.78.78.78.144 0 .285-.04.407-.114z'
+				/>
+			</g>
+			<g>
+				<path
+					d='M40.801 11.397c.333.439.248 1.065-.191 1.397l-3.971 3.015c-.439.332-1.065.247-1.397-.192-.333-.439-.248-1.064.191-1.397l3.971-3.014c.439-.333 1.065-.248 1.397.191z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M35.242 8.383c.332-.439.958-.524 1.397-.192l3.971 3.015c.439.332.524.958.191 1.397-.332.439-.958.524-1.397.191L35.433 9.78c-.439-.333-.524-.958-.191-1.397z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M33.173 17.879l8.371-5.118c.265-.162.427-.45.427-.761s-.162-.599-.427-.761l-8.371-5.118c-.122-.074-.263-.114-.407-.114-.431 0-.78.349-.78.78v10.426c0 .431.349.78.78.78.144 0 .285-.04.407-.114z'
+				/>
+			</g>
+			<g>
+				<path
+					d='M64.807 11.387c.338.427.266 1.049-.161 1.387l-3.869 3.065c-.427.339-1.049.267-1.387-.16-.338-.428-.267-1.049.161-1.387l3.869-3.066c.427-.338 1.048-.267 1.387.161z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M59.39 8.321c.338-.427.96-.499 1.387-.16l3.869 3.065c.427.338.499.96.161 1.387-.339.428-.96.499-1.387.161l-3.869-3.066c-.428-.338-.499-.959-.161-1.387z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M57.122 17.853l8.32-5.092c.265-.162.427-.45.427-.761s-.162-.599-.427-.761l-8.32-5.092c-.123-.074-.264-.114-.408-.114-.431 0-.78.349-.78.78v10.374c0 .431.349.78.78.78.144 0 .285-.04.408-.114z'
+				/>
+			</g>
+			<g>
+				<path
+					d='M88.817 11.366c.35.404.307 1.016-.098 1.366l-3.659 3.17c-.405.35-1.017.307-1.366-.098-.35-.404-.307-1.016.097-1.366l3.66-3.17c.404-.35 1.016-.306 1.366.098z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M83.694 8.196c.349-.405.961-.448 1.366-.098l3.659 3.17c.405.35.448.962.098 1.366-.35.404-.962.448-1.366.098l-3.66-3.17c-.404-.35-.447-.962-.097-1.366z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M81.017 17.8l8.216-5.038c.265-.163.427-.451.427-.762s-.162-.599-.427-.762L81.017 6.2c-.122-.075-.263-.115-.408-.115-.43 0-.779.349-.779.78v10.27c0 .431.349.78.779.78.145 0 .286-.04.408-.115z'
+				/>
+			</g>
+			<g>
+				<path
+					d='M112.835 11.33c.37.365.375.96.01 1.33l-3.299 3.35c-.365.37-.96.375-1.33.01-.37-.364-.375-.96-.01-1.33l3.299-3.35c.365-.37.96-.375 1.33-.01z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M108.216 7.98c.37-.365.965-.36 1.33.01l3.299 3.35c.365.37.36.965-.01 1.33-.37.365-.965.36-1.33-.01l-3.299-3.35c-.365-.37-.36-.966.01-1.33z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M104.837 17.709l8.036-4.946c.265-.163.426-.452.426-.763s-.161-.6-.426-.763l-8.036-4.946c-.122-.075-.264-.116-.409-.116-.43 0-.778.349-.778.779v10.092c0 .43.348.779.778.779.145 0 .287-.041.409-.116z'
+				/>
+			</g>
+			<g>
+				<path
+					d='M136.861 11.277c.399.306.475.878.169 1.277l-2.771 3.615c-.307.398-.879.474-1.278.168-.398-.306-.474-.878-.168-1.277l2.771-3.614c.307-.399.879-.475 1.277-.169z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M132.981 7.663c.399-.306.971-.23 1.278.168l2.771 3.615c.306.399.23.971-.169 1.277-.398.306-.97.23-1.277-.169l-2.771-3.614c-.306-.399-.23-.971.168-1.277z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M128.574 17.576l7.772-4.812c.264-.164.425-.453.425-.764s-.161-.6-.425-.764l-7.772-4.812c-.123-.076-.265-.117-.41-.117-.43 0-.778.348-.778.778v9.83c0 .43.348.778.778.778.145 0 .287-.041.41-.117z'
+				/>
+			</g>
+			<g>
+				<path
+					d='M160.891 11.217c.433.24.589.785.349 1.217l-2.171 3.915c-.24.432-.785.588-1.217.348-.432-.239-.589-.785-.349-1.217l2.171-3.914c.24-.432.785-.589 1.217-.349z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M157.852 7.303c.432-.24.977-.084 1.217.348l2.171 3.915c.24.432.084.977-.349 1.217-.432.24-.977.083-1.217-.349l-2.171-3.914c-.24-.432-.083-.978.349-1.217z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M152.274 17.425l7.473-4.66c.263-.165.424-.454.424-.765s-.161-.6-.424-.765l-7.473-4.66c-.123-.076-.266-.118-.412-.118-.429 0-.777.348-.777.777v9.532c0 .429.348.777.777.777.146 0 .289-.042.412-.118z'
+				/>
+			</g>
+			<g>
+				<path
+					d='M184.918 11.164c.462.181.69.702.509 1.164l-1.639 4.18c-.181.462-.702.69-1.164.509-.461-.181-.689-.702-.508-1.164l1.638-4.181c.181-.461.703-.689 1.164-.508z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M182.624 6.983c.462-.181.983.047 1.164.509l1.639 4.18c.181.462-.047.983-.509 1.164-.461.181-.983-.047-1.164-.508l-1.638-4.181c-.181-.462.047-.983.508-1.164z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M176.009 17.29l7.206-4.524c.263-.165.423-.454.423-.766s-.16-.601-.423-.766l-7.206-4.524c-.124-.078-.268-.12-.414-.12-.429 0-.776.348-.776.776v9.268c0 .428.347.776.776.776.146 0 .29-.042.414-.12z'
+				/>
+			</g>
+			<g>
+				<path
+					d='M208.939 11.122c.485.135.769.637.634 1.122l-1.219 4.39c-.134.485-.637.769-1.122.635-.484-.135-.769-.638-.634-1.122l1.219-4.391c.135-.484.637-.769 1.122-.634z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M207.232 6.731c.485-.134.988.15 1.122.635l1.219 4.39c.135.485-.149.987-.634 1.122-.485.135-.987-.15-1.122-.634l-1.219-4.391c-.135-.484.15-.987.634-1.122z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M199.799 17.185l6.997-4.418c.263-.166.423-.455.423-.767s-.16-.601-.423-.767l-6.997-4.418c-.124-.078-.268-.12-.414-.12-.429 0-.775.347-.775.775v9.06c0 .428.346.775.775.775.146 0 .29-.042.414-.12z'
+				/>
+			</g>
+			<g>
+				<path
+					d='M232.955 11.09c.503.099.83.587.731 1.09l-.898 4.551c-.099.502-.587.83-1.09.73-.502-.099-.83-.587-.73-1.089l.897-4.552c.1-.502.588-.829 1.09-.73z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M231.698 6.539c.503-.1.991.228 1.09.73l.898 4.551c.099.503-.228.991-.731 1.09-.502.099-.99-.228-1.09-.73l-.897-4.552c-.1-.502.228-.99.73-1.089z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M223.639 17.103l6.836-4.335c.263-.167.423-.456.423-.768s-.16-.601-.423-.768l-6.836-4.335c-.124-.079-.268-.121-.416-.121-.427 0-.774.346-.774.774v8.9c0 .428.347.774.774.774.148 0 .292-.042.416-.121z'
+				/>
+			</g>
+			<g>
+				<path
+					d='M256.967 11.065c.516.072.877.549.805 1.065l-.651 4.675c-.072.516-.55.876-1.066.804-.516-.072-.876-.549-.804-1.065l.651-4.674c.072-.516.549-.877 1.065-.805z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M256.055 6.391c.516-.072.994.288 1.066.804l.651 4.675c.072.516-.289.993-.805 1.065-.516.072-.993-.289-1.065-.805l-.651-4.674c-.072-.516.288-.993.804-1.065z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M247.516 17.041l6.713-4.272c.263-.167.422-.457.422-.769s-.159-.602-.422-.769l-6.713-4.272c-.124-.079-.269-.122-.416-.122-.428 0-.774.347-.774.774v8.778c0 .427.346.774.774.774.147 0 .292-.043.416-.122z'
+				/>
+			</g>
+			<g>
+				<path
+					d='M280.977 11.046c.526.051.912.52.861 1.046l-.462 4.769c-.051.527-.52.913-1.046.862-.527-.051-.913-.52-.861-1.046l.462-4.769c.051-.527.519-.913 1.046-.862z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M280.33 6.277c.526-.051.995.335 1.046.862l.462 4.769c.051.526-.335.995-.861 1.046-.527.051-.995-.335-1.046-.862l-.462-4.769c-.052-.526.334-.995.861-1.046z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M271.422 16.994l6.618-4.225c.263-.167.422-.457.422-.769s-.159-.602-.422-.769l-6.618-4.225c-.125-.079-.27-.122-.417-.122-.428 0-.774.347-.774.774v8.684c0 .427.346.774.774.774.147 0 .292-.043.417-.122z'
+				/>
+			</g>
+			<g>
+				<path
+					d='M304.984 11.032c.535.035.94.497.905 1.031l-.317 4.842c-.035.534-.497.94-1.032.905-.534-.035-.939-.497-.904-1.032l.316-4.841c.035-.535.498-.94 1.032-.905z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M304.54 6.19c.535-.035.997.371 1.032.905l.317 4.842c.035.534-.37.996-.905 1.031-.534.035-.997-.37-1.032-.905l-.316-4.841c-.035-.535.37-.997.904-1.032z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M295.349 16.957l6.546-4.188c.263-.167.422-.457.422-.769s-.159-.602-.422-.769l-6.546-4.188c-.125-.079-.269-.122-.417-.122-.427 0-.774.346-.774.773v8.612c0 .427.347.773.774.773.148 0 .292-.043.417-.122z'
+				/>
+			</g>
+			<g>
+				<path
+					d='M328.99 11.021c.54.023.961.48.938 1.02l-.207 4.897c-.023.541-.48.961-1.021.938-.54-.023-.96-.48-.938-1.021l.207-4.896c.023-.541.48-.961 1.021-.938z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M328.7 6.124c.541-.023.998.397 1.021.938l.207 4.897c.023.54-.398.997-.938 1.02-.541.023-.998-.397-1.021-.938l-.207-4.896c-.022-.541.398-.998.938-1.021z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M319.294 16.929l6.491-4.159c.262-.168.422-.458.422-.77s-.16-.602-.422-.77l-6.491-4.159c-.125-.08-.27-.123-.417-.123-.428 0-.774.346-.774.774v8.556c0 .428.346.774.774.774.147 0 .292-.043.417-.123z'
+				/>
+			</g>
+			<g>
+				<path
+					d='M352.994 11.012c.545.014.976.468.962 1.013l-.125 4.938c-.013.545-.467.976-1.012.962-.545-.014-.976-.467-.963-1.012l.125-4.938c.014-.545.468-.976 1.013-.963z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M352.819 6.075c.545-.014.999.417 1.012.962l.125 4.938c.014.545-.417.999-.962 1.013-.545.013-.999-.418-1.013-.963l-.125-4.938c-.013-.545.418-.998.963-1.012z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M343.253 16.908l6.451-4.138c.262-.168.421-.458.421-.77s-.159-.602-.421-.77l-6.451-4.138c-.125-.08-.269-.123-.417-.123-.427 0-.774.346-.774.773v8.516c0 .427.347.773.774.773.148 0 .292-.043.417-.123z'
+				/>
+			</g>
+			<g>
+				<path
+					d='M376.997 11.007c.548.007.987.458.98 1.006l-.067 4.967c-.007.548-.458.987-1.007.98-.548-.007-.987-.458-.98-1.007l.067-4.966c.007-.549.458-.988 1.007-.98z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M376.903 6.04c.549-.007 1 .432 1.007.98l.067 4.967c.007.548-.432.999-.98 1.006-.549.008-1-.431-1.007-.98l-.067-4.966c-.007-.549.432-1 .98-1.007z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M367.224 16.894l6.421-4.124c.263-.168.422-.458.422-.77s-.159-.602-.422-.77l-6.421-4.124c-.125-.08-.27-.123-.418-.123-.427 0-.773.346-.773.773v8.488c0 .427.346.773.773.773.148 0 .293-.043.418-.123z'
+				/>
+			</g>
+			<g>
+				<path
+					d='M400.999 11.003c.55.003.994.452.991 1.003l-.028 4.986c-.003.55-.452.994-1.003.991-.55-.003-.994-.452-.991-1.003l.028-4.986c.003-.55.452-.994 1.003-.991z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M400.959 6.017c.551-.003 1 .441 1.003.991l.028 4.986c.003.551-.441 1-.991 1.003-.551.003-1-.441-1.003-.991l-.028-4.986c-.003-.551.441-1 .991-1.003z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M391.205 16.884l6.402-4.114c.262-.168.421-.458.421-.77s-.159-.602-.421-.77l-6.402-4.114c-.125-.08-.27-.123-.418-.123-.427 0-.773.346-.773.773v8.468c0 .427.346.773.773.773.148 0 .293-.043.418-.123z'
+				/>
+			</g>
+			<g>
+				<path
+					d='M425 11.001c.551 0 .998.449.998 1l-.007 4.997c-.001.552-.449.999-1.001.998-.551-.001-.998-.449-.998-1.001l.007-4.996c.001-.552.449-.999 1.001-.998z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M424.99 6.004c.552-.001 1 .446 1.001.998l.007 4.997c0 .551-.447 1-.998 1-.552.001-1-.446-1.001-.998l-.007-4.996c0-.552.447-1 .998-1.001z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M415.194 16.879l6.392-4.109c.262-.168.421-.458.421-.77s-.159-.602-.421-.77l-6.392-4.109c-.125-.08-.27-.123-.418-.123-.427 0-.773.346-.773.773v8.458c0 .427.346.773.773.773.148 0 .293-.043.418-.123z'
+				/>
+			</g>
+			<g>
+				<path
+					d='M449 11c.552 0 1 .448 1 1v5c0 .552-.448 1-1 1s-1-.448-1-1v-5c0-.552.448-1 1-1z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M449 6c.552 0 1 .448 1 1v5c0 .552-.448 1-1 1s-1-.448-1-1V7c0-.552.448-1 1-1z'
+					fill-rule='evenodd'
+				/>
+				<path
+					d='M439.191 16.877l6.388-4.107c.262-.168.421-.458.421-.77s-.159-.602-.421-.77l-6.388-4.107c-.125-.08-.27-.123-.418-.123-.427 0-.773.346-.773.773v8.454c0 .427.346.773.773.773.148 0 .293-.043.418-.123z'
+				/>
+			</g>
+		</svg>
+	</div>;
+}