<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<base href="https://hanzi.pedrocorreia.net/">
<title>Hànzì</title>
<link rel="stylesheet" href="/assets/dist/bundle.css?_=1.02">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TYHWG5L79F"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-TYHWG5L79F');
</script>
<script>var __VERSIONING="1.02";</script>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="#DE2910">
<meta name="apple-mobile-web-app-title" content="Hànzì">
<meta name="msapplication-TileColor" content="#DA532C">
<meta name="theme-color" content="#DE2910">
<meta name="description" content="Discover, learn how to draw, how to say and the meaning of over 7500+ Chinese characters. Export to PDF, print it and train your caligraphy on paper">
<meta name="keywords" content="discover learn chinese characters hanzi pdf print trainning caligraphy"><meta property="og:title" content="Hànzì">
<meta property="og:site_name" content="Hànzì">
<meta property="og:description" content="Discover, learn how to draw, how to say and the meaning of over 7500+ Chinese characters. Export to PDF, print it and train your caligraphy on paper">
<meta property="og:type" content="website">
<meta property="og:image" content="https://hanzi.pedrocorreia.net/assets/app/apple-splash-1136-640.png">
<meta property="og:url" content="https://hanzi.pedrocorreia.net">
<meta name="twitter:title" content="Hànzì">
<meta name="twitter:site" content="Hànzì">
<meta name="twitter:description" content="Discover, learn how to draw, how to say and the meaning of over 7500+ Chinese characters. Export to PDF, print it and train your caligraphy on paper">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://hanzi.pedrocorreia.net/assets/app/apple-splash-1136-640.png">
<meta name="twitter:url" content="https://hanzi.pedrocorreia.net"><link rel="shortcut icon" href="/favicon.ico">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#DE2910">
<link rel="icon" type="image/png" sizes="196x196" href="/assets/app/favicon-196.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/app/apple-icon-180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/assets/app/apple-icon-167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/app/apple-icon-152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/assets/app/apple-icon-120.png">

<link rel="apple-touch-startup-image" href="/assets/app/apple-splash-2048-2732.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/app/apple-splash-2732-2048.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/app/apple-splash-1668-2388.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/app/apple-splash-2388-1668.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/app/apple-splash-1668-2224.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/app/apple-splash-2224-1668.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/app/apple-splash-1536-2048.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/app/apple-splash-2048-1536.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/app/apple-splash-1242-2688.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/app/apple-splash-2688-1242.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/app/apple-splash-1125-2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/app/apple-splash-2436-1125.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/app/apple-splash-828-1792.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/app/apple-splash-1792-828.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/app/apple-splash-1242-2208.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/app/apple-splash-2208-1242.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/app/apple-splash-750-1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/app/apple-splash-1334-750.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/app/apple-splash-640-1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/app/apple-splash-1136-640.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><script type="text/x-tmpl" id="tmpl-list-chars">
{% for (var i=0, count = o.json.length; i < count; i++){ %}
  <div class="char cc-4-s cc-3-m cc-2-l cc-1-xl" data-title="{%=o.json[i][o.global.KEY_SLUG]%} {%=o.json[i][o.global.KEY_HANZI]%}">
    <button id="hanzi-char-{%=o.json[i][o.global.KEY_ID]%}" class="btn" data-name="{%=o.json[i][o.global.KEY_NAME]%}" title="{%=o.json[i][o.global.KEY_TITLE]%} {%=o.json[i][o.global.KEY_HANZI]%}" data-hanzi="{%=o.json[i][o.global.KEY_HANZI]%}" data-pinyin="{%=o.json[i][o.global.KEY_TITLE]%}"></button>
    <p class="cc-fs-25-s cc-fs-26-m">{%=o.json[i][o.global.KEY_TITLE]%}</p>
  </div>
{% } %}
</script><script type="text/x-tmpl" id="tmpl-modal-char">
  <div class="modal-char cc-txt-center">
    <h2 class="modal-title">{%=o.char[o.global.KEY_TITLE]%}</h2>
    {% if(o.char[o.global.KEY_DEFINITION]){ %}
    <p class="translations cc-fs-18-s cc-fs-20-m">{%=o.char[o.global.KEY_DEFINITION]%}</p>
    {% } %}
    <div class="canvas">
      <div id="svg-{%=o.char[o.global.KEY_NAME]%}" class="svg-animation"></div>
      <canvas id="canvas"></canvas>
      <p id="indicator-hit-miss"><i class="fas fa-check"></i> <span>0</span> <i class="fas fa-times"></i> <span>0</span></p>
      <object class="strokes-order" data="assets/characters/svg/order/{%=o.char[o.global.KEY_NAME]%}.svg" type="image/svg+xml"></object>
      <button id="btn-download-drawing" class="btn cc-thin cc-bg-red" type="button"><em class="fa fa-download"></em></button>
    </div>
    <section class="holder-actions">
      {% if(o.char[o.global.KEY_AUDIO]){ %}
      <audio id="player-{%=o.char[o.global.KEY_NAME]%}" src="assets/characters/audio/{%=o.char[o.global.KEY_AUDIO]%}" type="audio/mp3" playsinline>
        <source src="assets/characters/audio/{%=o.char[o.global.KEY_AUDIO]%}" type="audio/mp3">
      </audio>
      <button id="btn-audio" class="btn cc-outlined cc-bg-yellow btn-audio" data-target="#player-{%=o.char[o.global.KEY_NAME]%}" title="Listen to audio"><i class="fas fa-music"></i></button>
      {% } %}
      <button id="btn-restart" class="btn cc-outlined cc-bg-orange" title="Restart character animation"><i class="fas fa-step-backward"></i></button>
      <button id="btn-play" class="playing btn cc-outlined cc-bg-red" title="Play/ Pause character animation"><i class="pause fas fa-pause-circle"></i><i class="play fas fa-play-circle"></i></button>
      <button id="btn-canvas" class="btn cc-outlined cc-bg-red" title="Draw over character"><i class="fas fa-paint-brush"></i></button>
      <button id="btn-toggle-opacity" class="btn cc-outlined cc-bg-green btn-action-canvas" title="Show/ Hide character"><i class="active fas fa-eye"></i><i class="inactive fas fa-eye-slash"></i></button>
      <button id="btn-undo" class="btn cc-outlined cc-bg-green btn-action-canvas" title="Undo draw"><i class="active fas fa-eraser"></i></button>
      <button id="btn-quiz-no-outline" class="btn cc-outlined cc-bg-blue btn-action-quiz" title="Show/ Hide character"><i class="fas fa-low-vision"></i></button>
      <button id="btn-quiz" class="btn cc-outlined cc-bg-blue" title="Draw character"><i class="fas fa-draw-polygon"></i></button>
    </section>
    <button id="btn-strokes-order-toggle" class="btn " type="button"><em class="fa fa-sort-numeric-down"></em></button>
  </div>
