Watch each stroke animate in order, then practice the same sequence by hand.
.%3C%2Fdesc%3E%3Cstyle%3E%0A%40keyframes%20draw-stroke%20%7B%0A%20%20to%20%7B%20stroke-dashoffset%3A%200%3B%20opacity%3A%201%3B%20%7D%0A%7D%0A%3C%2Fstyle%3E%3Cg%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22500%22%20height%3D%22500%22%20fill%3D%22%238ecae6%22%3E%3C%2Frect%3E%3Cline%20x1%3D%220%22%20y1%3D%22250%22%20x2%3D%22500%22%20y2%3D%22250%22%20stroke%3D%22rgba(255%2C255%2C255%2C0.2)%22%20stroke-width%3D%221%22%3E%3C%2Fline%3E%3Cline%20x1%3D%22250%22%20y1%3D%220%22%20x2%3D%22250%22%20y2%3D%22500%22%20stroke%3D%22rgba(255%2C255%2C255%2C0.2)%22%20stroke-width%3D%221%22%3E%3C%2Fline%3E%3Ctext%20x%3D%22490%22%20y%3D%22488%22%20fill%3D%22%23ffffff%22%20font-size%3D%2218%22%20font-family%3D%22Arial%2C%20sans-serif%22%20text-anchor%3D%22end%22%20dominant-baseline%3D%22ideographic%22%20opacity%3D%220.8%22%3Ehanzistroke.com%3C%2Ftext%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22mask-1%22%3E%3Cpath%20d%3D%22M%20539%20701%20Q%20701%20734%20706%20737%20Q%20715%20744%20710%20752%20Q%20704%20764%20676%20772%20Q%20648%20779%20618%20769%20Q%20581%20759%20543%20748%20L%20481%20735%20Q%20415%20725%20343%20719%20Q%20307%20715%20332%20698%20Q%20368%20671%20425%20683%20Q%20453%20687%20484%20692%20L%20539%20701%20Z%22%3E%3C%2Fpath%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22mask-2%22%3E%3Cpath%20d%3D%22M%20533%20593%20Q%20567%20602%20672%20614%20Q%20681%20613%20689%20624%20Q%20690%20634%20670%20644%20Q%20642%20665%20540%20633%20Q%20537%20633%20535%20632%20L%20486%20621%20Q%20441%20615%20348%20602%20Q%20323%20598%20342%20583%20Q%20373%20562%20408%20569%20Q%20442%20578%20487%20584%20L%20533%20593%20Z%22%3E%3C%2Fpath%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22mask-3%22%3E%3Cpath%20d%3D%22M%20528%20506%20Q%20531%20551%20533%20593%20L%20535%20632%20Q%20536%20668%20539%20701%20L%20543%20748%20Q%20544%20763%20547%20773%20Q%20551%20789%20554%20800%20Q%20558%20810%20538%20825%20Q%20504%20843%20480%20847%20Q%20464%20850%20456%20841%20Q%20449%20834%20457%20819%20Q%20478%20791%20479%20772%20Q%20480%20754%20481%20735%20L%20484%20692%20Q%20485%20658%20486%20621%20L%20487%20584%20Q%20487%20544%20487%20500%20C%20487%20470%20526%20476%20528%20506%20Z%22%3E%3C%2Fpath%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22mask-4%22%3E%3Cpath%20d%3D%22M%20487%20500%20Q%20367%20487%20306%20475%20Q%20236%20462%20129%20458%20Q%20116%20458%20115%20447%20Q%20115%20435%20133%20421%20Q%20178%20394%20209%20405%20Q%20240%20418%20402%20449%20Q%20456%20459%20517%20466%20Q%20572%20472%20624%20479%20Q%20780%20500%20911%20488%20Q%20933%20487%20940%20495%20Q%20947%20508%20935%20519%20Q%20869%20576%20806%20554%20Q%20745%20541%20681%20529%20Q%20587%20516%20528%20506%20L%20487%20500%20Z%22%3E%3C%2Fpath%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22mask-5%22%3E%3Cpath%20d%3D%22M%20391%20177%20Q%20392%20217%20397%20247%20L%20400%20274%20Q%20404%20328%20408%20346%20Q%20408%20350%20408%20353%20C%20410%20370%20410%20370%20396%20381%20Q%20378%20399%20347%20399%20Q%20334%20395%20339%20383%20Q%20381%20289%20330%20109%20Q%20297%2040%20328%20-2%20Q%20334%20-15%20344%20-10%20Q%20377%2011%20387%20121%20Q%20388%20137%20389%20151%20L%20391%20177%20Z%22%3E%3C%2Fpath%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22mask-6%22%3E%3Cpath%20d%3D%22M%20408%20353%20Q%20420%20354%20437%20359%20Q%20570%20387%20592%20377%20Q%20605%20373%20609%20346%20Q%20625%20184%20620%2058%20Q%20619%2033%20605%2027%20Q%20593%2023%20534%2038%20Q%20521%2041%20522%2032%20Q%20523%2025%20539%2015%20Q%20576%20-16%20605%20-50%20Q%20621%20-66%20638%20-65%20Q%20654%20-61%20672%20-15%20Q%20696%2031%20691%2079%20Q%20681%20193%20670%20296%20Q%20666%20338%20682%20371%20Q%20695%20387%20679%20402%20Q%20660%20418%20620%20431%20Q%20598%20441%20579%20429%20Q%20560%20422%20525%20410%20Q%20438%20389%20396%20381%20C%20367%20375%20379%20347%20408%20353%20Z%22%3E%3C%2Fpath%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22mask-7%22%3E%3Cpath%20d%3D%22M%20397%20247%20Q%20418%20241%20541%20261%20Q%20542%20262%20547%20262%20Q%20568%20266%20571%20269%20Q%20578%20276%20574%20283%20Q%20568%20292%20545%20298%20Q%20532%20301%20448%20281%20Q%20426%20277%20400%20274%20C%20370%20270%20367%20252%20397%20247%20Z%22%3E%3C%2Fpath%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22mask-8%22%3E%3Cpath%20d%3D%22M%20389%20151%20Q%20419%20147%20505%20155%20Q%20527%20159%20551%20162%20Q%20575%20166%20578%20169%20Q%20585%20176%20582%20182%20Q%20576%20192%20553%20199%20Q%20529%20205%20505%20196%20Q%20480%20189%20451%20184%20Q%20423%20180%20391%20177%20C%20361%20174%20359%20154%20389%20151%20Z%22%3E%3C%2Fpath%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20transform%3D%22%0A%20%20%20%20translate(10%2C%20431.875)%0A%20%20%20%20scale(0.46875%2C%20-0.46875)%0A%20%20%22%3E%3Cg%20style%3D%22opacity%3A%201%3B%22%3E%3Cpath%20clip-path%3D%22url(%23mask-1)%22%20d%3D%22M%20239.1%20741.6%20L%20358%20702%20L%20397%20701%20L%20549%20724%20L%20632%20747%20L%20678%20751%20L%20701%20746%22%20stroke%3D%22%23ff0000%22%20stroke-width%3D%22200%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22miter%22%20stroke-dasharray%3D%22473.8799250911097%2C473.8799250911097%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20473.903%3B%20stroke-dasharray%3A%20473.903%3B%20animation%3A%20800ms%20linear%200ms%201%20normal%20forwards%20running%20draw-stroke%3B%22%3E%3C%2Fpath%3E%3Cpath%20clip-path%3D%22url(%23mask-2)%22%20d%3D%22M%20244.9%20606.5%20L%20388%20587%20L%20625%20631%20L%20679%20626%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%22200%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22miter%22%20stroke-dasharray%3D%22439.6879814625889%2C439.6879814625889%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20439.703%3B%20stroke-dasharray%3A%20439.703%3B%20animation%3A%20800ms%20linear%201000ms%201%20normal%20forwards%20running%20draw-stroke%3B%22%3E%3C%2Fpath%3E%3Cpath%20clip-path%3D%22url(%23mask-3)%22%20d%3D%22M%20387%20888.2%20L%20502%20808%20L%20514%20789%20L%20509%20530%20L%20493%20507%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%22200%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22miter%22%20stroke-dasharray%3D%22449.7626852811587%2C449.7626852811587%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20449.742%3B%20stroke-dasharray%3A%20449.742%3B%20animation%3A%20800ms%20linear%202000ms%201%20normal%20forwards%20running%20draw-stroke%3B%22%3E%3C%2Fpath%3E%3Cpath%20clip-path%3D%22url(%23mask-4)%22%20d%3D%22M%2034.2%20483.1%20L%20152%20436%20L%20196%20432%20L%20424%20474%20L%20822%20525%20L%20873%20522%20L%20929%20504%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%22200%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22miter%22%20stroke-dasharray%3D%22914.1076243841845%2C914.1076243841845%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20914.049%3B%20stroke-dasharray%3A%20914.049%3B%20animation%3A%20800ms%20linear%203000ms%201%20normal%20forwards%20running%20draw-stroke%3B%22%3E%3C%2Fpath%3E%3Cpath%20clip-path%3D%22url(%23mask-5)%22%20d%3D%22M%20270.6%20451.3%20L%20370%20370%20L%20380%20347%20L%20380%20286%20L%20365%20145%20L%20339%200%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%22200%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22miter%22%20stroke-dasharray%3D%22503.6134336008562%2C503.6134336008562%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20503.602%3B%20stroke-dasharray%3A%20503.602%3B%20animation%3A%20800ms%20linear%204000ms%201%20normal%20forwards%20running%20draw-stroke%3B%22%3E%3C%2Fpath%3E%3Cpath%20clip-path%3D%22url(%23mask-6)%22%20d%3D%22M%20307.1%20406.6%20L%20417%20370%20L%20447%20374%20L%20600%20406%20L%20642%20378%20L%20642%20290%20L%20656%2084%20L%20652%2032%20L%20628%20-10%20L%20599%20-3%20L%20530%2031%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%22200%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22miter%22%20stroke-dasharray%3D%22854.62243838395%2C854.62243838395%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20854.645%3B%20stroke-dasharray%3A%20854.645%3B%20animation%3A%20800ms%20linear%205000ms%201%20normal%20forwards%20running%20draw-stroke%3B%22%3E%3C%2Fpath%3E%3Cpath%20clip-path%3D%22url(%23mask-7)%22%20d%3D%22M%20309.8%20212%20L%20421%20262%20L%20517%20277%20L%20563%20278%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%22200%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22miter%22%20stroke-dasharray%3D%22265.10738892498057%2C265.10738892498057%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20265.1%3B%20stroke-dasharray%3A%20265.1%3B%20animation%3A%20800ms%20linear%206000ms%201%20normal%20forwards%20running%20draw-stroke%3B%22%3E%3C%2Fpath%3E%3Cpath%20clip-path%3D%22url(%23mask-8)%22%20d%3D%22M%20295.4%20140.2%20L%20535%20181%20L%20571%20178%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%22200%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22miter%22%20stroke-dasharray%3D%22279.1527530290995%2C279.1527530290995%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20279.174%3B%20stroke-dasharray%3A%20279.174%3B%20animation%3A%20800ms%20linear%207000ms%201%20normal%20forwards%20running%20draw-stroke%3B%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E)
50 learners have practiced this character
Download and print worksheets to practice writing 青
Real-world example sentences demonstrating how 青 is used in context
Enjoying HanziStroke?$24.99 one-time· Unlimited practice· No ads Learn more →
The mountains in the distance are blue/green.
Youth are the future of the nation.
Youth is the most beautiful time.
The green grass glitters in the sunlight.
