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%20321%20513%20Q%20331%20526%20346%20540%20Q%20407%20610%20501%20747%20L%20516%20768%20Q%20537%20798%20537%20800%20Q%20536%20810%20523%20823%20Q%20490%20856%20455%20852%20Q%20445%20851%20447%20837%20Q%20462%20743%20291%20547%20Q%20272%20528%20253%20509%20Q%20195%20452%2054%20344%20Q%2045%20340%2056%20336%20Q%2069%20337%20102%20355%20Q%20159%20380%20210%20416%20Q%20256%20450%20308%20500%20L%20321%20513%20Z%22%3E%3C%2Fpath%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22mask-2%22%3E%3Cpath%20d%3D%22M%20501%20747%20Q%20607%20617%20741%20482%20Q%20763%20460%20798%20463%20Q%20915%20472%20952%20480%20Q%20962%20484%20964%20489%20Q%20964%20495%20948%20502%20Q%20765%20553%20702%20608%20Q%20615%20677%20516%20768%20C%20494%20788%20482%20770%20501%20747%20Z%22%3E%3C%2Fpath%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22mask-3%22%3E%3Cpath%20d%3D%22M%20455%20602%20Q%20503%20556%20535%20546%20Q%20548%20545%20556%20556%20Q%20560%20568%20556%20582%20Q%20544%20618%20485%20631%20Q%20451%20640%20440%20635%20Q%20436%20634%20438%20623%20Q%20441%20613%20455%20602%20Z%22%3E%3C%2Fpath%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22mask-4%22%3E%3Cpath%20d%3D%22M%20537%20283%20Q%20553%20258%20569%20250%20Q%20579%20243%20593%20262%20Q%20608%20287%20638%20427%20Q%20645%20455%20667%20479%20Q%20679%20491%20668%20504%20Q%20653%20520%20614%20543%20Q%20595%20550%20581%20546%20Q%20562%20539%20530%20531%20Q%20493%20521%20444%20509%20Q%20404%20499%20373%20489%20C%20344%20480%20365%20454%20394%20461%20Q%20400%20462%20404%20463%20Q%20458%20481%20553%20501%20Q%20574%20505%20581%20499%20Q%20594%20483%20591%20468%20Q%20563%20315%20544%20306%20C%20532%20290%20532%20290%20537%20283%20Z%22%3E%3C%2Fpath%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22mask-5%22%3E%3Cpath%20d%3D%22M%20389%20364%20Q%20393%20364%20399%20365%20Q%20469%20378%20521%20388%20Q%20540%20392%20533%20402%20Q%20524%20414%20503%20417%20Q%20476%20420%20388%20387%20C%20360%20377%20359%20362%20389%20364%20Z%22%3E%3C%2Fpath%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22mask-6%22%3E%3Cpath%20d%3D%22M%20390%20260%20Q%20391%20260%20395%20260%20Q%20474%20275%20537%20283%20C%20567%20287%20571%20292%20544%20306%20Q%20511%20327%20395%20285%20Q%20392%20285%20390%20284%20C%20361%20278%20360%20260%20390%20260%20Z%22%3E%3C%2Fpath%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22mask-7%22%3E%3Cpath%20d%3D%22M%20373%20489%20Q%20357%20502%20341%20510%20Q%20326%20516%20321%20513%20C%20300%20517%20300%20517%20308%20500%20Q%20309%20496%20313%20490%20Q%20361%20400%20338%20119%20Q%20335%2071%20295%2024%20Q%20273%20-6%20311%20-50%20L%20313%20-51%20Q%20326%20-58%20338%20-43%20Q%20354%20-16%20503%2090%20Q%20522%20102%20528%20110%20Q%20532%20120%20522%20120%20Q%20510%20120%20402%2072%20Q%20384%2065%20384%2081%20Q%20390%20178%20390%20260%20L%20390%20284%20Q%20389%20326%20389%20364%20L%20388%20387%20Q%20385%20453%20394%20461%20C%20397%20472%20397%20472%20373%20489%20Z%22%3E%3C%2Fpath%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22mask-8%22%3E%3Cpath%20d%3D%22M%20586%20160%20Q%20643%20197%20713%20228%20Q%20722%20232%20732%20235%20Q%20751%20242%20744%20258%20Q%20734%20274%20713%20289%20Q%20694%20302%20682%20302%20Q%20672%20302%20674%20290%20Q%20674%20263%20569%20166%20C%20547%20146%20561%20144%20586%20160%20Z%22%3E%3C%2Fpath%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22mask-9%22%3E%3Cpath%20d%3D%22M%20569%20166%20Q%20467%20205%20457%20202%20Q%20451%20201%20454%20188%20Q%20455%20179%20473%20171%20Q%20630%2095%20739%206%20Q%20755%20-10%20771%20-16%20Q%20784%20-20%20791%20-1%20Q%20795%2015%20786%2044%20Q%20774%2092%20586%20160%20L%20569%20166%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%20388%20914.3%20L%20478%20820%20L%20487%20797%20L%20433%20694%20L%20355%20586%20L%20287%20510%20L%20193%20427%20L%2059%20341%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%22791.2335102967867%2C791.2335102967867%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20791.175%3B%20stroke-dasharray%3A%20791.175%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%20518%20858%20L%20518%20747%20L%20643%20621%20L%20766%20518%20L%20806%20504%20L%20955%20488%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%22641.15171935642%2C641.15171935642%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20641.152%3B%20stroke-dasharray%3A%20641.152%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%20675.9%20L%20512%20592%20L%20540%20565%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%22214.07708519440345%2C214.07708519440345%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20214.093%3B%20stroke-dasharray%3A%20214.093%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%20285%20515%20L%20405%20480%20L%20583%20523%20L%20601%20519%20L%20617%20503%20L%20627%20490%20L%20625%20478%20L%20586%20323%20L%20571%20289%20L%20575%20267%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%22597.1070786013238%2C597.1070786013238%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20597.107%3B%20stroke-dasharray%3A%20597.107%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%20319%20302.7%20L%20404%20380%20L%20457%20394%20L%20506%20401%20L%20524%20397%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%22237.6205126396256%2C237.6205126396256%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20237.647%3B%20stroke-dasharray%3A%20237.647%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%20313.6%20205.3%20L%20410%20279%20L%20537%20302%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%22250.46680921224998%2C250.46680921224998%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20250.411%3B%20stroke-dasharray%3A%20250.411%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%20217.4%20507.1%20L%20328%20497%20L%20354%20467%20L%20365%20398%20L%20368%20225%20L%20356%2076%20L%20358%2038%20L%20407%2048%20L%20521%20113%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%22762.4153898178324%2C762.4153898178324%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20762.43%3B%20stroke-dasharray%3A%20762.43%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%20638.4%20379.5%20L%20695%20272%20L%20693%20253%20L%20585%20172%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%22275.57588372812666%2C275.57588372812666%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20275.595%3B%20stroke-dasharray%3A%20275.595%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%20367.4%20234.2%20L%20591%20136%20L%20701%2077%20L%20751%2040%20L%20774%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%22477.34669256355727%2C477.34669256355727%22%20style%3D%22opacity%3A%200%3B%20stroke-dashoffset%3A%20477.38%3B%20stroke-dasharray%3A%20477.38%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)
98 learners have practiced this character
Download and print worksheets to practice writing 食
Real-world example sentences demonstrating how 食 is used in context
Healthy diet is very important.
This food is very fresh.
Enjoying HanziStroke?$24.99 one-time· Unlimited practice· No ads Learn more →
I eat lunch in the school cafeteria.
