Question 295015 in Flutter Question posted in
The official Flutter documentation can be found here.

How can I create a Tooth Selection UI in Flutter with 32 Teeth?

I’m currently working on a Flutter project and am facing challenges in creating a tooth selection UI with 32 teeth. The UI should be in a oval form, and each tooth needs to be selectable with an icon that changes color when selected.

I’ve attempted various approaches, including using Stack and Positioned, as well as exploring the Flutter Shape Maker website (https://fluttershapemaker.com/).
However, I’ve encountered issues with teeth overlapping or not being positioned correctly.

similar idea is here in that link :
https://codepen.io/johnstuif/pen/JdOXWa .

are there any alternative libraries or methods better suited for creating this type of UI?

For clarity, I have attached an image illustrating the desired UI :

I tried the code from https://fluttershapemaker.com/ so i used CustomPainter but it didnt work properly ! , this is the code :

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get/get_core/src/get_main.dart';
import 'dart:ui' as ui;
import '../widgets/testselectedteeth.dart';

class Test extends StatefulWidget {
  const Test({super.key});

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> {

  @override
  Widget build(BuildContext context) {
    return Container(child: Center(
      child: Center(
        child: CustomPaint(
          size: Size(Get.width, (Get.width*1.2188841201716738).toDouble()), //You can Replace [WIDTH] with your desired width for Custom Paint and height will be calculated automatically
          painter: RPSCustomPainter(),
        )
      )
    ),
    );
  }
}

//Copy this CustomPainter code to the Bottom of the File
class RPSCustomPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {

Paint paint_0_fill = Paint()..style=PaintingStyle.fill;
paint_0_fill.color = Color(0xffffffff).withOpacity(1.0);
canvas.drawRRect(RRect.fromRectAndCorners(Rect.fromLTWH(0,0,size.width,size.height),bottomRight: Radius.circular(size.width*0.02432046),bottomLeft:  Radius.circular(size.width*0.02432046),topLeft:  Radius.circular(size.width*0.02432046),topRight:  Radius.circular(size.width*0.02432046)),paint_0_fill);

Paint paint_1_stroke = Paint()..style=PaintingStyle.stroke..strokeWidth=size.width*0.0007153076;
paint_1_stroke.color=Color(0xffdae1eb).withOpacity(1.0);
canvas.drawRRect(RRect.fromRectAndCorners(Rect.fromLTWH(size.width*0.0003576538,size.height*0.0002934272,size.width*0.9992847,size.height*0.9994131),bottomRight: Radius.circular(size.width*0.02396280),bottomLeft:  Radius.circular(size.width*0.02396280),topLeft:  Radius.circular(size.width*0.02396280),topRight:  Radius.circular(size.width*0.02396280)),paint_1_stroke);

Path path_2 = Path();
path_2.moveTo(size.width*0.05117506,size.height*0.05854166);
path_2.cubicTo(size.width*0.04289034,size.height*0.05854162,size.width*0.01769391,size.height*0.05709627,size.width*0.009796846,size.height*0.05244336);
path_2.lineTo(size.width*0.009789679,size.height*0.05243913);
path_2.lineTo(size.width*0.009782254,size.height*0.05243520);
path_2.cubicTo(size.width*0.008867504,size.height*0.05195051,size.width*0.006506474,size.height*0.05030248,size.width*0.004452697,size.height*0.04846885);
path_2.cubicTo(size.width*0.001838086,size.height*0.04613452,size.width*0.0004222647,size.height*0.04417941,size.width*0.0003578660,size.height*0.04281425);
path_2.cubicTo(size.width*0.0003319522,size.height*0.03979083,size.width*0.002672476,size.height*0.03561353,size.width*0.004737604,size.height*0.03192767);
path_2.cubicTo(size.width*0.005781582,size.height*0.03006436,size.width*0.006767662,size.height*0.02830438,size.width*0.007241825,size.height*0.02700950);
path_2.lineTo(size.width*0.007319335,size.height*0.02678887);
path_2.cubicTo(size.width*0.01149954,size.height*0.01487530,size.width*0.01566505,size.height*0.006847222,size.width*0.01904950,size.height*0.004181510);
path_2.cubicTo(size.width*0.02376568,size.height*0.0007554657,size.width*0.02894936,size.height*0.0002934321,size.width*0.03339841,size.height*0.0002934321);
path_2.cubicTo(size.width*0.03570410,size.height*0.0002934321,size.width*0.03810776,size.height*0.0004343241,size.width*0.04065255,size.height*0.0005834908);
path_2.cubicTo(size.width*0.04347474,size.height*0.0007489250,size.width*0.04639303,size.height*0.0009199814,size.width*0.04949589,size.height*0.0009199814);
path_2.cubicTo(size.width*0.05584766,size.height*0.0009199814,size.width*0.06164476,size.height*0.001623655,size.width*0.06672616,size.height*0.003011460);
path_2.cubicTo(size.width*0.07210879,size.height*0.004481531,size.width*0.07657636,size.height*0.006694723,size.width*0.08000476,size.height*0.009589536);
path_2.cubicTo(size.width*0.08567570,size.height*0.01437790,size.width*0.08840723,size.height*0.02090861,size.width*0.08812347,size.height*0.02900025);
path_2.cubicTo(size.width*0.08795212,size.height*0.03388650,size.width*0.08693743,size.height*0.03827536,size.width*0.08510760,size.height*0.04204490);
path_2.cubicTo(size.width*0.08334477,size.height*0.04567644,size.width*0.08080683,size.height*0.04877303,size.width*0.07756432,size.height*0.05124865);
path_2.cubicTo(size.width*0.07440765,size.height*0.05365873,size.width*0.07055773,size.height*0.05550105,size.width*0.06612150,size.height*0.05672445);
path_2.cubicTo(size.width*0.06174984,size.height*0.05793004,size.width*0.05678756,size.height*0.05854133,size.width*0.05137254,size.height*0.05854133);
path_2.cubicTo(size.width*0.05130722,size.height*0.05854155,size.width*0.05124205,size.height*0.05854166,size.width*0.05117506,size.height*0.05854166);
path_2.close();

Paint paint_2_fill = Paint()..style=PaintingStyle.fill;
paint_2_fill.color = Color(0xffa7a3dd).withOpacity(1.0);
canvas.drawPath(path_2,paint_2_fill);

Path path_3 = Path();
path_3.moveTo(size.width*0.05117506,size.height*0.05883509);
path_3.lineTo(size.width*0.05117506,size.height*0.05824823);
path_3.cubicTo(size.width*0.05124152,size.height*0.05824823,size.width*0.05130619,size.height*0.05824813,size.width*0.05137254,size.height*0.05824790);
path_3.cubicTo(size.width*0.05674875,size.height*0.05824790,size.width*0.06167267,size.height*0.05764176,size.width*0.06600754,size.height*0.05644632);
path_3.cubicTo(size.width*0.07039522,size.height*0.05523631,size.width*0.07420151,size.height*0.05341529,size.width*0.07732067,size.height*0.05103385);
path_3.cubicTo(size.width*0.08052413,size.height*0.04858805,size.width*0.08303224,size.height*0.04552720,size.width*0.08477533,size.height*0.04193633);
path_3.cubicTo(size.width*0.08658962,size.height*0.03819880,size.width*0.08759582,size.height*0.03384363,size.width*0.08776597,size.height*0.02899181);
path_3.cubicTo(size.width*0.08804685,size.height*0.02098242,size.width*0.08534929,size.height*0.01452336,size.width*0.07974825,size.height*0.009794019);
path_3.cubicTo(size.width*0.07636018,size.height*0.006933256,size.width*0.07194091,size.height*0.004744934,size.width*0.06661320,size.height*0.003289864);
path_3.cubicTo(size.width*0.06156829,size.height*0.001912024,size.width*0.05580919,size.height*0.001213409,size.width*0.04949589,size.height*0.001213409);
path_3.cubicTo(size.width*0.04638026,size.height*0.001213409,size.width*0.04345552,size.height*0.001041965,size.width*0.04062706,size.height*0.0008761786);
path_3.cubicTo(size.width*0.03808881,size.height*0.0007273875,size.width*0.03569134,size.height*0.0005868593,size.width*0.03339841,size.height*0.0005868593);
path_3.cubicTo(size.width*0.03043328,size.height*0.0005868593,size.width*0.02806493,size.height*0.0008273992,size.width*0.02594504,size.height*0.001343843);
path_3.cubicTo(size.width*0.02346706,size.height*0.001947538,size.width*0.02129077,size.height*0.002946318,size.width*0.01929215,size.height*0.004397163);
path_3.cubicTo(size.width*0.01715795,size.height*0.006081325,size.width*0.01462593,size.height*0.01008079,size.width*0.01196878,size.height*0.01596501);
path_3.cubicTo(size.width*0.009818878,size.height*0.02072589,size.width*0.008196245,size.height*0.02535038,size.width*0.007663026,size.height*0.02687004);
path_3.lineTo(size.width*0.007584357,size.height*0.02709393);
path_3.cubicTo(size.width*0.007103041,size.height*0.02840837,size.width*0.006157461,size.height*0.03009605,size.width*0.005062569,size.height*0.03205022);
path_3.cubicTo(size.width*0.003115564,size.height*0.03552526,size.width*0.0006929543,size.height*0.03984942,size.width*0.0007154826,size.height*0.04280757);
path_3.cubicTo(size.width*0.0007790998,size.height*0.04408385,size.width*0.002199298,size.height*0.04602336,size.width*0.004716045,size.height*0.04827032);
path_3.cubicTo(size.width*0.006918534,size.height*0.05023672,size.width*0.009228849,size.height*0.05179267,size.width*0.009976302,size.height*0.05218871);
path_3.lineTo(size.width*0.01000547,size.height*0.05220503);
path_3.cubicTo(size.width*0.01340772,size.height*0.05420962,size.width*0.02059806,size.height*0.05586476,size.width*0.03079918,size.height*0.05699152);
path_3.cubicTo(size.width*0.03979848,size.height*0.05798554,size.width*0.04806258,size.height*0.05824822,size.width*0.05117506,size.height*0.05824823);
path_3.lineTo(size.width*0.05117506,size.height*0.05883509);
path_3.moveTo(size.width*0.05117506,size.height*0.05883509);
path_3.cubicTo(size.width*0.04382050,size.height*0.05883506,size.width*0.01780169,size.height*0.05752104,size.width*0.009588220,size.height*0.05268169);
path_3.cubicTo(size.width*0.007822196,size.height*0.05174594,size.width*0.0001532267,size.height*0.04619955,size.width*2.653126e-7,size.height*0.04282104);
path_3.cubicTo(size.width*-0.00004359735,size.height*0.03812524,size.width*0.005534400,size.height*0.03065252,size.width*0.006899293,size.height*0.02692508);
path_3.cubicTo(size.width*0.007755115,size.height*0.02449403,size.width*0.01334569,size.height*0.008259782,size.width*0.01880710,size.height*0.003965674);
path_3.cubicTo(size.width*0.02721102,size.height*-0.002143621,size.width*0.03709277,size.height*0.0006265542,size.width*0.04949589,size.height*0.0006265542);
path_3.cubicTo(size.width*0.07121770,size.height*0.0006265424,size.width*0.08918626,size.height*0.008897387,size.width*0.08848098,size.height*0.02900869);
path_3.cubicTo(size.width*0.08777570,size.height*0.04911998,size.width*0.07309436,size.height*0.05883476,size.width*0.05137254,size.height*0.05883476);
path_3.cubicTo(size.width*0.05130821,size.height*0.05883498,size.width*0.05124256,size.height*0.05883509,size.width*0.05117506,size.height*0.05883509);
path_3.close();

Paint paint_3_fill = Paint()..style=PaintingStyle.fill;
paint_3_fill.color = Color(0xff000000).withOpacity(1.0);
canvas.drawPath(path_3,paint_3_fill);

Path path_4 = Path();
path_4.moveTo(size.width*0.03568493,size.height*0.04873402);
path_4.cubicTo(size.width*0.02072166,size.height*0.04873402,size.width*0.01151754,size.height*0.03570276,size.width*0.005170671,size.height*0.02434997);
path_4.lineTo(size.width*0.004823818,size.height*0.02373040);
path_4.cubicTo(size.width*0.003182287,size.height*0.02080017,size.width*0.001631801,size.height*0.01803243,size.width*0.0008590400,size.height*0.01546018);
path_4.cubicTo(size.width*0.000004848288,size.height*0.01261681,size.width*0.0002322589,size.height*0.01043470,size.width*0.001574762,size.height*0.008592940);
path_4.cubicTo(size.width*0.003154362,size.height*0.006425897,size.width*0.006308110,size.height*0.004736918,size.width*0.01121624,size.height*0.003429501);
path_4.cubicTo(size.width*0.01671309,size.height*0.001965264,size.width*0.02429247,size.height*0.001003304,size.width*0.03438748,size.height*0.0004886674);
path_4.cubicTo(size.width*0.03692873,size.height*0.0003591134,size.width*0.03934453,size.height*0.0002934326,size.width*0.04156781,size.height*0.0002934326);
path_4.cubicTo(size.width*0.04778265,size.height*0.0002934326,size.width*0.05284011,size.height*0.0008076580,size.width*0.05659971,size.height*0.001821848);
path_4.cubicTo(size.width*0.05992714,size.height*0.002719442,size.width*0.06234814,size.height*0.004041026,size.width*0.06379548,size.height*0.005749888);
path_4.cubicTo(size.width*0.06542783,size.height*0.007677165,size.width*0.06591496,size.height*0.01015898,size.width*0.06528473,size.height*0.01333719);
path_4.cubicTo(size.width*0.06472583,size.height*0.01615572,size.width*0.06341363,size.height*0.01904874,size.width*0.06214462,size.height*0.02184651);
path_4.cubicTo(size.width*0.06168499,size.height*0.02285985,size.width*0.06125084,size.height*0.02381701,size.width*0.06086682,size.height*0.02474123);
path_4.cubicTo(size.width*0.06066591,size.height*0.02522478,size.width*0.06046409,size.height*0.02571463,size.width*0.06026036,size.height*0.02620918);
path_4.cubicTo(size.width*0.05821921,size.height*0.03116374,size.width*0.05590575,size.height*0.03677935,size.width*0.05231088,size.height*0.04109529);
path_4.cubicTo(size.width*0.04822286,size.height*0.04600331,size.width*0.04307797,size.height*0.04849693,size.width*0.03658219,size.height*0.04871864);
path_4.cubicTo(size.width*0.03628326,size.height*0.04872884,size.width*0.03598139,size.height*0.04873402,size.width*0.03568493,size.height*0.04873402);
path_4.close();

Paint paint_4_fill = Paint()..style=PaintingStyle.fill;
paint_4_fill.color = Color(0xffa7a3dd).withOpacity(1.0);
canvas.drawPath(path_4,paint_4_fill);

// and more ...

Paint paint_78_fill = Paint()..style=PaintingStyle.fill;
paint_78_fill.color = Color(0xffa7a3dd).withOpacity(1.0);
canvas.drawPath(path_78,paint_78_fill);

Path path_79 = Path();
path_79.moveTo(size.width*0.05142241,size.height*0.06928314);
path_79.lineTo(size.width*0.05142241,size.height*0.06869628);
path_79.lineTo(size.width*0.05158066,size.height*0.06869601);
path_79.cubicTo(size.width*0.06223917,size.height*0.06869600,size.width*0.07315905,size.height*0.06529163,size.width*0.08154031,size.height*0.05935583);
path_79.cubicTo(size.width*0.08585187,size.height*0.05630230,size.width*0.08928567,size.height*0.05274150,size.width*0.09174637,size.height*0.04877238);
path_79.cubicTo(size.width*0.09437383,size.height*0.04453425,size.width*0.09579065,size.height*0.03997355,size.width*0.09595748,size.height*0.03521695);
path_79.cubicTo(size.width*0.09611638,size.height*0.03068593,size.width*0.09536793,size.height*0.02642978,size.width*0.09373296,size.height*0.02256674);
path_79.cubicTo(size.width*0.09209037,size.height*0.01868573,size.width*0.08960145,size.height*0.01531958,size.width*0.08633536,size.height*0.01256181);
path_79.cubicTo(size.width*0.08009148,size.height*0.007289672,size.width*0.07125378,size.height*0.004502981,size.width*0.06077768,size.height*0.004502981);
path_79.cubicTo(size.width*0.05726373,size.height*0.004502981,size.width*0.05353583,size.height*0.004817125,size.width*0.04969754,size.height*0.005436690);
path_79.lineTo(size.width*0.04962915,size.height*0.005447735);
path_79.lineTo(size.width*0.04955945,size.height*0.005447735);
path_79.cubicTo(size.width*0.04568095,size.height*0.005447746,size.width*0.04179133,size.height*0.004293475,size.width*0.03767331,size.height*0.003071444);
path_79.cubicTo(size.width*0.03355714,size.height*0.001849942,size.width*0.02930081,size.height*0.0005868547,size.width*0.02507984,size.height*0.0005868547);
path_79.cubicTo(size.width*0.02237299,size.height*0.0005868547,size.width*0.01992540,size.height*0.001100364,size.width*0.01759724,size.height*0.002156737);
path_79.cubicTo(size.width*0.01490188,size.height*0.003379713,size.width*0.01240780,size.height*0.005299856,size.width*0.009973057,size.height*0.008026382);
path_79.cubicTo(size.width*0.008193026,size.height*0.01015761,size.width*0.006870651,size.height*0.01231404,size.width*0.006042500,size.height*0.01443601);
path_79.cubicTo(size.width*0.005335761,size.height*0.01624691,size.width*0.004968465,size.height*0.01808864,size.width*0.004950826,size.height*0.01991002);
path_79.cubicTo(size.width*0.004918451,size.height*0.02325195,size.width*0.006042271,size.height*0.02596329,size.width*0.006862843,size.height*0.02794302);
path_79.cubicTo(size.width*0.007483473,size.height*0.02944034,size.width*0.007931885,size.height*0.03052218,size.width*0.007650225,size.height*0.03132227);
path_79.lineTo(size.width*0.007648065,size.height*0.03132828);
path_79.cubicTo(size.width*0.007166749,size.height*0.03264275,size.width*0.006221155,size.height*0.03433045,size.width*0.005126248,size.height*0.03628465);
path_79.cubicTo(size.width*0.003177235,size.height*0.03976328,size.width*0.0007516270,size.height*0.04409255,size.width*0.0007792665,size.height*0.04705091);
path_79.lineTo(size.width*0.0007795956,size.height*0.04708717);
path_79.lineTo(size.width*0.0007744883,size.height*0.04712319);
path_79.cubicTo(size.width*0.0003597386,size.height*0.05004961,size.width*0.002127693,size.height*0.05311405,size.width*0.006029224,size.height*0.05623139);
path_79.cubicTo(size.width*0.009229667,size.height*0.05878855,size.width*0.01296161,size.height*0.06064540,size.width*0.01455522,size.height*0.06143830);
path_79.cubicTo(size.width*0.01481524,size.height*0.06156767,size.width*0.01502182,size.height*0.06167046,size.width*0.01516382,size.height*0.06174541);
path_79.cubicTo(size.width*0.02107513,size.height*0.06466784,size.width*0.02902164,size.height*0.06633468,size.width*0.03464872,size.height*0.06721869);
path_79.cubicTo(size.width*0.04159077,size.height*0.06830926,size.width*0.04802332,size.height*0.06869625,size.width*0.05142241,size.height*0.06869628);
path_79.lineTo(size.width*0.05142241,size.height*0.06928314);
path_79.moveTo(size.width*0.05142241,size.height*0.06928313);
path_79.cubicTo(size.width*0.04423216,size.height*0.06928308,size.width*0.02573646,size.height*0.06766158,size.width*0.01478529,size.height*0.06224344);
path_79.cubicTo(size.width*0.01301927,size.height*0.06130769,size.width*-0.001061721,size.height*0.05499817,size.width*0.00006397323,size.height*0.04705541);
path_79.cubicTo(size.width*0.00002011057,size.height*0.04235960,size.width*0.005598122,size.height*0.03488689,size.width*0.006963001,size.height*0.03115943);
path_79.cubicTo(size.width*0.007818823,size.height*0.02872839,size.width*-0.001106299,size.height*0.02024555,size.width*0.009389366,size.height*0.007687031);
path_79.cubicTo(size.width*0.02318283,size.height*-0.007768565,size.width*0.03715639,size.height*0.004860892,size.width*0.04955945,size.height*0.004860880);
path_79.cubicTo(size.width*0.08028566,size.height*-0.00009890341,size.width*0.09737776,size.height*0.01512252,size.width*0.09667248,size.height*0.03523383);
path_79.cubicTo(size.width*0.09596716,size.height*0.05534512,size.width*0.07330239,size.height*0.06928284,size.width*0.05158066,size.height*0.06928286);
path_79.cubicTo(size.width*0.05152842,size.height*0.06928304,size.width*0.05147591,size.height*0.06928313,size.width*0.05142241,size.height*0.06928313);
path_79.close();

Paint paint_79_fill = Paint()..style=PaintingStyle.fill;
paint_79_fill.color = Color(0xff000000).withOpacity(1.0);
canvas.drawPath(path_79,paint_79_fill);

}

@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
Tags:

2

Answers


  1. 0

    enter image description hereThis is my example:

    [![import 'package:flutter/material.dart';
import 'dart:math'; // Import the math library for sin and cos functions

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ToothUShape(),
        ),
      ),
    );
  }
}

