Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <svg id="game" viewBox="0 0 530 395" preserveAspectRatio = "xMidYMid meet">
	<defs>
		<g id="r0" transform="matrix(1, 0, 0, 1, 25, 15)">
			<path d="M15,-7.5L15 7.5L0 15L-15 7.5L-15 -7.5L0 -15L15 -7.5" />
		</g>
		<g id="head1" class="head" transform="matrix(1, 0, 0, 1, 11.15, 40.2)">
			<path d="M7.25,-27.25Q6.95 -24 4.1 -22.8Q1.4 -20.15 -3 -20.5Q-5.55 -21.35 -7.95 -22.65Q-10.9 -24.3 -11.15 -27.85Q-11.35 -31.25 -9.15 -33.9Q-6.95 -36.6 -3.55 -37.05Q-0.15 -37.45 2.65 -35.55Q5.45 -33.6 6.7 -30.45Q7.4 -28.95 7.25 -27.25 M2.35,-40.15Q4.05 -40.6 5.85 -33.7Q6.4 -31.55 6.35 -30.85L5.1 -30.5Q2.45 -31.6 0.95 -32.6Q-1.1 -33.95 -1.9 -35.55L-1.8 -35.6L-1.7 -35.8L-0.95 -35.6L-0.6 -35.45L0.45 -37.8Q1.55 -39.95 2.35 -40.15M-10.7,-35.5L-10.25 -39.95Q-8.95 -39.25 -7.85 -38.35Q-6.05 -36.95 -5.7 -35.8Q-5.35 -34.35 -6.85 -32.8Q-8.1 -31.4 -9.8 -30.8Q-10.75 -32.55 -10.7 -35.5" />
		</g>
		<g id="head2" class="head" transform="matrix(1, 0, 0, 1, 13.5, 40.55)">
			<path d="M1.65,-26.85L0.5 -25.5Q-0.2 -25 -1.5 -24.85L-4.2 -24.15L-6.5 -24.25Q-8.6 -23.9 -10.55 -24.95Q-13.2 -26.65 -13.5 -29.85L-12.05 -31.1Q-11.95 -33.7 -10.2 -35.5Q-9.15 -36.75 -7.75 -37.15L-7.35 -40.55Q-0.9 -35.6 1.05 -33.65Q4.2 -30.55 1.65 -26.85" />
		</g>
		<g id="b1-1" class="body" transform="matrix(1, 0, 0, 1, 12.35, 33.05)">
			<path d="M11.4,-6.8Q12.65 -7.45 13.55 -9.3Q14.5 -11.1 14.5 -12.8Q14.5 -16.3 11.9 -20.5Q9.25 -24.75 9.25 -26.35L9.35 -28.5Q9.65 -29.65 10.9 -30.55 M10.3,-5.9Q10.3 -2.6 8.05 -0.25Q5.8 2.1 2.6 2.1Q-0.6 2.1 -2.85 -0.25Q-5.1 -2.6 -5.1 -5.9Q-5.1 -9.2 -2.85 -11.55Q-0.6 -13.9 2.6 -13.9Q5.8 -13.9 8.05 -11.55Q10.3 -9.2 10.3 -5.9 M10.3,-5.9Q10.3 -2.6 8.05 -0.25Q5.8 2.1 2.6 2.1Q-0.6 2.1 -2.85 -0.25Q-5.1 -2.6 -5.1 -5.9Q-5.1 -9.2 -2.85 -11.55Q-0.6 -13.9 2.6 -13.9Q5.8 -13.9 8.05 -11.55Q10.3 -9.2 10.3 -5.9z M3.4,-13.3Q3.4 -10.65 1.6 -8.8Q-0.25 -6.9 -2.85 -6.9Q-5.4 -6.9 -7.25 -8.8Q-9.1 -10.65 -9.1 -13.3Q-9.1 -15.95 -7.25 -17.85Q-5.4 -19.7 -2.85 -19.7Q-0.25 -19.7 1.6 -17.85Q3.4 -15.95 3.4 -13.3 M3.4,-13.3Q3.4 -10.65 1.6 -8.8Q-0.25 -6.9 -2.85 -6.9Q-5.4 -6.9 -7.25 -8.8Q-9.1 -10.65 -9.1 -13.3Q-9.1 -15.95 -7.25 -17.85Q-5.4 -19.7 -2.85 -19.7Q-0.25 -19.7 1.6 -17.85Q3.4 -15.95 3.4 -13.3z M4.95,2.6L9.6 -0.8 M-9,-12.7L-6.85 -3.5 M-6.85,-3.5L-8.6 4.75 M-8.6,4.75L-9.85 4.75 M-0.5,-11.05L1.25 -2.25 M1.25,-2.25L-1.25 5.85 M-1.15,5.6L-3.45 6" />
		</g>
		<g id="b1-2" class="body" transform="matrix(1, 0, 0, 1, 13.15, 36.25)">
			<path d="M11.4,-11.2Q12.65 -11.8 13.55 -13.6Q14.5 -15.3 14.5 -16.9Q14.5 -20.2 11.9 -24.2Q9.25 -28.25 9.25 -29.75L9.35 -31.8Q9.65 -32.9 10.9 -33.75 M8.7,-6.95Q6.45 -4.6 3.25 -4.6Q0.05 -4.6 -2.2 -6.95Q-4.45 -9.3 -4.45 -12.6Q-4.45 -15.9 -2.2 -18.25Q0.05 -20.6 3.25 -20.6Q6.45 -20.6 8.7 -18.25Q10.95 -15.9 10.95 -12.6Q10.95 -9.3 8.7 -6.95 M8.7,-6.95Q6.45 -4.6 3.25 -4.6Q0.05 -4.6 -2.2 -6.95Q-4.45 -9.3 -4.45 -12.6Q-4.45 -15.9 -2.2 -18.25Q0.05 -20.6 3.25 -20.6Q6.45 -20.6 8.7 -18.25Q10.95 -15.9 10.95 -12.6Q10.95 -9.3 8.7 -6.95z M-0.45,-8.35Q-2.3 -6.45 -4.9 -6.45Q-7.45 -6.45 -9.3 -8.35Q-11.15 -10.2 -11.15 -12.85Q-11.15 -15.5 -9.3 -17.4Q-7.45 -19.25 -4.9 -19.25Q-2.3 -19.25 -0.45 -17.4Q1.35 -15.5 1.35 -12.85Q1.35 -10.2 -0.45 -8.35 M-0.45,-8.35Q-2.3 -6.45 -4.9 -6.45Q-7.45 -6.45 -9.3 -8.35Q-11.15 -10.2 -11.15 -12.85Q-11.15 -15.5 -9.3 -17.4Q-7.45 -19.25 -4.9 -19.25Q-2.3 -19.25 -0.45 -17.4Q1.35 -15.5 1.35 -12.85Q1.35 -10.2 -0.45 -8.35z M7.8,0.4L10.1 -4.9 M-9,-12.7L-6.85 -3.5 M-6.85,-3.5L-8.6 4.75 M-8.6,4.75L-9.85 4.75 M-0.5,-11.05L1.25 -2.25 M1.25,-2.25L-1.25 5.85 M-1.15,5.6L-3.45 6" />
		</g>
		<g id="b1-3" class="body" transform="matrix(1, 0, 0, 1, 19.15, 36.25)">
			<path d="M13,-33.75Q10.3 -33.75 9.7 -30.65Q9.5 -29.75 9.5 -24.75Q9.5 -21.55 7.25 -20.35Q4.25 -18.75 3.5 -17.25 M4.95,-4.95Q2.7 -2.6 -0.5 -2.6Q-3.7 -2.6 -5.95 -4.95Q-8.2 -7.3 -8.2 -10.6Q-8.2 -13.9 -5.95 -16.25Q-3.7 -18.6 -0.5 -18.6Q2.7 -18.6 4.95 -16.25Q7.2 -13.9 7.2 -10.6Q7.2 -7.3 4.95 -4.95 M4.95,-4.95Q2.7 -2.6 -0.5 -2.6Q-3.7 -2.6 -5.95 -4.95Q-8.2 -7.3 -8.2 -10.6Q-8.2 -13.9 -5.95 -16.25Q-3.7 -18.6 -0.5 -18.6Q2.7 -18.6 4.95 -16.25Q7.2 -13.9 7.2 -10.6Q7.2 -7.3 4.95 -4.95z M-6.45,0.15Q-8.3 2.05 -10.9 2.05Q-13.45 2.05 -15.3 0.15Q-17.15 -1.7 -17.15 -4.35Q-17.15 -7 -15.3 -8.9Q-13.45 -10.75 -10.9 -10.75Q-8.3 -10.75 -6.45 -8.9Q-4.65 -7 -4.65 -4.35Q-4.65 -1.7 -6.45 0.15 M-6.45,0.15Q-8.3 2.05 -10.9 2.05Q-13.45 2.05 -15.3 0.15Q-17.15 -1.7 -17.15 -4.35Q-17.15 -7 -15.3 -8.9Q-13.45 -10.75 -10.9 -10.75Q-8.3 -10.75 -6.45 -8.9Q-4.65 -7 -4.65 -4.35Q-4.65 -1.7 -6.45 0.15z M8.2,0.6L7.55 -5.1 M-15.75,8.25L-16 16.1L-16.25 23 M-3.75,1Q-3.75 4.9 -6.35 6.4Q-9.9 8.45 -10.25 9Q-12 11.95 -12.55 13.6Q-13.6 16.65 -13 19.75" />
		</g>

		<g id="b1-4" class="body" transform="matrix(1, 0, 0, 1, 27, 28.25)">
			<path d="M-5.5,-13Q-5.85 -15.55 -2.55 -16.1Q1.1 -16.7 1.25 -19.25Q1.35 -21.4 2.6 -23.25Q4.3 -25.8 7.25 -25.75 M-2.55,0.65Q-4.8 3 -8 3Q-11.2 3 -13.45 0.65Q-15.7 -1.7 -15.7 -5Q-15.7 -8.3 -13.45 -10.65Q-11.2 -13 -8 -13Q-4.8 -13 -2.55 -10.65Q-0.3 -8.3 -0.3 -5Q-0.3 -1.7 -2.55 0.65 M-2.55,0.65Q-4.8 3 -8 3Q-11.2 3 -13.45 0.65Q-15.7 -1.7 -15.7 -5Q-15.7 -8.3 -13.45 -10.65Q-11.2 -13 -8 -13Q-4.8 -13 -2.55 -10.65Q-0.3 -8.3 -0.3 -5Q-0.3 -1.7 -2.55 0.65z M-10.6,8.3Q-12.45 10.2 -15.05 10.2Q-17.6 10.2 -19.45 8.3Q-21.3 6.45 -21.3 3.8Q-21.3 1.15 -19.45 -0.75Q-17.6 -2.6 -15.05 -2.6Q-12.45 -2.6 -10.6 -0.75Q-8.8 1.15 -8.8 3.8Q-8.8 6.45 -10.6 8.3 M-10.6,8.3Q-12.45 10.2 -15.05 10.2Q-17.6 10.2 -19.45 8.3Q-21.3 6.45 -21.3 3.8Q-21.3 1.15 -19.45 -0.75Q-17.6 -2.6 -15.05 -2.6Q-12.45 -2.6 -10.6 -0.75Q-8.8 1.15 -8.8 3.8Q-8.8 6.45 -10.6 8.3z M-1.25,-3Q-0.5 -3.15 1.6 -4.55L4.25 -6.25L4.25 1.25Q4 1.25 4 1.75L3.75 1.75 M-11.5,11.25Q-10 10.4 -9.5 10.5L-9.5 13.75L-12 21.75Q-12.3 22.65 -13.2 23.3L-14.75 24.5L-16 26.3Q-16.65 27 -17.7 26.75 M-24.5,29L-22.75 29Q-19.65 23.1 -20.25 13.25" />
		</g>

		<g id="b1-5" class="body" transform="matrix(1, 0, 0, 1, 28.6, 20.25)">
			<path d="M-9,-2Q-7.2 -3 -5.75 -5.25L-3.25 -10L-0.15 -13.55Q1.85 -15.6 2 -17.75 M-7.55,11.45Q-9.8 13.8 -13 13.8Q-16.2 13.8 -18.45 11.45Q-20.7 9.1 -20.7 5.8Q-20.7 2.5 -18.45 0.15Q-16.2 -2.2 -13 -2.2Q-9.8 -2.2 -7.55 0.15Q-5.3 2.5 -5.3 5.8Q-5.3 9.1 -7.55 11.45 M-7.55,11.45Q-9.8 13.8 -13 13.8Q-16.2 13.8 -18.45 11.45Q-20.7 9.1 -20.7 5.8Q-20.7 2.5 -18.45 0.15Q-16.2 -2.2 -13 -2.2Q-9.8 -2.2 -7.55 0.15Q-5.3 2.5 -5.3 5.8Q-5.3 9.1 -7.55 11.45z M-15.6,4.75Q-13.8 6.65 -13.8 9.3Q-13.8 11.95 -15.6 13.8Q-17.45 15.7 -20.05 15.7Q-22.6 15.7 -24.45 13.8Q-26.3 11.95 -26.3 9.3Q-26.3 6.65 -24.45 4.75Q-22.6 2.9 -20.05 2.9Q-17.45 2.9 -15.6 4.75 M-15.6,4.75Q-13.8 6.65 -13.8 9.3Q-13.8 11.95 -15.6 13.8Q-17.45 15.7 -20.05 15.7Q-22.6 15.7 -24.45 13.8Q-26.3 11.95 -26.3 9.3Q-26.3 6.65 -24.45 4.75Q-22.6 2.9 -20.05 2.9Q-17.45 2.9 -15.6 4.75z M-5,6.5L-5 6.75L-7.75 9.7Q-9.6 12 -10 13.25L-10 16L-9 16Q-8.75 15.25 -7.25 13.75L-7.25 14.1L-9.05 18.05Q-10.15 20.5 -10.75 23.5 M-15.25,11.25L-15.25 11.5L-15 18.75Q-15 21.95 -16.6 26.15Q-18.35 30.8 -20.25 30.75 M-26.1,31.4Q-24.95 30.5 -24.75 27.3L-24.75 22L-23.2 16.85Q-22.25 13.35 -22.5 11.75" />
		</g>
		<g id="b2-1" class="body" transform="matrix(1, 0, 0, 1, 12.3, 30.05)">
			<path fill="none" d="M15.4,-3.8Q16.65 -4.45 17.55 -6.3Q18.5 -8.1 18.5 -9.8Q18.5 -13.3 15.9 -17.5Q13.25 -21.75 13.25 -23.35L13.35 -25.5Q13.65 -26.65 14.9 -27.55" />
			<path d="M12.5,-5.9Q12.5 -2.6 10.25 -0.25Q8 2.1 4.8 2.1Q1.6 2.1 -0.65 -0.25Q-2.9 -2.6 -2.9 -5.9Q-2.9 -9.2 -0.65 -11.55Q1.6 -13.9 4.8 -13.9Q8 -13.9 10.25 -11.55Q12.5 -9.2 12.5 -5.9" />
			<path fill="none" d="M12.5,-5.9Q12.5 -2.6 10.25 -0.25Q8 2.1 4.8 2.1Q1.6 2.1 -0.65 -0.25Q-2.9 -2.6 -2.9 -5.9Q-2.9 -9.2 -0.65 -11.55Q1.6 -13.9 4.8 -13.9Q8 -13.9 10.25 -11.55Q12.5 -9.2 12.5 -5.9z" />
			<path d="M-4.3,-13.5Q-6.45 -14.45 -7.9 -16.4Q-9.35 -18.35 -9.3 -20.2Q-9.4 -22 -7.9 -22.6Q-6.35 -23.2 -4.25 -22.25Q-2.2 -21.3 -0.7 -19.35Q0.75 -17.4 0.75 -15.55Q0.7 -13.8 -0.85 -13.2Q-2.3 -12.6 -4.3 -13.5" />
			<path fill="none" d="M-4.3,-13.5Q-6.45 -14.45 -7.9 -16.4Q-9.35 -18.35 -9.3 -20.2Q-9.4 -22 -7.9 -22.6Q-6.35 -23.2 -4.25 -22.25Q-2.2 -21.3 -0.7 -19.35Q0.75 -17.4 0.75 -15.55Q0.7 -13.8 -0.85 -13.2Q-2.3 -12.6 -4.3 -13.5z M-0.65,4.25L3.95 3.45L8.65 3.25 M0,-17.35L1.1 -17.35Q1.65 -16.4 2.8 -16.05Q4 -15.7 4.65 -14.8Q5.45 -13.75 5.75 -12.55L6.05 -10.05 M-9.8,-18.65Q-8.5 -18.5 -7.75 -16.8Q-7.05 -15.2 -6 -15.25L-5.3 -9.95Q-4.6 -5.75 -4.6 -3.7Q-4.6 -0.5 -5.15 1.05Q-5.95 3.3 -8 3" />
		</g>
		<g id="b2-2" class="body" transform="matrix(1, 0, 0, 1, 11, 32.15)">
			<path fill="none" d="M15.65,-12.65Q18 -12.65 18.75 -13.7Q19.25 -14.45 19.25 -16.55Q19.25 -18.8 18.15 -20.3Q17.05 -21.85 17.05 -22.95Q17.05 -24.2 18.65 -27L20.25 -29.65 M16,-11Q16 -8.25 13.5 -6.3Q11 -4.3 7.45 -4.3Q3.9 -4.3 1.45 -6.3Q-1.05 -8.25 -1.05 -11Q-1.05 -13.8 1.45 -15.75Q3.9 -17.7 7.45 -17.7Q11 -17.7 13.5 -15.75Q16 -13.8 16 -11z M-3.5,-8.3Q-5.65 -9.25 -7.1 -11.2Q-8.55 -13.15 -8.5 -15Q-8.6 -16.8 -7.1 -17.4Q-5.55 -18 -3.45 -17.05Q-1.4 -16.1 0.1 -14.15Q1.55 -12.2 1.55 -10.35Q1.5 -8.6 -0.05 -8Q-1.5 -7.4 -3.5 -8.3z M0,-17.35L1.1 -17.35Q1.65 -16.4 2.8 -16.05Q4 -15.7 4.65 -14.8Q5.45 -13.75 5.75 -12.55L6.05 -10.05 M3.8,4L8 4Q8.8 1.7 10.45 -0.1Q12.3 -2.1 14.45 -2.65L10.65 -7.25 M-7.8,3.6Q-6.05 3.6 -2.9 0.15Q0 -3 0 -3.85Q0 -4.8 -3.55 -8.85L-7.4 -13.05" />
			<path d="M16,-11Q16 -8.25 13.5 -6.3Q11 -4.3 7.45 -4.3Q3.9 -4.3 1.45 -6.3Q-1.05 -8.25 -1.05 -11Q-1.05 -13.8 1.45 -15.75Q3.9 -17.7 7.45 -17.7Q11 -17.7 13.5 -15.75Q16 -13.8 16 -11 M-3.5,-8.3Q-5.65 -9.25 -7.1 -11.2Q-8.55 -13.15 -8.5 -15Q-8.6 -16.8 -7.1 -17.4Q-5.55 -18 -3.45 -17.05Q-1.4 -16.1 0.1 -14.15Q1.55 -12.2 1.55 -10.35Q1.5 -8.6 -0.05 -8Q-1.5 -7.4 -3.5 -8.3" />
		</g>

		<g id="b2-3" class="body" transform="matrix(1, 0, 0, 1, 37.75, 32.6)">
			<path d="M0.15,-15.95Q0.15 -13.2 -2.35 -11.25Q-4.85 -9.25 -8.4 -9.25Q-11.95 -9.25 -14.4 -11.25Q-16.9 -13.2 -16.9 -15.95Q-16.9 -18.75 -14.4 -20.7Q-11.95 -22.65 -8.4 -22.65Q-4.85 -22.65 -2.35 -20.7Q0.15 -18.75 0.15 -15.95 M-16.85,-14.45L-22.35 -14.85Q-24.9 -15.75 -25.85 -17.4Q-26.9 -19 -25.6 -20.5Q-24.25 -22.05 -21.45 -22.5L-16 -22.1Q-13.4 -21.2 -12.45 -19.5Q-11.55 -17.9 -12.95 -16.35Q-14.2 -14.9 -16.85 -14.45" />
			<path fill="none" d="M2.4,-17.65Q5.2 -17.3 5.35 -20.7L5.65 -25.85Q8.6 -31.15 13.85 -29.85 M0.15,-15.95Q0.15 -13.2 -2.35 -11.25Q-4.85 -9.25 -8.4 -9.25Q-11.95 -9.25 -14.4 -11.25Q-16.9 -13.2 -16.9 -15.95Q-16.9 -18.75 -14.4 -20.7Q-11.95 -22.65 -8.4 -22.65Q-4.85 -22.65 -2.35 -20.7Q0.15 -18.75 0.15 -15.95z M-16.85,-14.45L-22.35 -14.85Q-24.9 -15.75 -25.85 -17.4Q-26.9 -19 -25.6 -20.5Q-24.25 -22.05 -21.45 -22.5L-16 -22.1Q-13.4 -21.2 -12.45 -19.5Q-11.55 -17.9 -12.95 -16.35Q-14.2 -14.9 -16.85 -14.45z M1,-14.4Q0.7 -12.05 -0.6 -9.15L-3.05 -4.4L-2.05 -4.4L3.6 -6L5.4 -6L5.4 -1Q4.8 0.7 4.6 4.2L2.8 4.2 M-6.05,-11.6Q-5.65 -8.8 -5.65 -6.6Q-4.95 -6.85 -4.6 -6.35Q-4.35 -5.9 -4.4 -5.2L-3.85 -5L-4.45 -5L-4.4 -5.2L-5.6 -6.05Q-6.45 -6.9 -6.45 -7.7L-6.25 -8.4 M-22.8,-16.45L-22.15 -15.2Q-21.95 -14.5 -21.6 -14.45L-20.05 -14Q-19.6 -13.75 -19.6 -13.15Q-19.6 -11.9 -23 -11.9L-26.85 -12.05Q-28.8 -11.45 -29.55 -10.6Q-30.5 -9.55 -30.25 -7.45 M-35.25,-5.45Q-34.65 -8.8 -31.5 -11.8Q-28.4 -14.75 -24.85 -15.45" />
		</g>
		<g id="b2-4" class="body" transform="matrix(1, 0, 0, 1, 42.6, 31.75)">
			<path fill="none" d="M-14.2,-18.25Q-11.15 -17.9 -9.2 -19.65Q-8 -20.65 -6.3 -23.6Q-4.6 -26.55 -3.4 -27.65Q-1.35 -29.45 1.8 -29.25 M-10.6,-17.7Q-9.9 -15.2 -11.8 -12.75Q-13.75 -10.35 -17.2 -9.4L-23.45 -9.6Q-26.35 -10.75 -27.05 -13.25Q-27.7 -15.8 -25.8 -18.2Q-23.85 -20.65 -20.45 -21.55L-14.15 -21.35Q-11.25 -20.25 -10.6 -17.7z M-32.8,-10.55Q-35.35 -11.45 -36.3 -13.1Q-37.35 -14.7 -36.05 -16.2Q-34.7 -17.75 -31.9 -18.2L-26.45 -17.8Q-23.85 -16.9 -22.9 -15.2Q-22 -13.6 -23.4 -12.05Q-24.65 -10.6 -27.3 -10.15Q-30.15 -9.65 -32.8 -10.55z M-7.1,-8.85Q-9.2 -7.8 -11.75 -5.35Q-14.05 -3.15 -15.75 -0.8 M-14.85,-8.35L-13.45 -9.05L-13.25 -9.25L-14.3 -8.85L-14.55 -8.75L-14.85 -8.35Q-15.8 -7.2 -17.1 -7.1L-20.4 -7.15L-20.2 -7.15L-17.55 -7.9L-18.65 -7.9L-18.45 -8.65Q-17.55 -8.65 -14.25 -9.65L-7.1 -9.65M-14.85,-8.35L-15.95 -7.9L-17.55 -7.9L-16.6 -8.15L-14.55 -8.75 M-39.9,3.6L-33.1 -4.6Q-29 -9.7 -29.65 -12.6 M-33.5,-9.2L-35.3 -1.15Q-36.9 3.7 -40.1 3.2" />
			<path d="M-10.6,-17.7Q-9.9 -15.2 -11.8 -12.75Q-13.75 -10.35 -17.2 -9.4L-23.45 -9.6Q-26.35 -10.75 -27.05 -13.25Q-27.7 -15.8 -25.8 -18.2Q-23.85 -20.65 -20.45 -21.55L-14.15 -21.35Q-11.25 -20.25 -10.6 -17.7 M-32.8,-10.55Q-35.35 -11.45 -36.3 -13.1Q-37.35 -14.7 -36.05 -16.2Q-34.7 -17.75 -31.9 -18.2L-26.45 -17.8Q-23.85 -16.9 -22.9 -15.2Q-22 -13.6 -23.4 -12.05Q-24.65 -10.6 -27.3 -10.15Q-30.15 -9.65 -32.8 -10.55" />
		</g>
		<g id="b2-5" class="body" transform="matrix(1, 0, 0, 1, 44.65, 25.55)">
			<path fill="none" d="M-18.4,-16.8Q-15.5 -16.65 -10.1 -20Q-4.8 -23.3 -1.4 -23" />
			<path d="M-19.9,-11.55Q-21.85 -9.15 -25.3 -8.2L-31.55 -8.4Q-34.45 -9.55 -35.15 -12.05Q-35.8 -14.6 -33.9 -17Q-31.95 -19.45 -28.55 -20.35L-22.25 -20.15Q-19.35 -19.05 -18.7 -16.5Q-18 -14 -19.9 -11.55" />
			<path fill="none" d="M-19.9,-11.55Q-21.85 -9.15 -25.3 -8.2L-31.55 -8.4Q-34.45 -9.55 -35.15 -12.05Q-35.8 -14.6 -33.9 -17Q-31.95 -19.45 -28.55 -20.35L-22.25 -20.15Q-19.35 -19.05 -18.7 -16.5Q-18 -14 -19.9 -11.55z" />
			<path d="M-38.2,-11.4Q-40.75 -12.3 -41.7 -13.95Q-42.75 -15.55 -41.45 -17.05Q-40.1 -18.6 -37.3 -19.05L-31.85 -18.65Q-29.25 -17.75 -28.3 -16.05Q-27.4 -14.45 -28.8 -12.9Q-30.05 -11.45 -32.7 -11Q-35.55 -10.5 -38.2 -11.4" />
			<path fill="none" d="M-38.2,-11.4Q-40.75 -12.3 -41.7 -13.95Q-42.75 -15.55 -41.45 -17.05Q-40.1 -18.6 -37.3 -19.05L-31.85 -18.65Q-29.25 -17.75 -28.3 -16.05Q-27.4 -14.45 -28.8 -12.9Q-30.05 -11.45 -32.7 -11Q-35.55 -10.5 -38.2 -11.4z M-23,-11.6Q-25.3 -10.6 -26.65 -6.4L-22.4 -6.4L-22.4 -2.4L-24.65 1.65Q-25.9 4.3 -28.05 4.6 M-41.45,4.2Q-41.25 4 -40.15 3.75Q-39.15 3.5 -38.85 3L-37.85 0.4L-35.95 -2.15Q-34.85 -3.65 -34.85 -4.1L-35.45 -4.8L-36.05 -5.6Q-36.15 -7.05 -36.45 -7.6L-37.25 -9.75L-37.85 -11.8L-37.85 -13Q-34.95 -12.95 -34.65 -6.6Q-34.15 -6.85 -33.85 -7.8" />
		</g>
		<g id="b3-1" class="body" transform="matrix(1, 0, 0, 1, 11.6, 23.65)">
			<path fill="none" d="M10.15,2.6Q11.4 1.95 12.3 0.1Q13.25 -1.7 13.25 -3.4Q13.25 -6.9 10.65 -11.1Q8 -15.35 8 -16.95L8.1 -19.1Q8.4 -20.25 9.65 -21.15 M9.6,-0.8Q9.6 2.5 7.35 4.85Q5.1 7.2 1.9 7.2Q-1.3 7.2 -3.55 4.85Q-5.8 2.5 -5.8 -0.8Q-5.8 -4.1 -3.55 -6.45Q-1.3 -8.8 1.9 -8.8Q5.1 -8.8 7.35 -6.45Q9.6 -4.1 9.6 -0.8z M3.4,-13.3Q3.4 -10.65 1.6 -8.8Q-0.25 -6.9 -2.85 -6.9Q-5.4 -6.9 -7.25 -8.8Q-9.1 -10.65 -9.1 -13.3Q-9.1 -15.95 -7.25 -17.85Q-5.4 -19.7 -2.85 -19.7Q-0.25 -19.7 1.6 -17.85Q3.4 -15.95 3.4 -13.3z M-7.25,2.75Q-7 4.45 -5.75 4.4Q-4.3 4.3 -4 5Q-3.45 6.1 -2.7 6.5L-0.5 6.75 M-7.25,-15L-7 -4.35L-7.1 -0.75Q-7.45 1.25 -8.75 1L-8.75 2.25L-8.5 2.25 M3,-12.25Q4.05 -12.4 4.45 -10.6Q4.9 -8.75 6.25 -8.75Q6.15 -7.85 6.55 -6.15L7 -4" />
			<path d="M9.6,-0.8Q9.6 2.5 7.35 4.85Q5.1 7.2 1.9 7.2Q-1.3 7.2 -3.55 4.85Q-5.8 2.5 -5.8 -0.8Q-5.8 -4.1 -3.55 -6.45Q-1.3 -8.8 1.9 -8.8Q5.1 -8.8 7.35 -6.45Q9.6 -4.1 9.6 -0.8 M3.4,-13.3Q3.4 -10.65 1.6 -8.8Q-0.25 -6.9 -2.85 -6.9Q-5.4 -6.9 -7.25 -8.8Q-9.1 -10.65 -9.1 -13.3Q-9.1 -15.95 -7.25 -17.85Q-5.4 -19.7 -2.85 -19.7Q-0.25 -19.7 1.6 -17.85Q3.4 -15.95 3.4 -13.3" />
		</g>
		<g id="b3-2" class="body" transform="matrix(1, 0, 0, 1, 14.25, 35.95)">
			<path d="M11.15,-8.3Q11.15 -5 8.9 -2.65Q6.65 -0.3 3.45 -0.3Q0.25 -0.3 -2 -2.65Q-4.25 -5 -4.25 -8.3Q-4.25 -11.6 -2 -13.95Q0.25 -16.3 3.45 -16.3Q6.65 -16.3 8.9 -13.95Q11.15 -11.6 11.15 -8.3 M0.75,-18.9Q0.75 -16.25 -1.05 -14.4Q-2.9 -12.5 -5.5 -12.5Q-8.05 -12.5 -9.9 -14.4Q-11.75 -16.25 -11.75 -18.9Q-11.75 -21.55 -9.9 -23.45Q-8.05 -25.3 -5.5 -25.3Q-2.9 -25.3 -1.05 -23.45Q0.75 -21.55 0.75 -18.9" />
			<path fill="none" d="M10.15,-9.7Q11.4 -10.35 12.3 -12.2Q13.25 -14 13.25 -15.7Q13.25 -19.2 10.65 -23.4Q8 -27.65 8 -29.25L8.1 -31.4Q8.4 -32.55 9.65 -33.45 M11.15,-8.3Q11.15 -5 8.9 -2.65Q6.65 -0.3 3.45 -0.3Q0.25 -0.3 -2 -2.65Q-4.25 -5 -4.25 -8.3Q-4.25 -11.6 -2 -13.95Q0.25 -16.3 3.45 -16.3Q6.65 -16.3 8.9 -13.95Q11.15 -11.6 11.15 -8.3z M0.75,-18.9Q0.75 -16.25 -1.05 -14.4Q-2.9 -12.5 -5.5 -12.5Q-8.05 -12.5 -9.9 -14.4Q-11.75 -16.25 -11.75 -18.9Q-11.75 -21.55 -9.9 -23.45Q-8.05 -25.3 -5.5 -25.3Q-2.9 -25.3 -1.05 -23.45Q0.75 -21.55 0.75 -18.9z M-2.5,6.75Q-0.2 6.05 -0.15 1.85Q-0.05 -2.85 1 -3.75 M6.25,5.25Q6.95 5.15 9.3 1.9Q11.75 -1.4 11.75 -2.6Q11.75 -3.15 10.7 -4.3L9.25 -5.75 M-11.05,-16.9L-8.05 -6.7L-7.2 -3.15Q-7.05 -1.15 -8.35 -1.1L-8 0.1L-7.75 0.05 M3,-12.25Q4.05 -12.4 4.45 -10.6Q4.9 -8.75 6.25 -8.75Q6.15 -7.85 6.55 -6.15L7 -4 M0.35,-23L-1.25 -23L0.5 -21.45Q1.35 -20.55 2.5 -20.25Q3.2 -20.05 3.6 -19L3.9 -18L4.25 -18L4.5 -18Q3.85 -18.75 2.5 -21.4Q1.7 -23 0.35 -23M1.5,-19.5Q2.6 -19.15 3 -17.75Q3.2 -17.95 3.9 -18L4.25 -17" />
		</g>
		<g id="b3-3" class="body" transform="matrix(1, 0, 0, 1, 22.5, 40.8)">
			<path d="M-1.25,-31.9Q-1.25 -29.25 -3.05 -27.4Q-4.9 -25.5 -7.5 -25.5Q-10.05 -25.5 -11.9 -27.4Q-13.75 -29.25 -13.75 -31.9Q-13.75 -34.55 -11.9 -36.45Q-10.05 -38.3 -7.5 -38.3Q-4.9 -38.3 -3.05 -36.45Q-1.25 -34.55 -1.25 -31.9 M6.25,-21.3Q6.25 -18 4 -15.65Q1.75 -13.3 -1.45 -13.3Q-4.65 -13.3 -6.9 -15.65Q-9.15 -18 -9.15 -21.3Q-9.15 -24.6 -6.9 -26.95Q-4.65 -29.3 -1.45 -29.3Q1.75 -29.3 4 -26.95Q6.25 -24.6 6.25 -21.3" />
			<path fill="none" d="M4.25,-20.5L12.3 -21.85Q15.5 -23.2 15.5 -28.15Q15.5 -29.45 15 -31.2L14.5 -33.4Q14.5 -34.25 15 -35.25 M6.25,-21.3Q6.25 -18 4 -15.65Q1.75 -13.3 -1.45 -13.3Q-4.65 -13.3 -6.9 -15.65Q-9.15 -18 -9.15 -21.3Q-9.15 -24.6 -6.9 -26.95Q-4.65 -29.3 -1.45 -29.3Q1.75 -29.3 4 -26.95Q6.25 -24.6 6.25 -21.3z M-1.25,-31.9Q-1.25 -29.25 -3.05 -27.4Q-4.9 -25.5 -7.5 -25.5Q-10.05 -25.5 -11.9 -27.4Q-13.75 -29.25 -13.75 -31.9Q-13.75 -34.55 -11.9 -36.45Q-10.05 -38.3 -7.5 -38.3Q-4.9 -38.3 -3.05 -36.45Q-1.25 -34.55 -1.25 -31.9z M-3.2,5.5Q-2.45 4.65 -2.5 0.4Q-2.6 -3.7 -1.2 -4.75Q-3.25 -7.55 -2.95 -16L-4.7 -16Q-4.7 -15.8 -5.25 -15.4Q-5.85 -15 -6.2 -15L-6.2 -12.75L-5.1 -9.65Q-4.9 -8.7 -4.25 -7.9Q-3.6 -7.1 -3.45 -6L-2.95 -6 M4,3.25L4.75 3.25Q4.75 -1 5.5 -2.5L6.75 -5.25L7.5 -7.15Q7.5 -7.75 5 -9.7Q2.5 -11.7 2.5 -13L2.65 -14L2.75 -15.25L5.25 -15.5L5.25 -11.5 M-20,-30.75L-19.6 -28.35Q-19.05 -27 -17.5 -27.25L-17.5 -24.75L-15 -24.75L-14.5 -25.75L-14.75 -25.5L-14.75 -26Q-14.75 -26.8 -15.5 -30.65Q-15.5 -31.2 -15 -31.4L-14 -31.75L-15 -32L-14.85 -32.7Q-14.65 -33.1 -14.25 -33.25" />
		</g>
		<g id="b3-4" class="body" transform="matrix(1, 0, 0, 1, 22.75, 49.3)">
			<path d="M3.7,-32.55Q3.7 -29.25 1.45 -26.9Q-0.8 -24.55 -4 -24.55Q-7.2 -24.55 -9.45 -26.9Q-11.7 -29.25 -11.7 -32.55Q-11.7 -35.85 -9.45 -38.2Q-7.2 -40.55 -4 -40.55Q-0.8 -40.55 1.45 -38.2Q3.7 -35.85 3.7 -32.55 M-5.5,-40.4Q-5.5 -37.75 -7.3 -35.9Q-9.15 -34 -11.75 -34Q-14.3 -34 -16.15 -35.9Q-18 -37.75 -18 -40.4Q-18 -43.05 -16.15 -44.95Q-14.3 -46.8 -11.75 -46.8Q-9.15 -46.8 -7.3 -44.95Q-5.5 -43.05 -5.5 -40.4" />
			<path fill="none" d="M2.5,-34.25L4.15 -35Q5.35 -35.75 5.25 -36.75L7.75 -36.75Q7.4 -34.5 9.25 -34.5L9.5 -33L14 -33L14.85 -34L15.5 -34.75 M3.7,-32.55Q3.7 -29.25 1.45 -26.9Q-0.8 -24.55 -4 -24.55Q-7.2 -24.55 -9.45 -26.9Q-11.7 -29.25 -11.7 -32.55Q-11.7 -35.85 -9.45 -38.2Q-7.2 -40.55 -4 -40.55Q-0.8 -40.55 1.45 -38.2Q3.7 -35.85 3.7 -32.55z M-5.5,-40.4Q-5.5 -37.75 -7.3 -35.9Q-9.15 -34 -11.75 -34Q-14.3 -34 -16.15 -35.9Q-18 -37.75 -18 -40.4Q-18 -43.05 -16.15 -44.95Q-14.3 -46.8 -11.75 -46.8Q-9.15 -46.8 -7.3 -44.95Q-5.5 -43.05 -5.5 -40.4z M-9.5,-26.5Q-9.5 -24.25 -7.75 -19L-5.25 -19Q-4.75 -20 -4.75 -21L-4.5 -21Q-4.65 -19.7 -3.85 -15.85Q-3.1 -12.1 -3.25 -11 M4.5,-13.25Q4.5 -14.25 5 -14.75L5 -23.75L2.75 -23.5L2.5 -29.75 M-19.5,-39L-19.25 -30.75L-19.25 -30.25L-18.85 -30.75Q-17.5 -32.45 -17.5 -36Q-17 -35.5 -15.75 -35.5L-15.75 -29L-15.25 -29Q-14.85 -30.1 -13.4 -31.75Q-11.95 -33.35 -11.5 -34.75M-19.25,-30.25L-19.25 -27.75L-20 -27.75L-20.1 -27.9L-20.25 -28.4Q-20.25 -29 -19.25 -30.25" />
		</g>
		<g id="b3-5" class="body" transform="matrix(1, 0, 0, 1, 25.25, 54.6)">
			<path d="M-0.6,-39.55Q-0.6 -36.25 -2.85 -33.9Q-5.1 -31.55 -8.3 -31.55Q-11.5 -31.55 -13.75 -33.9Q-16 -36.25 -16 -39.55Q-16 -42.85 -13.75 -45.2Q-11.5 -47.55 -8.3 -47.55Q-5.1 -47.55 -2.85 -45.2Q-0.6 -42.85 -0.6 -39.55 M-9,-45.7Q-9 -43.05 -10.8 -41.2Q-12.65 -39.3 -15.25 -39.3Q-17.8 -39.3 -19.65 -41.2Q-21.5 -43.05 -21.5 -45.7Q-21.5 -48.35 -19.65 -50.25Q-17.8 -52.1 -15.25 -52.1Q-12.65 -52.1 -10.8 -50.25Q-9 -48.35 -9 -45.7" />
			<path fill="none" d="M-1.5,-40.75Q1.3 -41.15 7.65 -40.75Q12.9 -40.8 14.25 -43.25 M-0.6,-39.55Q-0.6 -36.25 -2.85 -33.9Q-5.1 -31.55 -8.3 -31.55Q-11.5 -31.55 -13.75 -33.9Q-16 -36.25 -16 -39.55Q-16 -42.85 -13.75 -45.2Q-11.5 -47.55 -8.3 -47.55Q-5.1 -47.55 -2.85 -45.2Q-0.6 -42.85 -0.6 -39.55z M-9,-45.7Q-9 -43.05 -10.8 -41.2Q-12.65 -39.3 -15.25 -39.3Q-17.8 -39.3 -19.65 -41.2Q-21.5 -43.05 -21.5 -45.7Q-21.5 -48.35 -19.65 -50.25Q-17.8 -52.1 -15.25 -52.1Q-12.65 -52.1 -10.8 -50.25Q-9 -48.35 -9 -45.7z M-10.25,-37.25Q-10.95 -37 -11.85 -35.55L-13 -33.75L-13 -31.75L-6.75 -31.5L-6.75 -30.25L-10.2 -27.95Q-12.3 -26.4 -12.25 -24.25 M-1.25,-32Q-1.8 -30.8 -3.65 -28.7Q-5.35 -26.8 -5.75 -25.75L-7.75 -25.75 M-21.25,-40.75L-21 -40.75L-20.75 -35Q-20.3 -33.15 -20.35 -31.35Q-20.4 -27.85 -22.75 -27.5 M-16.5,-37L-16.45 -32.45Q-16.45 -29.75 -17 -28.5Q-16.75 -28.5 -16.25 -29" />
		</g>
		<g id="f00" transform="scale(-1,1) translate(-27,0)"><use xlink:href="#b2-1"/><use x="-5" y="-2.5" xlink:href="#head2"/></g>
		<g id="f01" transform="scale(-1,1) translate(-27,-2)"><use xlink:href="#b2-2"/><use x="-10" y="8" xlink:href="#head2"/></g>
		<g id="f02" transform="scale(-1,1) translate(-55,-2)"><use xlink:href="#b2-3"/><use x="-2" y="1.5" xlink:href="#head2"/></g>
		<g id="f03" transform="scale(-1,1) translate(-58,-2)"><use xlink:href="#b2-4"/><use x="-4.5" y="7" xlink:href="#head2"/></g>
		<g id="f04" transform="scale(-1,1) translate(-60,4)"><use xlink:href="#b2-5"/><use x="-8" y="-1" xlink:href="#head2"/></g>
		<g id="f10" transform="scale(-1,1) translate(-25,-3)"><use xlink:href = "#b1-1"/><use x="-2" y="-2" xlink:href = "#head1"/></g>
		<g id="f11" transform="scale(-1,1) translate(-33,-2)"><use xlink:href = "#b1-2"/><use x="-10" y="11" xlink:href = "#head1"/></g>
		<g id="f12" transform="scale(-1,1) translate(-40,-2)"><use xlink:href = "#b1-3"/><use x="-5" y="27" xlink:href = "#head1"/></g>
		<g id="f13" transform="scale(-1,1) translate(-43,3)"><use xlink:href = "#b1-4"/><use x="-3" y="32" xlink:href = "#head1"/></g>
		<g id="f14" transform="scale(-1,1) translate(-43,9)"><use xlink:href = "#b1-5"/><use x="-5" y="27" xlink:href = "#head1"/></g>
		<g id="f20" transform="translate(0,-3)"><use xlink:href = "#b1-1"/><use x="-2" y="-2" xlink:href = "#head1"/></g>
		<g id="f21" transform="translate(-6,-2)"><use xlink:href = "#b1-2"/><use x="-10" y="11" xlink:href = "#head1"/></g>
		<g id="f22" transform="translate(-12,-2)"><use xlink:href = "#b1-3"/><use x="-5" y="27" xlink:href = "#head1"/></g>
		<g id="f23" transform="translate(-15,3)"><use xlink:href = "#b1-4"/><use x="-3" y="32" xlink:href = "#head1"/></g>
		<g id="f24" transform="translate(-15,9)"><use xlink:href = "#b1-5"/><use x="-5" y="27" xlink:href = "#head1"/></g>
		<g id="f30"><use xlink:href = "#b2-1"/><use x="-5" y="-2.5" xlink:href="#head2"/></g>
		<g id="f31" transform="translate(-3,-2)"><use xlink:href="#b2-2"/><use x="-10" y="8" xlink:href="#head2"/></g>
		<g id="f32" transform="translate(-30,-2)"><use xlink:href="#b2-3"/><use x="-2" y="1.5" xlink:href="#head2"/></g>
		<g id="f33" transform="translate(-30,-2)"><use xlink:href="#b2-4"/><use x="-4.5" y="7" xlink:href="#head2"/></g>
		<g id="f34" transform="translate(-30,4)"><use xlink:href="#b2-5"/><use x="-8" y="-1" xlink:href="#head2"/></g>
		<g id="f40" transform="translate(2,6)"><use xlink:href = "#b3-1"/><use x="-2" y="-11" xlink:href = "#head1"/></g>
		<g id="f41" transform="translate(0,-10)"><use xlink:href = "#b3-2"/><use x="-5" y="0" xlink:href = "#head1"/></g>
		<g id="f42" transform="translate(-6,-14)"><use xlink:href = "#b3-3"/><use x="-1" y="-12" xlink:href = "#head1"/></g>
		<g id="f43" transform="translate(-8,-16)"><use xlink:href = "#b3-4"/><use x="-5.5" y="-8" xlink:href = "#head1"/></g>
		<g id="f44" transform="translate(-12,-22)"><use xlink:href = "#b3-5"/><use x="-4" y="-5" xlink:href = "#head1"/></g>
		<g id="f50" transform="scale(-1,1) translate(-27,6)"><use xlink:href = "#b3-1"/><use x="-2" y="-11" xlink:href = "#head1"/></g>
		<g id="f51" transform="scale(-1,1) translate(-29,-8)"><use xlink:href = "#b3-2"/><use x="-5" y="0" xlink:href = "#head1"/></g>
		<g id="f52" transform="scale(-1,1) translate(-36,-14)"><use xlink:href = "#b3-3"/><use x="-1" y="-12" xlink:href = "#head1"/></g>
		<g id="f53" transform="scale(-1,1) translate(-38,-16)"><use xlink:href = "#b3-4"/><use x="-5.5" y="-8" xlink:href = "#head1"/></g>
		<g id="f54" transform="scale(-1,1) translate(-42,-22)"><use xlink:href = "#b3-5"/><use x="-4" y="-5" xlink:href = "#head1"/></g>
	</defs>
	<g id="board" />
	<use id="cat"/>
