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%20373%20728%20Q%20363%20735%20323%20740%20Q%20310%20743%20307%20738%20Q%20300%20731%20310%20714%20Q%20347%20642%20369%20523%20Q%20373%20487%20395%20464%20Q%20414%20442%20419%20458%20Q%20423%20471%20422%20490%20L%20418%20525%20Q%20402%20591%20384%20689%20C%20379%20719%20377%20726%20373%20728%20Z%22%3E%3C%2Fpath%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22mask-2%22%3E%3Cpath%20d%3D%22M%20643%20551%20Q%20680%20662%20725%20690%20Q%20744%20712%20729%20733%20Q%20681%20773%20636%20785%20Q%20620%20788%20604%20781%20Q%20510%20745%20373%20728%20C%20343%20724%20354%20684%20384%20689%20Q%20397%20690%20414%20695%20Q%20502%20708%20586%20723%20Q%20608%20727%20616%20719%20Q%20632%20698%20585%20557%20C%20576%20529%20633%20523%20643%20551%20Z%22%3E%3C%2Fpath%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22mask-3%22%3E%3Cpath%20d%3D%22M%20422%20490%20Q%20429%20489%20442%20491%20Q%20509%20504%20655%20516%20Q%20665%20517%20667%20526%20Q%20667%20533%20643%20551%20C%20624%20566%20614%20564%20585%20557%20Q%20491%20535%20418%20525%20C%20388%20521%20392%20491%20422%20490%20Z%22%3E%3C%2Fpath%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22mask-4%22%3E%3Cpath%20d%3D%22M%20182%20317%20Q%20169%20324%20135%20328%20Q%20122%20332%20119%20326%20Q%20112%20319%20122%20303%20Q%20156%20230%20178%20108%20Q%20182%2072%20203%2048%20Q%20222%2026%20227%2042%20Q%20234%2064%20227%20107%20L%20220%20143%20Q%20201%20245%20195%20282%20C%20190%20312%20190%20314%20182%20317%20Z%22%3E%3C%2Fpath%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22mask-5%22%3E%3Cpath%20d%3D%22M%20414%20173%20Q%20436%20263%20469%20290%20Q%20485%20309%20470%20328%20Q%20452%20341%20397%20365%20Q%20378%20372%20308%20345%20Q%20253%20330%20182%20317%20C%20153%20312%20166%20275%20195%20282%20Q%20208%20286%20345%20312%20Q%20361%20316%20368%20309%20Q%20378%20300%20377%20279%20Q%20370%20222%20361%20175%20C%20356%20146%20407%20144%20414%20173%20Z%22%3E%3C%2Fpath%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22mask-6%22%3E%3Cpath%20d%3D%22M%20227%20107%20Q%20234%20107%20243%20108%20Q%20301%20123%20432%20135%20Q%20442%20136%20444%20146%20Q%20444%20155%20414%20173%20C%20396%20184%20390%20183%20361%20175%20Q%20282%20154%20220%20143%20C%20190%20138%20197%20106%20227%20107%20Z%22%3E%3C%2Fpath%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22mask-7%22%3E%3Cpath%20d%3D%22M%20584%20356%20Q%20562%20369%20540%20374%20Q%20533%20377%20528%20371%20Q%20521%20365%20530%20354%20Q%20569%20296%20580%20151%20Q%20581%2097%20619%2065%20Q%20620%2065%20623%2063%20Q%20641%2059%20641%2088%20Q%20641%20107%20637%20128%20L%20628%20167%20Q%20625%20195%20620%20227%20Q%20613%20279%20611%20321%20C%20610%20342%20610%20342%20584%20356%20Z%22%3E%3C%2Fpath%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22mask-8%22%3E%3Cpath%20d%3D%22M%20843%20189%20Q%20876%20300%20911%20324%20Q%20930%20345%20913%20364%20Q%20832%20427%20774%20398%20Q%20701%20373%20584%20356%20C%20554%20352%20582%20313%20611%20321%20Q%20621%20324%20633%20327%20Q%20708%20340%20779%20353%20Q%20798%20357%20805%20349%20Q%20815%20339%20814%20316%20Q%20802%20250%20788%20196%20C%20781%20167%20834%20160%20843%20189%20Z%22%3E%3C%2Fpath%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22mask-9%22%3E%3Cpath%20d%3D%22M%20637%20128%20Q%20641%20128%20649%20129%20Q%20716%20142%20857%20150%20Q%20870%20151%20871%20161%20Q%20871%20170%20843%20189%20L%20788%20196%20Q%20787%20197%20785%20196%20Q%20698%20177%20628%20167%20C%20598%20163%20607%20126%20637%20128%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%20236.5%20792.9%20L%20348%20705%20L%20359%20675%20L%20408%20464%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%22390.579859295066%2C390.579859295066%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20390.549%3B%20stroke-dasharray%3A%20390.549%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%20307.4%20789.5%20L%20398%20711%20L%20607%20753%20L%20642%20745%20L%20671%20712%20L%20623%20582%20L%20593%20568%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%22584.5465620863438%2C584.5465620863438%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20584.575%3B%20stroke-dasharray%3A%20584.575%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%20358.2%20422.5%20L%20438%20509%20L%20582%20533%20L%20634%20534%20L%20657%20525%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%22340.3858993063517%2C340.3858993063517%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20340.381%3B%20stroke-dasharray%3A%20340.381%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%2048.9%20379.2%20L%20159%20294%20L%20165%20278%20L%20216%2048%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%22391.879101218495%2C391.879101218495%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20391.89%3B%20stroke-dasharray%3A%20391.89%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%20129.5%20213.4%20L%20208%20304%20L%20346%20336%20L%20393%20332%20L%20420%20304%20L%20393%20201%20L%20368%20181%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%22486.0738743808767%2C486.0738743808767%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20486.102%3B%20stroke-dasharray%3A%20486.102%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%20145.6%20196.1%20L%20241%20128%20L%20367%20152%20L%20413%20153%20L%20435%20146%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%22314.56766153521676%2C314.56766153521676%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20314.576%3B%20stroke-dasharray%3A%20314.576%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%20457.9%20425.5%20L%20566%20339%20L%20582%20310%20L%20607%20142%20L%20627%2075%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%22411.3110539386828%2C411.3110539386828%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20411.34%3B%20stroke-dasharray%3A%20411.34%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%20499.1%20388.4%20L%20623%20343%20L%20800%20380%20L%20830%20372%20L%20860%20342%20L%20823%20220%20L%20796%20201%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%22546.7561322874351%2C546.7561322874351%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20546.759%3B%20stroke-dasharray%3A%20546.759%3B%20animation%3A%20800ms%20linear%207000ms%201%20normal%20forwards%20running%20draw-stroke%3B%22%3E%3C%2Fpath%3E%3Cpath%20clip-path%3D%22url(%23mask-9)%22%20d%3D%22M%20544.5%20202.3%20L%20661%20151%20L%20781%20171%20L%20834%20170%20L%20861%20161%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%22330.4381832377694%2C330.4381832377694%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20330.42%3B%20stroke-dasharray%3A%20330.42%3B%20animation%3A%20800ms%20linear%208000ms%201%20normal%20forwards%20running%20draw-stroke%3B%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E)
62 learners have practiced this character
Three mouths (口) stacked together represent many people talking — grade, quality, or product.
Download and print worksheets to practice writing 品
HSK words that contain this character.
Real-world example sentences demonstrating how 品 is used in context
Enjoying HanziStroke?$24.99 one-time· Unlimited practice· No ads Learn more →
Please taste this new tea.
The quality of this product is very good.
This brand is very famous in the market.
The condition of this art piece is very good.