class ToothUShape extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 400.0,
      height: 200.0, // Adjust the height based on your design
      child: Stack(
        children: _buildTeeth(),
      ),
    );
  }

  List<Widget> _buildTeeth() {
    List<Widget> teeth = [];
    final double toothWidth = 12.5;
    final double toothHeight = 25.0;
    final double curveRadius = 100.0; 
    for (int i = 0; i < 32; i++) {
      double angle = i / 31 * pi;
      double x = curveRadius * (1 - cos(angle));
      double y = curveRadius * sin(angle);

      teeth.add(
        Positioned(
          left: x,
          top: y,
          child: Tooth(),
        ),
      );
    }

    return teeth;
  }
}

class Tooth extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 12.5,
      height: 25.0, // Adjust the height based on your design
      decoration: BoxDecoration(
        color: Colors.blue, // Tooth color
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(12.5), // Adjust the circular radius
        ),
      ),
      child: Center(
        child: Text(
          'TOOTH',
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}][1]][1]
    Login or Signup to reply.
  2. 0

    i have simplified your svg file, add it to assets/teeth.svg:

    <svg id="svg68" version="1.1" viewBox="0 0 699 852" xmlns="http://www.w3.org/2000/svg">
 <g fill="#a7a3dd">
  <path id="tooth14" d="m499 303c5.5-1.8 23-6.1 29-4l6e-3 2e-3 6e-3 1e-3c0.74 0.2 2.7 1 4.6 2.1 2.4 1.3 3.8 2.6 4.2 3.7 0.81 2.4 0.36 6.3-0.045 9.8-0.2 1.7-0.4 3.4-0.37 4.5l7e-3 0.2c0.36 11-0.3 18-1.8 21-2.2 3.8-5.6 5.3-8.5 6.2-1.5 0.5-3.2 0.9-4.9 1.3-1.9 0.48-3.9 0.97-6 1.6-4.2 1.4-8.3 2.1-12 2-4-0.028-7.5-0.86-11-2.5-5-2.7-8.6-7.4-11-14-1.2-4-1.7-7.8-1.4-11 0.22-3.3 1.1-6.4 2.6-9.1 1.5-2.6 3.5-5 6.2-6.9 2.6-1.9 5.7-3.5 9.3-4.7l0.13-0.043z"/>
  <path id="tooth7" d="m318 141c-10 1.1-18-9.3-23-18l-0.3-0.5c-1.4-2.4-2.7-4.6-3.5-6.7-0.85-2.3-0.88-4.2-0.11-5.9 0.9-2 2.9-3.6 6.2-5.1 3.7-1.6 8.9-3 16-4.2a82 82 0 0 1 5-0.69c4.3-0.46 7.9-0.39 11 0.2 2.4 0.52 4.2 1.5 5.4 2.8 1.3 1.5 1.9 3.6 1.7 6.3-0.14 2.4-0.79 5-1.4 7.4-0.23 0.89-0.45 1.7-0.63 2.5l-0.29 1.3c-0.98 4.3-2.1 9.3-4.2 13-2.4 4.5-5.8 6.9-10 7.6-0.21 0.03-0.42 0.057-0.62 0.079z"/>
  <path id="tooth6" d="m281 149c-2.9 1.2-6.4 0.91-11-1-3.7-1.7-7.9-4.5-13-8.8-0.54-0.44-1.1-0.86-1.6-1.3-2-1.6-3.8-3-5-4.4-1.3-1.5-1.9-2.7-1.7-4 0.17-1.6 1.4-3.3 3.9-5.3 2.6-2.1 6.8-4.5 13-7.4a105 105 0 0 1 5.9-2.8c6.4-2.7 10-3.3 13-2 2.5 1.6 2.7 5.7 3 11 0.073 1.5 0.15 3 0.28 4.6 0.61 7.4 0.52 12-0.3 15-0.86 3.2-2.6 5.2-5.8 6.6l-0.04 0.017z"/>
  <path id="tooth5" d="m257 171c-0.09 0.084-0.19 0.17-0.29 0.24-1.2 0.9-2.9 1.5-5.1 1.8-2.2 0.33-4.9 0.3-7.7-0.086-6.4-0.88-13-3.5-19-7.5-2.2-1.6-4-3.4-5.2-5.4a13 13 0 0 1-1.8-5.8c-0.18-2.6 0.36-5.4 1.6-8 1.1-2.3 2.6-4.5 4.3-6.1 0.36-0.34 0.73-0.65 1.1-0.92 1.4-1.1 4.4-2.7 7.8-4 2.8-1.1 6.8-2.2 10-1.8h8e-3c2.5 0.26 4.4 1.4 5.8 3.6 1.3 2 2.1 4.4 2.9 6.8 0.19 0.58 0.36 1.1 0.55 1.7 0.52 1.5 1.1 3.1 1.7 4.7 1.6 4.3 3.2 8.8 3.9 12 0.83 4.1 0.48 6.9-1.1 8.3z"/>
  <path id="tooth4" d="m231 202a6.3 6.3 0 0 1-0.3 0.28c-2.4 2.1-6.6 2.8-12 2-5.4-0.85-11-3.3-16-6.8-5.7-4.1-9.3-9.3-9.7-14-0.28-3.4 0.92-6.6 3.5-9.2a16 16 0 0 1 1.6-1.4c8.7-6.6 22-4.9 29 3.7a26 26 0 0 1 4.2 7 27 27 0 0 1 1.8 7.4c0.47 4.9-0.57 9.1-2.8 11z"/>
  <path id="tooth3" d="m186 235a39 39 0 0 1-0.2-0.1c-3.9-1.9-7.1-4.1-9.5-6.5-2.3-2.3-3.8-4.7-4.6-7.2a13 13 0 0 1-0.52-5.8c0.24-1.9 0.89-3.8 1.9-5.7 2.2-4.1 6.2-6.9 11-8 2.6-0.56 5.3-0.64 8.1-0.23 3 0.42 6 1.4 9 2.8 0.71 0.34 1.4 0.72 2.1 1.1 3.2 1.8 6.1 3.9 8.5 6.2 2.4 2.2 4.3 4.5 5.7 6.8s2.2 4.6 2.5 6.8c0.29 2.2-0.014 4.3-0.9 6.2-0.62 1.3-1.6 2.5-2.9 3.6-1.3 1-2.9 1.9-4.8 2.5-3.5 1.2-7.6 1.7-12 1.3-4.7-0.38-9.4-1.7-14-3.8z"/>
  <path id="tooth2" d="m185 296c-0.72 0-1.5-0.018-2.2-0.053-8.3-0.39-16-2.8-21-6.7-3-2.1-5.3-4.7-6.9-7.5-1.7-3.1-2.6-6.6-2.6-10 0-2.7 0.77-5.6 2-7.3 0.41-0.58 1-1.2 1.7-1.9 1.2-1.2 2.6-2.7 3.4-4.4 0.41-0.98 0.45-2.4 0.5-4 0.072-2.5 0.16-5.6 1.8-8.1l4e-3 -7e-3 4e-3 -6e-3c1.4-2.4 3.6-4.1 6.6-5.1 2.4-0.79 5.4-1.1 9.5-1.1 4.7 0.79 9 2.2 13 4.3 3.9 2 7.3 4.6 10 7.5 2.8 3 4.9 6.4 6.3 10a27 27 0 0 1 1.6 12c-1.3 16-8.7 23-23 23z"/>
  <path id="tooth1" d="m152 346c-3-0.96-6.3-2.5-8.5-6.2-1.5-2.9-2.2-10-1.8-21l6e-3 -0.19c0.026-1.2-0.17-2.8-0.37-4.5-0.4-3.4-0.86-7.3-0.045-9.8 0.4-1.1 1.9-2.4 4.2-3.7 1.8-1 3.9-1.9 4.6-2.1l6e-3 -1e-3 6e-3 -2e-3c6.5-2.1 24 2.2 29 4l0.13 0.043c3.6 1.2 6.7 2.7 9.3 4.7s4.7 4.3 6.2 6.9c1.5 2.7 2.4 5.8 2.6 9.1 0.22 3.4-0.26 7.2-1.4 11-1.9 6.6-5.5 11-11 14-3 1.6-6.6 2.4-11 2.5-3.7 0.027-7.8-0.66-12-2l-0.24-0.078c-2-0.63-3.9-1.1-5.7-1.6-1.7-0.43-3.4-0.83-4.9-1.3z"/>
  <path id="tooth0" d="m143 411c-1.8-0.6-3.4-1.6-4.7-3-1.5-1.6-2.7-3.7-3.6-6.5-0.63-2.1-0.94-4.2-0.94-6.1a16 16 0 0 1 0.73-4.7c0.87-2.8 2.3-4.7 3.4-6.2 0.78-1 1.3-1.8 1.4-2.4 0.026-1.2-0.17-2.8-0.37-4.5-0.4-3.4-0.86-7.3-0.044-9.8l5e-3 -0.015 3e-3 -0.015c0.51-2.5 2.5-4.7 6-6.4 2.8-1.4 5.8-2.1 7.1-2.4 0.21-0.049 0.37-0.088 0.48-0.12 4.7-1.1 10-0.73 14-0.23 4.9 0.62 9.3 1.7 12 2.4l0.1 0.034c7.1 2.3 14 7.5 18 14 4.3 7.1 5.5 15 3.3 23-1.1 3.7-2.7 7-4.8 9.8s-4.7 5-7.6 6.6c-5.6 3-12 3.3-19 1-2.4-0.76-4.8-1.8-7.2-3.2l-0.021-0.012-0.023-7e-3c-2.5-0.82-5.4-0.73-8.4-0.63-3.1 0.1-6.3 0.21-9.1-0.72z"/>
  <path id="tooth15" d="m497 361c2.3-0.74 6.7-1.8 12-2.4 4-0.5 9.7-0.87 14 0.23 0.11 0.03 0.28 0.068 0.48 0.12 1.3 0.3 4.3 1 7.1 2.4 3.5 1.7 5.5 3.9 6 6.4l3e-3 0.015 5e-3 0.015c0.82 2.4 0.36 6.3-0.044 9.8-0.2 1.7-0.4 3.4-0.37 4.5 0.021 0.63 0.58 1.4 1.4 2.4 1.1 1.4 2.6 3.4 3.4 6.2 0.48 1.5 0.72 3.1 0.73 4.7 8e-3 1.9-0.31 4-0.94 6.1-0.91 2.8-2.1 4.9-3.6 6.5-1.3 1.4-2.8 2.4-4.7 3-2.8 0.93-6 0.82-9.1 0.72-3-0.1-5.9-0.2-8.4 0.63l-0.023 7e-3 -0.021 0.011c-2.4 1.3-4.8 2.4-7.2 3.2-7 2.3-14 1.9-19-1-2.9-1.5-5.5-3.8-7.6-6.6s-3.8-6.1-4.8-9.8c-2.2-7.6-1.1-16 3.3-23 4-6.7 10-12 18-14l0.1-0.034z"/>
  <path id="tooth13" d="m491 296c-15 0-22-7.3-23-23-0.33-4.1 0.2-8 1.6-12 1.3-3.7 3.4-7 6.3-10 2.8-3 6.2-5.5 10-7.5 4-2.1 8.4-3.5 13-4.3 4.1 1e-3 7.1 0.36 9.5 1.1 3 0.98 5.2 2.6 6.6 5.1l4e-3 6e-3 4e-3 7e-3c1.6 2.4 1.7 5.5 1.8 8.1 0.046 1.6 0.087 3 0.5 4 0.76 1.8 2.1 3.2 3.4 4.4 0.65 0.66 1.3 1.3 1.7 1.9 1.2 1.7 2 4.5 2 7.3 0 3.8-0.87 7.2-2.6 10-1.6 2.9-3.9 5.4-6.9 7.5-5.5 3.9-13 6.3-21 6.7-0.76 0.035-1.5 0.053-2.2 0.053z"/>
  <path id="tooth12" d="m475 204 2e-3 -1e-3c3-1.5 6-2.4 9-2.8 2.8-0.4 5.6-0.32 8.1 0.24 5 1.1 9 3.9 11 8 1 1.9 1.7 3.8 1.9 5.7a13 13 0 0 1-0.52 5.8c-0.8 2.5-2.4 5-4.6 7.2-2.4 2.4-5.6 4.6-9.5 6.5l-0.2 0.1c-4.3 2.1-9.1 3.4-14 3.8-4.3 0.35-8.5-0.11-12-1.3-1.9-0.65-3.5-1.5-4.8-2.5s-2.3-2.2-2.9-3.6c-0.89-1.9-1.2-4-0.9-6.2 0.28-2.2 1.1-4.5 2.5-6.8s3.3-4.6 5.7-6.8 5.3-4.3 8.5-6.2a37 37 0 0 1 2.1-1.1z"/>
  <path id="tooth11" d="m480 174h1e-3c2.6 2.6 3.8 5.7 3.5 9.2-0.42 5-3.9 10-9.7 14-5 3.6-11 6-16 6.8-5.1 0.81-9.4 0.076-12-2a6.3 6.3 0 0 1-0.3-0.28c-2.2-2.2-3.3-6.5-2.8-11a27 27 0 0 1 1.8-7.4 26 26 0 0 1 4.2-7c7.4-8.7 21-10 29-3.7a16 16 0 0 1 1.6 1.4z"/>
  <path id="tooth10" d="m452 140c1.7 1.6 3.2 3.7 4.3 6.1 1.2 2.7 1.8 5.5 1.6 8a13 13 0 0 1-1.8 5.8c-1.2 2-2.9 3.8-5.2 5.4-5.6 3.9-12 6.6-19 7.5-2.8 0.38-5.4 0.41-7.7 0.086-2.2-0.32-3.9-0.96-5.1-1.8a4 4 0 0 1-0.29-0.24c-1.6-1.4-1.9-4.2-1.1-8.3 0.75-3.7 2.4-8.2 3.9-12a301 301 0 0 0 1.7-4.7c0.18-0.54 0.36-1.1 0.55-1.7 0.77-2.4 1.6-4.8 2.9-6.8 1.5-2.2 3.4-3.4 5.8-3.6h5e-3l4e-3 -1e-3c3.3-0.45 7.3 0.71 10 1.8 3.4 1.3 6.4 3 7.8 4 0.36 0.27 0.73 0.58 1.1 0.92z"/>
  <path id="tooth8" d="m359 99h1e-3c1.5 0.16 3.2 0.4 5 0.69 7 1.2 12 2.5 16 4.2 3.3 1.5 5.3 3.1 6.2 5.1 0.77 1.7 0.73 3.5-0.12 5.9-0.77 2.1-2.1 4.4-3.5 6.7l-0.3 0.5c-5.4 9.2-13 20-23 18a15 15 0 0 1-0.62-0.079c-4.5-0.66-7.9-3.2-10-7.6-2.1-3.9-3.2-8.9-4.2-13l-0.29-1.3c-0.18-0.81-0.4-1.7-0.63-2.5-0.63-2.5-1.3-5-1.4-7.4-0.15-2.7 0.41-4.8 1.7-6.3 1.2-1.3 3-2.3 5.4-2.8 2.7-0.58 6.3-0.65 11-0.19z"/>
  <path id="tooth9" d="m405 114h1e-3c1.8 0.75 3.8 1.7 5.9 2.8 5.8 2.9 9.9 5.4 13 7.4 2.5 1.9 3.7 3.7 3.9 5.3 0.14 1.3-0.41 2.5-1.7 4-1.2 1.4-3 2.8-5 4.4-0.51 0.41-1 0.83-1.6 1.3-5.3 4.3-9.5 7.1-13 8.8-4.3 1.9-7.8 2.3-11 1l-0.04-0.018c-3.2-1.4-4.9-3.3-5.8-6.6-0.82-3.1-0.91-7.3-0.3-15 0.13-1.6 0.21-3.1 0.28-4.6 0.26-5.3 0.47-9.4 3-11 2.2-1.4 6.2-0.77 13 2z"/>
  <path id="tooth23" d="m358 744c10-1.1 18 9.3 23 18l0.3 0.5c1.4 2.4 2.7 4.6 3.5 6.7 0.85 2.3 0.88 4.2 0.11 5.9-0.9 2-2.9 3.6-6.2 5.1-3.7 1.6-8.9 3-16 4.2a82 82 0 0 1-5 0.69c-4.3 0.46-7.9 0.39-11-0.2-2.4-0.52-4.2-1.5-5.4-2.8-1.3-1.5-1.9-3.6-1.7-6.3 0.14-2.4 0.79-5 1.4-7.4a96 96 0 0 0 0.92-3.8c0.98-4.3 2.1-9.3 4.2-13 2.4-4.5 5.8-6.9 10-7.6 0.21-0.03 0.42-0.057 0.62-0.079z"/>
  <path id="tooth22" d="m396 736c2.9-1.2 6.4-0.91 11 1 3.7 1.7 7.9 4.5 13 8.8 0.54 0.44 1.1 0.86 1.6 1.3 2 1.6 3.8 3 5 4.4 1.3 1.5 1.9 2.7 1.7 4-0.17 1.6-1.4 3.3-3.9 5.3-2.6 2.1-6.8 4.5-13 7.4a105 105 0 0 1-5.9 2.8c-6.4 2.7-10 3.3-13 2-2.5-1.6-2.7-5.7-3-11-0.073-1.5-0.15-3-0.28-4.6-0.61-7.4-0.52-12 0.3-15 0.86-3.2 2.6-5.2 5.8-6.6l0.04-0.017z"/>
  <path id="tooth21" d="m420 714c0.09-0.084 0.19-0.17 0.29-0.24 1.2-0.9 2.9-1.5 5.1-1.8 2.2-0.33 4.9-0.3 7.7 0.086 6.4 0.88 13 3.5 19 7.5 2.2 1.6 4 3.4 5.2 5.4a13 13 0 0 1 1.8 5.8c0.18 2.6-0.36 5.4-1.6 8-1.1 2.3-2.6 4.5-4.3 6.1-0.36 0.34-0.73 0.65-1.1 0.92-1.4 1.1-4.4 2.7-7.8 4-2.8 1.1-6.8 2.2-10 1.8h-8e-3c-2.5-0.26-4.4-1.4-5.8-3.6-1.3-2-2.1-4.4-2.9-6.8-0.19-0.58-0.36-1.1-0.55-1.7a301 301 0 0 0-1.7-4.7c-1.6-4.3-3.2-8.8-3.9-12-0.83-4.1-0.48-6.9 1.1-8.3z"/>
  <path id="tooth20" d="m445 682a6.3 6.3 0 0 1 0.3-0.28c2.4-2.1 6.6-2.8 12-2 5.4 0.85 11 3.3 16 6.8 5.7 4.1 9.3 9.3 9.7 14 0.28 3.4-0.92 6.6-3.5 9.2-0.49 0.49-1 0.96-1.6 1.4-8.7 6.6-22 4.9-29-3.7a26 26 0 0 1-4.2-7 27 27 0 0 1-1.8-7.4c-0.47-4.9 0.57-9.1 2.8-11z"/>
  <path id="tooth19" d="m490 649 0.2 0.1c3.9 1.9 7.1 4.1 9.5 6.5 2.3 2.3 3.8 4.7 4.6 7.2 0.59 1.9 0.77 3.8 0.52 5.8-0.24 1.9-0.89 3.8-1.9 5.7-2.2 4.1-6.2 6.9-11 8-2.6 0.56-5.3 0.64-8.1 0.23-3-0.42-6-1.4-9-2.8a37 37 0 0 1-2.1-1.1c-3.2-1.8-6.1-3.9-8.5-6.2-2.4-2.2-4.3-4.5-5.7-6.8s-2.2-4.6-2.5-6.8c-0.29-2.2 0.014-4.3 0.9-6.2 0.62-1.3 1.6-2.5 2.9-3.6 1.3-1 2.9-1.9 4.8-2.5 3.5-1.2 7.6-1.7 12-1.3 4.7 0.38 9.4 1.7 14 3.8z"/>
  <path id="tooth18" d="m499 645c-4.7-0.79-9-2.2-13-4.3-3.9-2-7.3-4.6-10-7.5-2.8-3-4.9-6.4-6.3-10a27 27 0 0 1-1.6-12c1.3-16 8.7-23 23-23 0.72 0 1.5 0.018 2.2 0.053 8.3 0.39 16 2.8 21 6.7 3 2.1 5.3 4.7 6.9 7.5 1.7 3.1 2.6 6.6 2.6 10 0 2.7-0.77 5.6-2 7.3-0.41 0.58-1 1.2-1.7 1.9-1.2 1.2-2.6 2.7-3.4 4.4-0.41 0.98-0.45 2.4-0.5 4-0.072 2.5-0.16 5.6-1.8 8.1l-8e-3 0.012c-1.4 2.4-3.6 4.1-6.6 5.1-2.4 0.79-5.4 1.1-9.5 1.1z"/>
  <path id="tooth17" d="m524 538c3 0.96 6.3 2.5 8.5 6.2 1.5 2.9 2.2 10 1.8 21l-6e-3 0.19c-0.026 1.2 0.17 2.8 0.37 4.5 0.4 3.4 0.86 7.3 0.045 9.8-0.4 1.1-1.9 2.4-4.2 3.7-1.8 1-3.9 1.9-4.6 2.1l-6e-3 1e-3 -6e-3 2e-3c-6.5 2.1-24-2.2-29-4a32 32 0 0 1-0.13-0.043c-3.6-1.2-6.7-2.7-9.3-4.7s-4.7-4.3-6.2-6.9c-1.5-2.7-2.4-5.8-2.6-9.1-0.22-3.4 0.26-7.2 1.4-11 1.9-6.6 5.5-11 11-14 3-1.6 6.6-2.4 11-2.5 3.7-0.027 7.8 0.66 12 2l0.24 0.078c2 0.63 3.9 1.1 5.7 1.6 1.7 0.43 3.4 0.83 4.9 1.3z"/>
  <path id="tooth16" d="m533 473c1.8 0.6 3.4 1.6 4.7 3 1.5 1.6 2.7 3.7 3.6 6.5 0.63 2.1 0.94 4.2 0.94 6.1a16 16 0 0 1-0.73 4.7c-0.87 2.8-2.3 4.7-3.4 6.2-0.78 1-1.3 1.8-1.4 2.4-0.026 1.2 0.17 2.8 0.37 4.5 0.4 3.4 0.86 7.3 0.044 9.8l-5e-3 0.015-3e-3 0.015c-0.51 2.5-2.5 4.7-6 6.4-2.8 1.4-5.8 2.1-7.1 2.4-0.21 0.049-0.37 0.088-0.48 0.12-4.7 1.1-10 0.73-14 0.23-4.9-0.62-9.3-1.7-12-2.4l-0.1-0.034c-7.1-2.3-14-7.5-18-14-4.3-7.1-5.5-15-3.3-23 1.1-3.7 2.7-7 4.8-9.8s4.7-5 7.6-6.6c5.6-3 12-3.3 19-1 2.4 0.76 4.8 1.8 7.2 3.2l0.021 0.012 0.023 7e-3c2.5 0.82 5.4 0.73 8.4 0.63 3.1-0.1 6.3-0.21 9.1 0.72z"/>
  <path id="tooth24" d="m318 785h-1e-3a82 82 0 0 1-5-0.69c-7-1.2-12-2.5-16-4.2-3.3-1.5-5.3-3.1-6.2-5.1-0.77-1.7-0.73-3.5 0.12-5.9 0.77-2.1 2.1-4.4 3.5-6.7l0.3-0.5c5.4-9.2 13-20 23-18 0.21 0.022 0.42 0.048 0.62 0.079 4.5 0.66 7.9 3.2 10 7.6 2.1 3.9 3.2 8.9 4.2 13l0.29 1.3c0.18 0.81 0.4 1.7 0.63 2.5 0.63 2.5 1.3 5 1.4 7.4 0.15 2.7-0.41 4.8-1.7 6.3-1.2 1.3-3 2.3-5.4 2.8-2.7 0.58-6.3 0.65-11 0.19z"/>
  <path id="tooth25" d="m271 771h-1e-3a105 105 0 0 1-5.9-2.8c-5.8-2.9-9.9-5.4-13-7.4-2.5-1.9-3.7-3.7-3.9-5.3-0.14-1.3 0.41-2.5 1.7-4 1.2-1.4 3-2.8 5-4.4 0.51-0.41 1-0.83 1.6-1.3 5.3-4.3 9.5-7.1 13-8.8 4.3-1.9 7.8-2.3 11-1l0.04 0.018c3.2 1.4 4.9 3.3 5.8 6.6 0.82 3.1 0.91 7.3 0.3 15-0.13 1.6-0.21 3.1-0.28 4.6-0.26 5.3-0.47 9.4-3 11-2.2 1.4-6.2 0.77-13-2z"/>
  <path id="tooth26" d="m224 744c-1.7-1.6-3.2-3.7-4.3-6.1-1.2-2.7-1.8-5.5-1.6-8a13 13 0 0 1 1.8-5.8c1.2-2 2.9-3.8 5.2-5.4 5.6-3.9 12-6.6 19-7.5 2.8-0.38 5.4-0.41 7.7-0.086 2.2 0.32 3.9 0.96 5.1 1.8 0.1 0.076 0.2 0.16 0.29 0.24 1.6 1.4 1.9 4.2 1.1 8.3-0.75 3.7-2.4 8.2-3.9 12a300 300 0 0 0-1.7 4.7c-0.18 0.54-0.36 1.1-0.55 1.7-0.77 2.4-1.6 4.8-2.9 6.8-1.5 2.2-3.4 3.4-5.8 3.6h-5e-3l-4e-3 1e-3c-3.3 0.45-7.3-0.71-10-1.8-3.4-1.3-6.4-3-7.8-4a13 13 0 0 1-1.1-0.92z"/>
  <path id="tooth27" d="m196 710h-1e-3c-2.6-2.6-3.8-5.7-3.5-9.2 0.42-5 3.9-10 9.7-14 5-3.6 11-6 16-6.8 5.1-0.81 9.4-0.076 12 2 0.1 0.089 0.2 0.18 0.3 0.28 2.2 2.2 3.3 6.5 2.8 11a27 27 0 0 1-1.8 7.4 26 26 0 0 1-4.2 7c-7.4 8.7-21 10-29 3.7a16 16 0 0 1-1.6-1.4z"/>
  <path id="tooth28" d="m201 680-2e-3 1e-3c-3 1.5-6 2.4-9 2.8-2.8 0.4-5.6 0.32-8.1-0.24-5-1.1-9-3.9-11-8-1-1.9-1.7-3.8-1.9-5.7a13 13 0 0 1 0.52-5.8c0.8-2.5 2.4-5 4.6-7.2 2.4-2.4 5.6-4.6 9.5-6.5l0.2-0.1c4.3-2.1 9.1-3.4 14-3.8 4.3-0.35 8.5 0.11 12 1.3 1.9 0.65 3.5 1.5 4.8 2.5s2.3 2.2 2.9 3.6c0.89 1.9 1.2 4 0.9 6.2-0.28 2.2-1.1 4.5-2.5 6.8s-3.3 4.6-5.7 6.8-5.3 4.3-8.5 6.2c-0.7 0.4-1.4 0.78-2.1 1.1z"/>
  <path id="tooth29" d="m178 645c-4.1-1e-3 -7.1-0.36-9.5-1.1-3-0.98-5.2-2.6-6.6-5.1l-4e-3 -7e-3 -4e-3 -6e-3c-1.6-2.4-1.7-5.5-1.8-8.1-0.047-1.6-0.087-3-0.5-4-0.76-1.8-2.1-3.2-3.4-4.4-0.65-0.66-1.3-1.3-1.7-1.9-1.2-1.7-2-4.5-2-7.3 0-3.8 0.87-7.2 2.6-10 1.6-2.9 3.9-5.4 6.9-7.5 5.5-3.9 13-6.3 21-6.7 0.76-0.035 1.5-0.053 2.2-0.053 15 0 22 7.3 23 23 0.34 4.1-0.2 8-1.6 12-1.3 3.7-3.5 7-6.3 10s-6.2 5.5-10 7.5c-4 2.1-8.4 3.5-13 4.3z"/>
  <path id="tooth30" d="m179 582c-5.5 1.8-23 6.1-29 4l-7e-3 -2e-3 -6e-3 -1e-3c-0.74-0.2-2.7-1-4.6-2.1-2.4-1.3-3.8-2.6-4.2-3.7-0.81-2.4-0.36-6.3 0.045-9.8 0.2-1.7 0.4-3.4 0.37-4.5l-7e-3 -0.2c-0.36-11 0.3-18 1.8-21 2.2-3.8 5.6-5.3 8.5-6.2 1.5-0.5 3.2-0.9 4.9-1.3 1.9-0.48 3.9-0.97 6-1.6 4.2-1.4 8.3-2.1 12-2 4 0.028 7.5 0.86 11 2.5 5 2.7 8.6 7.4 11 14 1.2 4 1.7 7.8 1.4 11-0.22 3.3-1.1 6.4-2.6 9.1-1.5 2.6-3.5 5-6.2 6.9-2.6 1.9-5.7 3.5-9.3 4.7l-0.13 0.043z"/>
  <path id="tooth31" d="m179 523c-2.3 0.74-6.7 1.8-12 2.4-4 0.5-9.7 0.87-14-0.23a21 21 0 0 0-0.48-0.12c-1.3-0.3-4.3-1-7.1-2.4-3.5-1.7-5.5-3.9-6-6.4l-3e-3 -0.015-5e-3 -0.015c-0.82-2.4-0.36-6.3 0.044-9.8 0.2-1.7 0.4-3.4 0.37-4.5-0.021-0.63-0.58-1.4-1.4-2.4-1.1-1.4-2.6-3.4-3.4-6.2a16 16 0 0 1-0.73-4.7c-8e-3 -1.9 0.31-4 0.94-6.1 0.91-2.8 2.1-4.9 3.6-6.5 1.3-1.4 2.8-2.4 4.7-3 2.8-0.93 6-0.82 9.1-0.72 3 0.1 5.9 0.2 8.4-0.63l0.023-7e-3 0.021-0.011c2.4-1.3 4.8-2.4 7.2-3.2 7-2.3 14-1.9 19 1 2.9 1.5 5.5 3.8 7.6 6.6s3.8 6.1 4.8 9.8c2.2 7.6 1.1 16-3.3 23-4 6.7-10 12-18 14l-0.1 0.034z"/>
 </g>