</svg>
<div id="bar">
	<div id="reset">Reset</div>
	<div id="title">Chat Noir</div>
</div>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Tangerine);
html {
	overflow: hidden;
	touch-action: none;
	content-zooming: none;
}
body {
	position: absolute;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: #fff;
}
#game {
	position:absolute;
	width:100%;
	height: 100%;
	background: #fff;
}

#game .body {
	stroke-width:5;
	stroke:#000000;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-miterlimit:3;
}
#game .head {
	fill:#000000;
}
#game .cell {
	cursor:pointer;
}
#bar {
	position:absolute;
	bottom: 10vh;
	left:50%;
	width: 100vmin;
	color: #000;
	font-size: 6vmin;
	font-weight:bold;
	cursor: pointer;
	font-family: 'Tangerine', cursive;
	user-select: none;
	-webkit-user-select: none;
	margin-left: -50vmin;
}
#reset {
	position: absolute;
	left: 10px;
}
#title {
	position: absolute;
	right: 10px;
	cursor: default;
}
              
            
!

JS

              
                /*

Chat Noir

  _  ,/|
 '\`o.O'
  =(_ _)=
    |U|
   /  |  
  //|  \

Can you keep the kitty from running off the game field?

Original Flash game: http://www.gamedesign.jp/flash/chatnoir/chatnoir.html
All original credits to Gamedesign
SVG/Javascript conversion by GF https://codepen.io/ge1doot/ 
02 August 2015

*/



