{"id":364,"date":"2026-05-29T11:33:47","date_gmt":"2026-05-29T03:33:47","guid":{"rendered":"https:\/\/thezodiaclore.com\/?page_id=364"},"modified":"2026-07-03T17:39:22","modified_gmt":"2026-07-03T09:39:22","slug":"learn-stroke-order","status":"publish","type":"page","link":"https:\/\/thezodiaclore.com\/de\/learn-stroke-order\/","title":{"rendered":"Chinese Zodiac Stroke Order Animations"},"content":{"rendered":"\n<div class=\"tzl-page\">\n  <style>\n\/* The Zodiac Lore \u2014 Style B brand-unified *\/\n.tzl-page{\n  --bg:#fff;--ink:#0a0a0a;--soft:#3a3a3a;--grey:#5c5c5c;--muted:#9a9a9a;--line:#e6e6e6;\n  --accent:#e1391b;--accent-dark:#b02a12;\n  --sans:\"Archivo\",Arial,sans-serif;--mono:\"Spline Sans Mono\",ui-monospace,monospace;\n  --zh:\"Noto Sans SC\",\"PingFang SC\",\"Microsoft YaHei\",sans-serif;\n  max-width:1040px;margin:0 auto;color:var(--ink);background:var(--bg);\n  font-family:var(--sans);font-size:17px;line-height:1.7;\n}\n.tzl-page *{box-sizing:border-box}\n.tzl-page a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(225,57,27,.35)}\n.tzl-page a:hover{color:var(--ink);border-bottom-color:var(--ink)}\n.tzl-hero{position:relative;background:var(--bg);padding:40px 0 36px;margin:8px 0;overflow:hidden;border-top:2px solid var(--ink)}\n.tzl-kicker{display:inline-flex;align-items:center;gap:12px;margin:0 0 18px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:500}\n.tzl-kicker:before{content:\"\";width:28px;height:2px;background:var(--accent)}\n.tzl-hero h2{font-family:var(--sans);font-weight:900;font-size:clamp(32px,5vw,52px);line-height:1.02;letter-spacing:-.03em;text-transform:uppercase;margin:0 0 18px}\n.tzl-hero h2 em{color:var(--accent);font-style:normal}\n.tzl-hero p{max-width:62ch;margin:0 0 14px;color:var(--grey);font-size:17px;line-height:1.6}\n.tzl-section{position:relative;padding:48px 0 0;margin:0 0 4px;border-top:2px solid var(--ink)}\n.tzl-section h2{font-family:var(--sans);font-weight:800;font-size:clamp(24px,3vw,36px);line-height:1.08;letter-spacing:-.02em;margin:0 0 18px}\n.tzl-section h3{font-weight:700;font-size:20px;line-height:1.25;margin:26px 0 10px;letter-spacing:-.01em}\n.tzl-section p{margin:0 0 18px;color:var(--soft)}\n.tzl-section ul,.tzl-section ol{margin:0 0 22px 22px;color:var(--soft)}\n.tzl-section li{margin:0 0 8px}\n.tzl-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:26px 0 32px}\n.tzl-card-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}\n.tzl-card{background:var(--bg);border:1px solid var(--line);padding:22px 20px;min-height:130px;transition:border-color .15s}\n.tzl-card:hover{border-color:var(--accent)}\n.tzl-card .label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:8px}\n.tzl-card strong{display:block;font-size:20px;font-weight:800;letter-spacing:-.01em;margin-bottom:8px;color:var(--ink)}\n.tzl-card p{font-size:14px;line-height:1.55;margin:0;color:var(--soft)}\n.tzl-note{background:#fafafa;border-left:3px solid var(--accent);padding:20px 24px;margin:24px 0 30px;color:var(--soft);font-size:16px;line-height:1.7}\n.tzl-table{width:100%;border-collapse:collapse;margin:20px 0 32px;font-size:15px}\n.tzl-table th{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 14px;background:var(--ink);color:#fff;text-align:left;font-weight:500}\n.tzl-table td{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--soft)}\n.tzl-table tr:hover td{background:#fafafa}\n.tzl-cta{border:2px solid var(--ink);padding:28px 30px;margin:40px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}\n.tzl-cta p{margin:0;color:var(--soft);font-size:16px}\n.tzl-cta a.btn{background:var(--accent);color:#fff;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.05em;padding:12px 22px;border:0;text-decoration:none;white-space:nowrap}\n.tzl-cta a.btn:hover{background:var(--accent-dark)}\nhtml.tzl-dark .tzl-writer-box{background:#141414!important;border-color:#3a3a3a!important}\r\nhtml.tzl-dark .tzl-stroke-lab,html.tzl-dark .tzl-current,html.tzl-dark .tzl-status{background:#181818!important;border-color:#303030!important;color:#d8d8d8!important}\r\n@media(max-width:680px){.tzl-card-grid{grid-template-columns:1fr}.tzl-card-grid.two{grid-template-columns:1fr}.tzl-cta{flex-direction:column}}\nhtml.tzl-dark section.tzl-card{background:var(--bg)!important}\r\n<\/style>\n\n  <div class=\"tzl-wrap\">\n    <section class=\"tzl-hero\">\n      <div class=\"tzl-mark\">\u5b57<\/div>\n      <div class=\"tzl-kicker\">Stroke order \u00b7 \u7b14\u987a<\/div>\n      <h1>Chinese Zodiac Stroke Order Animations<\/h1>\n      <p>\n        Watch each Chinese zodiac character being written stroke by stroke, then try tracing it yourself with a mouse or touch screen. This page uses simplified Chinese characters and beginner-friendly writing notes for the 12 zodiac animals.\n      <\/p>\n    <\/section>\n\n    <section class=\"tzl-card\">\n      <h2>Watch, then trace the character<\/h2>\n      <p>\n        Choose one zodiac animal. The left box plays the stroke order animation. The right box is a practice area where you can trace the character. If you make a mistake, the practice box will guide you back to the next correct stroke.\n      <\/p>\n\n      <div class=\"tzl-stroke-lab\">\n        <div class=\"tzl-stroke-inner\">\n          <div class=\"tzl-stroke-controls\">\n            <div class=\"tzl-field\">\n              <label for=\"tzlStrokeCharacter\">Zodiac character<\/label>\n              <select id=\"tzlStrokeCharacter\">\n                <option value=\"\u9f20\">Rat \u00b7 \u9f20 sh\u01d4<\/option>\n                <option value=\"\u725b\">Ox \u00b7 \u725b ni\u00fa<\/option>\n                <option value=\"\u864e\">Tiger \u00b7 \u864e h\u01d4<\/option>\n                <option value=\"\u5154\">Rabbit \u00b7 \u5154 t\u00f9<\/option>\n                <option value=\"\u9f99\">Dragon \u00b7 \u9f99 l\u00f3ng<\/option>\n                <option value=\"\u86c7\">Snake \u00b7 \u86c7 sh\u00e9<\/option>\n                <option value=\"\u9a6c\">Horse \u00b7 \u9a6c m\u01ce<\/option>\n                <option value=\"\u7f8a\">Goat \u00b7 \u7f8a y\u00e1ng<\/option>\n                <option value=\"\u7334\">Monkey \u00b7 \u7334 h\u00f3u<\/option>\n                <option value=\"\u9e21\">Rooster \u00b7 \u9e21 j\u012b<\/option>\n                <option value=\"\u72d7\">Dog \u00b7 \u72d7 g\u01d2u<\/option>\n                <option value=\"\u732a\">Pig \u00b7 \u732a zh\u016b<\/option>\n              <\/select>\n            <\/div>\n\n            <div class=\"tzl-btn-row\">\n              <button class=\"tzl-action\" type=\"button\" onclick=\"tzlLoadCharacter()\">Load character<\/button>\n              <button class=\"tzl-action secondary\" type=\"button\" onclick=\"tzlReplayAnimation()\">Replay animation<\/button>\n              <button class=\"tzl-action secondary\" type=\"button\" onclick=\"tzlRestartQuiz()\">Reset practice<\/button>\n              <button class=\"tzl-action secondary\" type=\"button\" onclick=\"tzlToggleOutline()\">Show \/ hide outline<\/button>\n            <\/div>\n          <\/div>\n\n          <div class=\"tzl-writer-grid\">\n            <div class=\"tzl-writer-panel\">\n              <h3>Watch stroke order<\/h3>\n              <p>The animation shows how the character is built. Replay it a few times before tracing.<\/p>\n              <div id=\"tzl-animation-target\" class=\"tzl-writer-box\"><\/div>\n              <div id=\"tzlCharacterInfo\" class=\"tzl-current\"><\/div>\n              <div id=\"tzlAnimationStatus\" class=\"tzl-status\"><\/div>\n            <\/div>\n\n            <div class=\"tzl-writer-panel\">\n              <h3>Practice by tracing<\/h3>\n              <p>Use your mouse, trackpad, or finger. The goal is correct stroke order, not beautiful calligraphy.<\/p>\n              <div id=\"tzl-practice-target\" class=\"tzl-writer-box\"><\/div>\n              <div id=\"tzlPracticeStatus\" class=\"tzl-status\">Load a character, then trace the first stroke.<\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"tzl-note\">\n        <strong>If the animation does not load:<\/strong><br>\n        Check whether your browser blocks external scripts or CDN files. This interactive section loads Hanzi Writer and character data through jsDelivr. If your WordPress security plugin blocks scripts inside Custom HTML, move the script part into a Code Snippets \/ WPCode snippet or your theme footer.\n      <\/div>\n    <\/section>\n\n    <section class=\"tzl-card\">\n      <h2>The 12 zodiac characters<\/h2>\n      <p>\n        Start by recognizing the shapes. Some characters are simple, like \u725b and \u7f8a. Others, like \u9f20 and \u7334, are harder because they contain more parts. The point is not to rush. A character is easier to remember when you see how it is assembled.\n      <\/p>\n\n      <div class=\"tzl-char-grid\">\n        <div class=\"tzl-char-card\">\n          <div class=\"hanzi\">\u9f20<\/div>\n          <strong>Rat<\/strong>\n          <span>sh\u01d4 \u00b7 13 strokes<\/span>\n          <p>One of the harder zodiac characters. Notice the upper part first, then the lower details.<\/p>\n        <\/div>\n\n        <div class=\"tzl-char-card\">\n          <div class=\"hanzi\">\u725b<\/div>\n          <strong>Ox<\/strong>\n          <span>ni\u00fa \u00b7 4 strokes<\/span>\n          <p>A good beginner character. The vertical line anchors the whole shape.<\/p>\n        <\/div>\n\n        <div class=\"tzl-char-card\">\n          <div class=\"hanzi\">\u864e<\/div>\n          <strong>Tiger<\/strong>\n          <span>h\u01d4 \u00b7 8 strokes<\/span>\n          <p>Look for the top cover-like shape and the lower curved part.<\/p>\n        <\/div>\n\n        <div class=\"tzl-char-card\">\n          <div class=\"hanzi\">\u5154<\/div>\n          <strong>Rabbit<\/strong>\n          <span>t\u00f9 \u00b7 8 strokes<\/span>\n          <p>The small final dot matters. Do not leave the character looking like \u514d.<\/p>\n        <\/div>\n\n        <div class=\"tzl-char-card\">\n          <div class=\"hanzi\">\u9f99<\/div>\n          <strong>Dragon<\/strong>\n          <span>l\u00f3ng \u00b7 5 strokes<\/span>\n          <p>Simplified \u9f99 is compact. Keep the long curve balanced.<\/p>\n        <\/div>\n\n        <div class=\"tzl-char-card\">\n          <div class=\"hanzi\">\u86c7<\/div>\n          <strong>Snake<\/strong>\n          <span>sh\u00e9 \u00b7 11 strokes<\/span>\n          <p>Left side is \u866b, the insect\/creature component. Right side gives the rest of the shape.<\/p>\n        <\/div>\n\n        <div class=\"tzl-char-card\">\n          <div class=\"hanzi\">\u9a6c<\/div>\n          <strong>Horse<\/strong>\n          <span>m\u01ce \u00b7 3 strokes<\/span>\n          <p>Simple but easy to distort. Keep the bottom line steady.<\/p>\n        <\/div>\n\n        <div class=\"tzl-char-card\">\n          <div class=\"hanzi\">\u7f8a<\/div>\n          <strong>Goat<\/strong>\n          <span>y\u00e1ng \u00b7 6 strokes<\/span>\n          <p>A very useful character. The vertical line should hold the center.<\/p>\n        <\/div>\n\n        <div class=\"tzl-char-card\">\n          <div class=\"hanzi\">\u7334<\/div>\n          <strong>Monkey<\/strong>\n          <span>h\u00f3u \u00b7 12 strokes<\/span>\n          <p>The left side is the animal radical \u72ad. Keep the right side from becoming too wide.<\/p>\n        <\/div>\n\n        <div class=\"tzl-char-card\">\n          <div class=\"hanzi\">\u9e21<\/div>\n          <strong>Rooster<\/strong>\n          <span>j\u012b \u00b7 7 strokes<\/span>\n          <p>Simplified \u9e21 combines \u53c8 on the left with \u9e1f on the right.<\/p>\n        <\/div>\n\n        <div class=\"tzl-char-card\">\n          <div class=\"hanzi\">\u72d7<\/div>\n          <strong>Dog<\/strong>\n          <span>g\u01d2u \u00b7 8 strokes<\/span>\n          <p>Another \u72ad animal-radical character. The right side is \u53e5.<\/p>\n        <\/div>\n\n        <div class=\"tzl-char-card\">\n          <div class=\"hanzi\">\u732a<\/div>\n          <strong>Pig<\/strong>\n          <span>zh\u016b \u00b7 11 strokes<\/span>\n          <p>Left side is \u72ad. The right side \u8005 needs clear spacing.<\/p>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <section class=\"tzl-card\">\n      <h2>The basic stroke order rules<\/h2>\n      <p>\n        Most beginner mistakes come from writing the parts in a random order. You do not need to memorize every character separately at first. Learn the common movement rules, then apply them to the zodiac characters.\n      <\/p>\n\n      <div class=\"tzl-rule-grid\">\n        <div class=\"tzl-rule\">\n          <strong>Top before bottom<\/strong>\n          <p>Many characters are written from the upper part down. This helps keep the character balanced.<\/p>\n        <\/div>\n\n        <div class=\"tzl-rule\">\n          <strong>Left before right<\/strong>\n          <p>For left-right structures like \u86c7, \u7334, \u72d7, and \u732a, write the left component first.<\/p>\n        <\/div>\n\n        <div class=\"tzl-rule\">\n          <strong>Horizontal before vertical<\/strong>\n          <p>When a horizontal and vertical stroke cross, the horizontal often comes first, as in \u725b.<\/p>\n        <\/div>\n\n        <div class=\"tzl-rule\">\n          <strong>Outside before inside<\/strong>\n          <p>For enclosed or semi-enclosed structures, the outer frame often starts before the inner part.<\/p>\n        <\/div>\n\n        <div class=\"tzl-rule\">\n          <strong>Center before sides<\/strong>\n          <p>In some symmetrical characters, the center stroke is written before the side strokes.<\/p>\n        <\/div>\n\n        <div class=\"tzl-rule\">\n          <strong>Final dots matter<\/strong>\n          <p>Small final strokes, such as the dot in \u5154, can change whether a character looks complete.<\/p>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <section class=\"tzl-card\">\n      <h2>Stroke counts and writing notes<\/h2>\n      <p>\n        Stroke count is useful for dictionaries, learning apps, and old-style character lookup. It also gives you a quick sense of which zodiac characters will be easy to learn first.\n      <\/p>\n\n      <div class=\"tzl-table-wrap\">\n        <table class=\"tzl-table\">\n          <thead>\n            <tr>\n              <th>Animal<\/th>\n              <th>Character<\/th>\n              <th>Pinyin<\/th>\n              <th>Stroke count<\/th>\n              <th>Beginner note<\/th>\n            <\/tr>\n          <\/thead>\n          <tbody>\n            <tr><td>Rat<\/td><td>\u9f20<\/td><td>sh\u01d4<\/td><td>13<\/td><td>Harder. Learn in upper\/lower sections.<\/td><\/tr>\n            <tr><td>Ox<\/td><td>\u725b<\/td><td>ni\u00fa<\/td><td>4<\/td><td>Good first character.<\/td><\/tr>\n            <tr><td>Tiger<\/td><td>\u864e<\/td><td>h\u01d4<\/td><td>8<\/td><td>Watch the balance of top and bottom.<\/td><\/tr>\n            <tr><td>Rabbit<\/td><td>\u5154<\/td><td>t\u00f9<\/td><td>8<\/td><td>Do not miss the final dot.<\/td><\/tr>\n            <tr><td>Dragon<\/td><td>\u9f99<\/td><td>l\u00f3ng<\/td><td>5<\/td><td>Simple, but the long curve needs control.<\/td><\/tr>\n            <tr><td>Snake<\/td><td>\u86c7<\/td><td>sh\u00e9<\/td><td>11<\/td><td>Left component \u866b first.<\/td><\/tr>\n            <tr><td>Horse<\/td><td>\u9a6c<\/td><td>m\u01ce<\/td><td>3<\/td><td>Very simple; keep it square.<\/td><\/tr>\n            <tr><td>Goat<\/td><td>\u7f8a<\/td><td>y\u00e1ng<\/td><td>6<\/td><td>Center alignment matters.<\/td><\/tr>\n            <tr><td>Monkey<\/td><td>\u7334<\/td><td>h\u00f3u<\/td><td>12<\/td><td>Animal radical \u72ad on the left.<\/td><\/tr>\n            <tr><td>Rooster<\/td><td>\u9e21<\/td><td>j\u012b<\/td><td>7<\/td><td>\u53c8 left, \u9e1f right.<\/td><\/tr>\n            <tr><td>Dog<\/td><td>\u72d7<\/td><td>g\u01d2u<\/td><td>8<\/td><td>\u72ad left, \u53e5 right.<\/td><\/tr>\n            <tr><td>Pig<\/td><td>\u732a<\/td><td>zh\u016b<\/td><td>11<\/td><td>\u72ad left, \u8005 right.<\/td><\/tr>\n          <\/tbody>\n        <\/table>\n      <\/div>\n    <\/section>\n\n    <section class=\"tzl-card\">\n      <h2>Why stroke order matters for zodiac learning<\/h2>\n      <p>\n        If you only read Chinese zodiac pages in English, stroke order may seem unnecessary. But once you start learning the characters, it becomes useful very quickly. It helps you recognize components, copy characters more consistently, and avoid treating each character as a random drawing.\n      <\/p>\n\n      <p>\n        It also makes related characters easier to notice. \u7334, \u72d7, and \u732a all use \u72ad on the left, a common animal radical. \u86c7 uses \u866b on the left. These details are easier to see when you watch the character being built in order.\n      <\/p>\n    <\/section>\n\n    <section class=\"tzl-card\">\n      <h2>Common mistakes<\/h2>\n      <ul>\n        <li><strong>Drawing the character like a picture.<\/strong> Chinese characters are written through stroke sequence, not sketched freely.<\/li>\n        <li><strong>Ignoring radicals.<\/strong> Components like \u72ad and \u866b help you understand why some characters look related.<\/li>\n        <li><strong>Skipping small strokes.<\/strong> In characters like \u5154, a small dot can be part of the correct written form.<\/li>\n        <li><strong>Expecting calligraphy rules here.<\/strong> This page is for standard beginner handwriting, not brush-calligraphy style.<\/li>\n      <\/ul>\n    <\/section>\n\n    <section class=\"tzl-card tzl-faq\">\n      <h2>FAQ<\/h2>\n\n      <details>\n        <summary>Can I trace the characters with a mouse?<\/summary>\n        <p>Yes. The practice box lets you trace strokes with a mouse, trackpad, or touch screen. It is designed for stroke order practice, not calligraphy grading.<\/p>\n      <\/details>\n\n      <details>\n        <summary>What is Chinese stroke order?<\/summary>\n        <p>Stroke order is the standard sequence used to write the strokes of a Chinese character. It helps learners write characters clearly and consistently.<\/p>\n      <\/details>\n\n      <details>\n        <summary>Which zodiac character is easiest to write?<\/summary>\n        <p>\u9a6c, \u725b, \u9f99, and \u7f8a are good beginner characters because they have fewer strokes and clearer structures.<\/p>\n      <\/details>\n\n      <details>\n        <summary>Which zodiac character is hardest?<\/summary>\n        <p>\u9f20 is often the hardest for beginners because it has more strokes and a less familiar structure.<\/p>\n      <\/details>\n\n      <details>\n        <summary>Are simplified and traditional characters the same here?<\/summary>\n        <p>Some are the same, but not all. This page uses simplified Chinese characters because The Zodiac Lore\u2019s learning pages use Mandarin and mainland-standard simplified forms by default.<\/p>\n      <\/details>\n    <\/section>\n\n    <section class=\"tzl-card\">\n      <h2>Next steps<\/h2>\n      <div class=\"tzl-links\">\n    <a class=\"tzl-link\" href=\"\/learn\/\"><strong>Learn Chinese Zodiac<\/strong>The start-here hub for every guide.<span>Read &#8594;<\/span><\/a>\n\n        <a class=\"tzl-link\" href=\"\/learn-how-to-say-zodiac-animals\/\">\n          <strong>Mandarin pronunciation<\/strong>\n          Learn pinyin and tones for the 12 zodiac animals.\n          <span>Listen and learn \u2192<\/span>\n        <\/a>\n\n        <a class=\"tzl-link\" href=\"\/learn-zodiac-idioms\/\">\n          <strong>Zodiac idioms<\/strong>\n          Learn one useful Chinese idiom for each animal.\n          <span>Read idioms \u2192<\/span>\n        <\/a>\n\n        <a class=\"tzl-link\" href=\"\/learn-five-elements\/\">\n          <strong>The five elements<\/strong>\n          Understand Wood, Fire, Earth, Metal, and Water.\n          <span>Explore elements \u2192<\/span>\n        <\/a>\n      <\/div>\n    <\/section>\n\n    <section class=\"tzl-card\">\n      <h2>Editorial note<\/h2>\n      <p class=\"tzl-source-note\">\n        This page uses simplified Chinese characters and interactive stroke-order practice for the 12 zodiac animals. It is informed by modern mainland Chinese stroke-order standards, but it is written as a cultural learning page rather than a formal handwriting textbook. The animation and tracing areas use Hanzi Writer, an open-source JavaScript library for Chinese stroke-order animations and practice quizzes.\n      <\/p>\n    <\/section>\n  <\/div>\n\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/hanzi-writer@3\/dist\/hanzi-writer.min.js\"><\/script>\n\n  <script>\n    var tzlAnimationWriter = null;\n    var tzlPracticeWriter = null;\n    var tzlCurrentChar = '\u9f20';\n    var tzlOutlineVisible = true;\n\n    var tzlCharInfo = {\n      '\u9f20': { animal:'Rat', pinyin:'sh\u01d4', strokes:'13 strokes', note:'One of the harder zodiac characters. Watch the upper and lower sections carefully.' },\n      '\u725b': { animal:'Ox', pinyin:'ni\u00fa', strokes:'4 strokes', note:'A good beginner character. The vertical line anchors the whole shape.' },\n      '\u864e': { animal:'Tiger', pinyin:'h\u01d4', strokes:'8 strokes', note:'Watch the balance between the top cover and lower curved part.' },\n      '\u5154': { animal:'Rabbit', pinyin:'t\u00f9', strokes:'8 strokes', note:'Do not miss the final dot. It keeps \u5154 distinct from \u514d.' },\n      '\u9f99': { animal:'Dragon', pinyin:'l\u00f3ng', strokes:'5 strokes', note:'Simplified \u9f99 is compact, but the long curve needs control.' },\n      '\u86c7': { animal:'Snake', pinyin:'sh\u00e9', strokes:'11 strokes', note:'Write the left component \u866b first, then the right side.' },\n      '\u9a6c': { animal:'Horse', pinyin:'m\u01ce', strokes:'3 strokes', note:'Very simple, but keep the bottom line steady and the form square.' },\n      '\u7f8a': { animal:'Goat', pinyin:'y\u00e1ng', strokes:'6 strokes', note:'The central vertical line keeps the character balanced.' },\n      '\u7334': { animal:'Monkey', pinyin:'h\u00f3u', strokes:'12 strokes', note:'Write the animal radical \u72ad first, then keep the right side controlled.' },\n      '\u9e21': { animal:'Rooster', pinyin:'j\u012b', strokes:'7 strokes', note:'Simplified \u9e21 combines \u53c8 on the left with \u9e1f on the right.' },\n      '\u72d7': { animal:'Dog', pinyin:'g\u01d2u', strokes:'8 strokes', note:'The left side is \u72ad; the right side is \u53e5.' },\n      '\u732a': { animal:'Pig', pinyin:'zh\u016b', strokes:'11 strokes', note:'The left side is \u72ad; the right side \u8005 needs clear spacing.' }\n    };\n\n    function tzlCharDataLoader(char, onComplete) {\n      fetch('https:\/\/cdn.jsdelivr.net\/npm\/hanzi-writer-data@2.0.1\/' + encodeURIComponent(char) + '.json')\n        .then(function(response) {\n          if (!response.ok) {\n            throw new Error('Character data could not be loaded.');\n          }\n          return response.json();\n        })\n        .then(function(data) {\n          onComplete(data);\n        })\n        .catch(function(error) {\n          var animationStatus = document.getElementById('tzlAnimationStatus');\n          var practiceStatus = document.getElementById('tzlPracticeStatus');\n          if(animationStatus){ animationStatus.textContent = 'Character data failed to load. Please check CDN\/script access.'; }\n          if(practiceStatus){ practiceStatus.textContent = 'Practice data failed to load.'; }\n          console.error(error);\n        });\n    }\n\n    function tzlClearWriters() {\n      var animationTarget = document.getElementById('tzl-animation-target');\n      var practiceTarget = document.getElementById('tzl-practice-target');\n\n      if(animationTarget){ animationTarget.innerHTML = ''; }\n      if(practiceTarget){ practiceTarget.innerHTML = ''; }\n    }\n\n    function tzlIsDarkMode() {\n      return document.documentElement.classList.contains('tzl-dark');\n    }\n\n    function tzlWriterPalette() {\n      if (tzlIsDarkMode()) {\n        return {\n          radicalColor: '#ff7a59',\n          outlineColor: '#5a5a5a',\n          drawingColor: '#f2f2f2',\n          strokeColor: '#f2f2f2'\n        };\n      }\n      return {\n        radicalColor: '#c8282a',\n        outlineColor: '#d8c7aa',\n        drawingColor: '#1f1914',\n        strokeColor: '#1f1914'\n      };\n    }\n\n    function tzlCreateWriters(char) {\n      if(typeof HanziWriter === 'undefined'){\n        document.getElementById('tzlAnimationStatus').textContent = 'Hanzi Writer has not loaded yet. Refresh the page or check whether scripts are blocked.';\n        return;\n      }\n\n      tzlClearWriters();\n\n      var size = Math.min(300, document.getElementById('tzl-animation-target').clientWidth || 300);\n      var palette = tzlWriterPalette();\n\n      var commonOptions = {\n        width: size,\n        height: size,\n        padding: 18,\n        showOutline: tzlOutlineVisible,\n        showCharacter: false,\n        strokeAnimationSpeed: 1,\n        delayBetweenStrokes: 160,\n        radicalColor: palette.radicalColor,\n        outlineColor: palette.outlineColor,\n        drawingColor: palette.drawingColor,\n        strokeColor: palette.strokeColor,\n        charDataLoader: tzlCharDataLoader\n      };\n\n      tzlAnimationWriter = HanziWriter.create('tzl-animation-target', char, commonOptions);\n\n      tzlPracticeWriter = HanziWriter.create('tzl-practice-target', char, {\n        width: size,\n        height: size,\n        padding: 18,\n        showOutline: tzlOutlineVisible,\n        showCharacter: false,\n        radicalColor: palette.radicalColor,\n        outlineColor: palette.outlineColor,\n        drawingColor: palette.radicalColor,\n        strokeColor: palette.strokeColor,\n        leniency: 1.15,\n        charDataLoader: tzlCharDataLoader\n      });\n\n      var info = tzlCharInfo[char];\n      document.getElementById('tzlCharacterInfo').innerHTML =\n        '<strong>' + info.animal + ' \u00b7 ' + char + ' ' + info.pinyin + '<\/strong><br>' +\n        info.strokes + '<br>' +\n        info.note;\n\n      document.getElementById('tzlAnimationStatus').textContent = 'Animation ready. Click Replay animation to watch again.';\n      document.getElementById('tzlPracticeStatus').textContent = 'Trace the first stroke in the practice box.';\n\n      setTimeout(function(){\n        tzlReplayAnimation();\n        tzlRestartQuiz();\n      }, 500);\n    }\n\n    function tzlLoadCharacter() {\n      var select = document.getElementById('tzlStrokeCharacter');\n      tzlCurrentChar = select.value || '\u9f20';\n      tzlCreateWriters(tzlCurrentChar);\n    }\n\n    function tzlReplayAnimation() {\n      if(!tzlAnimationWriter){\n        tzlLoadCharacter();\n        return;\n      }\n      document.getElementById('tzlAnimationStatus').textContent = 'Playing stroke animation...';\n      tzlAnimationWriter.animateCharacter({\n        onComplete: function(){\n          document.getElementById('tzlAnimationStatus').textContent = 'Animation complete. Replay it or try tracing on the right.';\n        }\n      });\n    }\n\n    function tzlRestartQuiz() {\n      if(!tzlPracticeWriter){\n        tzlLoadCharacter();\n        return;\n      }\n\n      var status = document.getElementById('tzlPracticeStatus');\n      status.textContent = 'Trace the first stroke.';\n\n      tzlPracticeWriter.quiz({\n        onMistake: function(strokeData) {\n          status.textContent = 'Not quite. Try that stroke again.';\n        },\n        onCorrectStroke: function(strokeData) {\n          status.textContent = 'Good. Continue with the next stroke.';\n        },\n        onComplete: function(summaryData) {\n          status.textContent = 'Completed. You finished the character. Reset practice to try again.';\n        }\n      });\n    }\n\n    function tzlToggleOutline() {\n      tzlOutlineVisible = !tzlOutlineVisible;\n      tzlCreateWriters(tzlCurrentChar);\n    }\n\n    document.addEventListener('DOMContentLoaded', function(){\n      var tzlThemeObserver = new MutationObserver(function() {\n        if (typeof HanziWriter !== 'undefined') {\n          tzlCreateWriters(tzlCurrentChar);\n        }\n      });\n      tzlThemeObserver.observe(document.documentElement, { attributes:true, attributeFilter:['class'] });\n\n      var waitForHanziWriter = setInterval(function(){\n        if(typeof HanziWriter !== 'undefined'){\n          clearInterval(waitForHanziWriter);\n          tzlCreateWriters(tzlCurrentChar);\n        }\n      }, 150);\n\n      setTimeout(function(){\n        clearInterval(waitForHanziWriter);\n        if(typeof HanziWriter === 'undefined'){\n          var status = document.getElementById('tzlAnimationStatus');\n          if(status){\n            status.textContent = 'Hanzi Writer did not load. Check whether your WordPress page allows external scripts.';\n          }\n        }\n      }, 5000);\n    });\n  <\/script>\n\n  <script type=\"application\/ld+json\">\n  {\n    \"@context\":\"https:\/\/schema.org\",\n    \"@type\":\"FAQPage\",\n    \"mainEntity\":[\n      {\n        \"@type\":\"Question\",\n        \"name\":\"Can I trace the characters with a mouse?\",\n        \"acceptedAnswer\":{\n          \"@type\":\"Answer\",\n          \"text\":\"Yes. The practice box lets you trace strokes with a mouse, trackpad, or touch screen. It is designed for stroke order practice, not calligraphy grading.\"\n        }\n      },\n      {\n        \"@type\":\"Question\",\n        \"name\":\"What is Chinese stroke order?\",\n        \"acceptedAnswer\":{\n          \"@type\":\"Answer\",\n          \"text\":\"Stroke order is the standard sequence used to write the strokes of a Chinese character. It helps learners write characters clearly and consistently.\"\n        }\n      },\n      {\n        \"@type\":\"Question\",\n        \"name\":\"Which zodiac character is easiest to write?\",\n        \"acceptedAnswer\":{\n          \"@type\":\"Answer\",\n          \"text\":\"\u9a6c, \u725b, \u9f99, and \u7f8a are good beginner characters because they have fewer strokes and clearer structures.\"\n        }\n      },\n      {\n        \"@type\":\"Question\",\n        \"name\":\"Which zodiac character is hardest?\",\n        \"acceptedAnswer\":{\n          \"@type\":\"Answer\",\n          \"text\":\"\u9f20 is often the hardest for beginners because it has more strokes and a less familiar structure.\"\n        }\n      },\n      {\n        \"@type\":\"Question\",\n        \"name\":\"Are simplified and traditional characters the same here?\",\n        \"acceptedAnswer\":{\n          \"@type\":\"Answer\",\n          \"text\":\"Some are the same, but not all. This page uses simplified Chinese characters because The Zodiac Lore\u2019s learning pages use Mandarin and mainland-standard simplified forms by default.\"\n        }\n      }\n    ]\n  }\n  <\/script>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5b57 Stroke order \u00b7 \u7b14\u987a Chinese Zodiac Stroke Order Animations Watch each Chinese zodiac character being written stroke by stroke, then try tracing it yourself with a mouse or touch screen. This page uses simplified Chinese characters and beginner-friendly writing notes for the 12 zodiac animals. Watch, then trace the character Choose one zodiac animal. &#8230; <a title=\"Chinese Zodiac Stroke Order Animations\" class=\"read-more\" href=\"https:\/\/thezodiaclore.com\/de\/learn-stroke-order\/\" aria-label=\"Mehr Informationen \u00fcber Chinese Zodiac Stroke Order Animations\">Weiterlesen &#8230;<\/a><\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"rank_math_title":"Chinese Zodiac Stroke Order Animations","rank_math_description":"Learn how to write the 12 Chinese zodiac animal characters with stroke order animations, pinyin, meanings, and simple writing notes for beginners.\n","rank_math_focus_keyword":"Chinese zodiac stroke order","footnotes":""},"class_list":["post-364","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/thezodiaclore.com\/de\/wp-json\/wp\/v2\/pages\/364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thezodiaclore.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thezodiaclore.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thezodiaclore.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thezodiaclore.com\/de\/wp-json\/wp\/v2\/comments?post=364"}],"version-history":[{"count":7,"href":"https:\/\/thezodiaclore.com\/de\/wp-json\/wp\/v2\/pages\/364\/revisions"}],"predecessor-version":[{"id":3120,"href":"https:\/\/thezodiaclore.com\/de\/wp-json\/wp\/v2\/pages\/364\/revisions\/3120"}],"wp:attachment":[{"href":"https:\/\/thezodiaclore.com\/de\/wp-json\/wp\/v2\/media?parent=364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}