</svg>

    now you need to parse it somehow – you need two extra packages:

    import 'package:path_drawing/path_drawing.dart';
import 'package:xml/xml.dart';

    and this is a custom StatefulWidget widget to show it all:

    typedef Data = ({Size size, Map<String, Tooth> teeth});

class Foo extends StatefulWidget {
  @override
  State<Foo> createState() => _FooState();
}

class _FooState extends State<Foo> {
  Data data = (size: Size.zero, teeth: {});

  @override
  void initState() {
    super.initState();
    loadTeeth().then((value) {
      setState(() => data = value);
    });
  }

  @override
  Widget build(BuildContext context) {
    if (data.size == Size.zero) return UnconstrainedBox();

    return ColoredBox(
      color: Colors.blue.shade900,
      child: FittedBox(
        child: SizedBox.fromSize(
          size: data.size,
          child: Stack(
            children: [
              for (final MapEntry(key: key, value: tooth) in data.teeth.entries)
                Container(
                  clipBehavior: Clip.antiAlias,
                  decoration: ShapeDecoration(
                    color: tooth.selected? Colors.orange : Colors.white,
                    shape: ToothBorder(tooth.path),
                  ),
                  child: GestureDetector(
                    onTap: () {
                      print('$key pressed');
                      setState(() => tooth.selected = !tooth.selected);
                    },
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }

  Future<Data> loadTeeth() async {
    final xml = await rootBundle.loadString('assets/teeth.svg');

    final doc = XmlDocument.parse(xml);
    final viewBox = doc.rootElement.getAttribute('viewBox')!.split(' ');
    final w = double.parse(viewBox[2]);
    final h = double.parse(viewBox[3]);

    final teeth = doc.rootElement.findAllElements('path');
    print('loaded ${teeth.length} paths');
    int id = 0;
    return (
      size: Size(w, h),
      teeth: <String, Tooth>{
        for (final tooth in teeth)
          tooth.getAttribute('id') ?? 'id_${id++}': Tooth(parseSvgPathData(tooth.getAttribute('d')!)),
      },
    );
  }
}

class Tooth {
  Tooth(this.path);
  final Path path;
  bool selected = false;
}

class ToothBorder extends ShapeBorder {
  const ToothBorder(this.path);

  final Path path;

  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.zero;

  @override
  Path getInnerPath(Rect rect, {TextDirection? textDirection}) => getOuterPath(rect);

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    return rect.topLeft == Offset.zero? path : path.shift(rect.topLeft);
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {
  }

  @override
  ShapeBorder scale(double t) => this;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search