! function() {

	"use strict";

	var xmlns   = "http://www.w3.org/2000/svg";
	var xlinkns = "http://www.w3.org/1999/xlink";
	var board   = document.getElementById("board");
	var game    = document.getElementById("game");
	var resetB  = document.getElementById("reset");
	resetB.onclick = resetB.ontouchstart = function (e) {
		e.preventDefault();
		if (enabled) {
			enabled = false;
			reset();
		}
		return false;
	}
	var enabled = true, win = false;
	var addx0, addy0, addx1, addy1, cel, lx, ly, ld, lmax, lx2, ly2;

	// cell constructor
	function Cell () {
		this.stat  = 0;
		this.win   = 0;
		this.reach = 0;
		this.po    = -1;
		this.id    = null;
	}

	// create SVG plot
	Cell.prototype.createElement = function (i, j) {
		var x = 2 * 34 + j * 34 + ((i % 2) ? 1 : -1) * 34 / 4;
		var y = 2 * 26 + i * 26;
		var use = document.createElementNS(xmlns, "use");
		use.cx = j + 2;
		use.cy = i + 2;
		this.id = use;
		use.setAttributeNS(null, "class", "cell");
		use.setAttributeNS(xlinkns, "xlink:href", "#r0");
		use.setAttributeNS(null, "transform", "translate(" + x + "," + y + ")");
		use.setAttributeNS(null, "fill", this.stat == 2 ? "#728501" : "#CCFF00");
		use.onclick = use.ontouchstart = function (e) {
			e.preventDefault();
			click(this, this.cx, this.cy);
		}
		board.appendChild(use);
	}

	// human plays
	function click(use, x, y) {
		if (enabled && cel[y][x].stat != 2) {
			if (x == cat.x && y == cat.y) return;
			enabled = false;
			use.setAttributeNS(null, "fill", "#728501");
			if (win) {
				// run the cat, run!
				cat.play();
				cat.run(cat.dir);
			} else {
				cel[y][x].stat = 2;
				cat.play();
			}
		}
	}

	// initialize new game
	function newGame () {
		win = false;
		enabled = true;
		addx0 = [1, 0, -1, -1, -1, 0];
		addy0 = [0, 1, 1, 0, -1, -1];
		addx1 = [1, 1, 0, -1, 0, 1];
		addy1 = [0, 1, 1, 0, -1, -1];
		cel = [];
		for (var i = 0; i < 15; i++) {
			cel[i] = [];
			for (var j = 0; j < 15; j++) {
				cel[i][j] = new Cell();
			}
		}
		cat.x = Math.floor(15 / 2);
		cat.y = Math.floor(15 / 2);
		cat.px =  20 + 34 * cat.x;
		cat.py = -15 + 26 * cat.y;
		cel[cat.y][cat.x].stat = 1;
		lx = [];
		ly = [];
		ld = [];
		lx[0] = cat.x;
		ly[0] = cat.y;
		lmax = 1;
		lx2 = [];
		ly2 = [];
		for (var i = 2; i < 15 - 2; i++) {
			for (var j = 2; j < 15 - 2; j++) {
				cel[i][j].stat = 1;
			}
		}
		// place random plots (10 more than in the original)
		for (var i = 0; i < 30; i++) {
			var rx = Math.floor(Math.random() * 15);
			var ry = Math.floor(Math.random() * 15);
			if (rx != cat.x && ry != cat.y) {
				if (cel[ry][rx].stat == 1) {
					cel[ry][rx].stat = 2;
				}
			}
		}
		for (var i = 0; i < 15; i++) {
			for (var j = 0; j < 15; j++) {
				if (cel[i][j].stat != 1) continue;
				for (var k = 0; k < 6; k++) {
					var nx = i % 2 ? (j + addx1[k]) : (j + addx0[k]);
					var ny = i + addy0[k];
					if (cel[ny][nx].stat == 0) {
						cel[i][j].win = 1;
					}
				}
			}
		}
		// draw the board game
		var x = 0, y = 0;
		for (var i = 0; i < 11; i++) {
			for (var j = 0; j < 11; j++) {
				cel[i + 2][j + 2].createElement(i, j);
			}
		}
		// display cat
		game.setAttributeNS(null, "fill-opacity", 1);
		cat.display(cat.px, cat.py, "f30");
	}

	// reset
	function reset () {
		cat.display(0, 0, "");
		var alpha = 100;
		for (var i = 0; i < 100; i++) {
			setTimeout(function () {
				alpha--;
				game.setAttributeNS(null, "fill-opacity", alpha / 100);
				if (alpha == 0) {
					enabled = true;
					newGame();
				}
			}, i * 16);
		}
	}

	// the Cat
	var cat = {
		shape: document.getElementById("cat"),
		x: 0,
		y: 0,
		px: 0,
		py: 0,
		dir: 0,
		dirX: [1, 0.5, -0.5, -1, -0.5, 0.5],
		dirY: [0, 1, 1, 0, -1, -1],
		// SVG update
		display: function (x, y, id) {
			this.shape.setAttributeNS(null, "transform", 'translate(' + x + ',' + y + ')');
			this.shape.setAttributeNS(xlinkns, "xlink:href", "#" + id);
		},
		// move the cat
		jump: function (dir) {
			for (var i = 1; i < 6; i++) {
				var frame = 1;
				setTimeout(function () {
					var id = "f" + dir + (frame++) % 5;
					if (frame == 6) {
						this.px += 34 * this.dirX[dir];
						this.py += 26 * this.dirY[dir];
						enabled = true;
					}
					this.display(this.px, this.py, id);
				}.bind(this), i * 64);
			}
		},
		// run the cat
		run: function (dir) {
			var t = 0;
			for (var i = 1; i < 20; i++) {
				t++;
				var frame = 1;
				var end = 0;
				setTimeout(function () {
					var id = "f" + dir + frame++;
					if (frame == 0) frame++;
					if (frame == 5) frame = 2;
						this.px += 0.4 * 34 * this.dirX[dir];
						this.py += 0.4 * 26 * this.dirY[dir];
					this.display(this.px, this.py, id);
					if (end++ == 18) {
						reset();
					}
				}.bind(this), t * 64);
			}
		},
		// can go out?
		goOut: function () {
			for (var i = 0; i < 6; ++i) {
				var x = this.y % 2 ? this.x + addx1[i] : this.x + addx0[i];
				var y = this.y + addy0[i];
				if (cel[y][x].stat == 0) {
					this.x = x;
					this.y = y;
					this.dir = i;
					return true;
				}
			}
			return false;
		},
		// can win?
		gotoWin: function () {
			for (var i = 0; i < 6; ++i) {
				var x = this.y % 2 ? this.x + addx1[i] : this.x + addx0[i];
				var y = this.y + addy0[i];
				if (cel[y][x].stat != 1) continue;
				if (cel[y][x].win) {
					this.x = x;
					this.y = y;
					this.dir = i;
					win = true;
					return true;
				}
			}
			return false;
		},
		// find best direction
		getNearest: function () {
			cel[this.y][this.x].po = 0;
			lx[0] = this.x;
			ly[0] = this.y;
			var m = 1;
			var n = 999;
			for (var po = 1; po < 200; po++) {
				var p = 0;
				for (var i = 0; i < m; ++i) {
					var x = lx[i];
					var y = ly[i];
					for (var k = 0; k < 6; ++k) {
						var kx = y % 2 ? (x + addx1[k]) : (x + addx0[k]);
						var ky = y + addy0[k];
						if (cel[ky][kx].stat != 1) continue;
						if (cel[ky][kx].po >= 0) continue;
						cel[ky][kx].po = po;
						lx2[p] = kx;
						ly2[p] = ky;
						p++;
						if (cel[ky][kx].win && po < n) n = po;
					}
				}
				if (p == 0) break;
				for (var i = 0; i < p; ++i) {
					lx[i] = lx2[i];
					ly[i] = ly2[i];
				}
				m = p;
			}
			if (n == 999) return false;
			p = 0;
			for (var i = 0; i < 15; ++i) {
				for (var j = 0; j < 15; ++j) {
					if (cel[i][j].po == n && cel[i][j].win) {
						lx[p] = j;
						ly[p] = i;
						p++;
					}
				}
			}
			if (p == 0) return false;
			var d = Math.floor(Math.random() * p);
			x = lx[d];
			y = ly[d];
			for (var r = 0; r < 200; ++r) {
				p = 0;
				for (var k = 0; k < 6; ++k) {
					kx = y % 2 ? (x + addx1[k]) : (x + addx0[k]);
					ky = y + addy0[k];
					if (cel[ky][kx].stat != 1) continue;
					if (cel[ky][kx].po >= cel[y][x].po) continue;
					lx[p] = kx;
					ly[p] = ky;
					ld[p] = k;
					p++;
				}
				if (p == 0) return false;
				d = Math.floor(Math.random() * p);
				x = lx[d];
				y = ly[d];
				if (cel[y][x].po == 1) {
					this.x = x;
					this.y = y;
					this.dir = 0;
					for (var k = 0; k < 6; ++k) {
						kx = y % 2 ? x + addx1[k] : x + addx0[k];
						ky = y + addy0[k];
						if (cel[ky][kx].po == 0) {
							this.dir = (k + 3) % 6;
						}
					}
					return true;
				}
			}
			return false;
		},
		// random move
		randMove: function () {
			var x = this.x;
			var y = this.y;
			var p = 0;
			for (var k = 0; k < 6; ++k) {
				var kx = y % 2 ? (x + addx1[k]) : (x + addx0[k]);
				var ky = y + addy0[k];
				if (cel[ky][kx].stat != 1) continue;
				lx[p] = kx;
				ly[p] = ky;
				ld[p] = k;
				p++;
			}
			if (p == 0) return false;
			var d = Math.floor(Math.random() * p);
			this.x = lx[d];
			this.y = ly[d];
			this.dir = ld[d];
			return true;
		},
		// play function
		play: function () {
			for (var i = 0; i < 15; i++) {
				for (var j = 0; j < 15; j++) {
					cel[i][j].reach = 0;
					cel[i][j].po = -1;
				}
			}
			for (i = 0; i < 15; i++) {
				for (j = 0; j < 15; j++) {
					if (cel[i][j].stat != 1) continue;
					for (var k = 0; k < 6; k++) {
						var nx = i % 2 ? (j + addx1[k]) : (j + addx0[k]);
						var ny = i + addy0[k];
						if (cel[ny][nx].win) {
							++cel[i][j].reach;
						}
					}
				}
			}
			var f = false;
			if (!this.goOut()) {
				if (!this.gotoWin()) {
					if (!this.getNearest()) {
						if (!this.randMove()) f = true;
					}
				}
			}
			if (f) {
				// car loose
				enabled = false;
				reset();
			} else {
				this.jump(this.dir);
			}
		}
	}


	// start
	newGame();

}();
              
            
!
999px

Console