</script><script type="text/x-tmpl" id="tmpl-modal-svg-grid">
  <svg class="svg-grid" xmlns="http://www.w3.org/2000/svg" width="{%=o.width%}" height="{%=o.width%}">
    <line x1="0" y1="0" x2="{%=o.width%}" y2="{%=o.width%}" stroke="{%=o.color%}" />
    <line x1="{%=o.width%}" y1="0" x2="0" y2="{%=o.width%}" stroke="{%=o.color%}" />
    <line x1="{%=o.width/2%}" y1="0" x2="{%=o.width/2%}" y2="{%=o.width%}" stroke="{%=o.color%}" />
    <line x1="0" y1="{%=o.width/2%}" x2="{%=o.width%}" y2="{%=o.width/2%}" stroke="{%=o.color%}" />
  </svg>
</script></head>

<body id="page-main">

  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PZGVNXT" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<header id="header" class="cc-bg-red cc-pa">
  <button id="btn-wrapper" class="hamburger cc-thin hamburger--collapse" type="button">
    <span class="hamburger-box"><span class="hamburger-inner"></span></span>
  </button>
  <img src="assets/23398.svg" alt="Hànzì"> <span>Hànzì</span>
</header>
  <main id="main" class="container">
    <div id="char-list-filter-holder">
      <form>
        <div class="form-item">
          <input id="search_for" class="search_for" type="search" placeholder="Pinyin/ Hànzì" title="Pinyin/ Hànzì" value="" autocomplete="off">
          <button type="button" id="btn-search-for"><i class="fa fa-search"></i></button>
          <!--<button type="button" id="btn-search-clear"><i class="fa fa-times-circle"></i></button>-->
        </div>
      </form>

      <div id="char-list-filter-console" class="hide"></div>
    </div>
    <div id="chars-list-holder" class="m-progress">
      <div id="chars-list" class="list-chars columns cc-txt-center"></div>
      <div id="chars-list-pagination">
        <button type="button" class="hide">Show more...</button>
      </div>
    </div>
  </main>

  <div id="target"></div>

  <nav id="menu-wrapper" class="closed">
  <ul class="cc-unstyled">
    <li><a class="btn" title="Export" href="/export"><i class="fa fa-fw fa-file-pdf"></i> Export</a></li>
    <li><a class="btn" title="Tutorial" data-mediabox="my-gallery-name" data-title="" href="https://www.youtube.com/embed/XS75u9rGL4g" data-width="900" data-height="675" data-iframe="true"><i class="fa fa-fw fa-video"></i> Tutorial</a></li>
    <li><a class="btn" title="Quiz" href="https://quiz.pedrocorreia.com/cn"><i class="fa fa-fw fa-question-circle"></i> Quiz</a></li>
    <li><button id="btn-disclaimer" class="btn" title="Disclaimer"><i class="fa fa-fw fa-info-circle"></i> Disclaimer</button></li>
  </ul>
</nav><div id="modal" class="modal">
  <div class="modal-overlay"></div>
  <div class="modal-content">
    <button type="button" id="btn-modal-close" aria-label="Close this dialog">×</button>
    <div class="modal-types">
      <svg class="ok type" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
        <circle class="path circle" fill="none" stroke="#80ae37" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
        <polyline class="path check" fill="none" stroke="#80ae37" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
      </svg>
      <svg class="error type" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
        <circle class="path circle" fill="none" stroke="#DE2910" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
        <line class="path line" fill="none" stroke="#DE2910" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="34.4" y1="37.9" x2="95.8" y2="92.3"/>
        <line class="path line" fill="none" stroke="#DE2910" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="95.8" y1="38" x2="34.4" y2="92.2"/>
      </svg>
    </div>
    <div id="modal-body" class="modal-body"></div>
  </div>
</div>
  <script>
    var MODULE='Index',LOAD_CHAR='',META_DEFAULTS={BASE_URL:'/',BASE_URL_ABSOLUTE:'https://hanzi.pedrocorreia.net/',TITLE:'Hànzì',DESCRIPTION:'Discover, learn how to draw, how to say and the meaning of over 7500+ Chinese characters. Export to PDF, print it and train your caligraphy on paper',IMAGE:'https://hanzi.pedrocorreia.net/assets/app/apple-splash-1136-640.png'}
  </script>
  <script type="text/javascript" src="/assets/dist/bundle.js?_=1.02"></script>
</body>
</html>