# HTML + JavaScript (ES6), 351 <s>374 384</s>

<!-- language: lang-html -->

    <canvas id=C></canvas><script>c=C.getContext("2d");`133124222162184253104213162164244191224182133191064104222093164253122224284151284`.match(/.../g).map((v,i)=>(c.fillStyle=['#fc0','#f04','#08a'][a=i%3],c.beginPath(),c[l='lineTo'](x=5*~~v/10,y=v%10*25),c[l](x-10,y+(--a+!a)*17),a&&c[l](x-30,y+a*17),c[l](x-20,y),!a&&c[l](x-10,y-17),c.fill()))</script>
*Less golfed*

<!-- language: lang-html -->

    <canvas id=C></canvas>
    <script>
      c=C.getContext("2d");
      [133,124,222,162,184,253,104,213,162,164,244,191,224,182,133,191,64,104,222,93,164,253,122,224,284,151,284]
      .map((v,i)=>(
        a = i % 3,
        x = 5 * ~~ v / 10,
        y = v % 10 * 25,
        c.fillStyle = ['#fc0','#f04','#0a8'][a],
        c.beginPath(),
        --a,
        c[l='lineTo'](x, y),
        c[l]( x -10, y + (a+!a) * 17),
        a&&c[l](x - 30, y + a * 17),
        c[l](x - 20, y),
        !a&&c[l](x - 10, y - 17),
        c.fill()
      ))
    </script>

**Test**

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <canvas id=C></canvas><script>c=C.getContext("2d");`133124222162184253104213162164244191224182133191064104222093164253122224284151284`.match(/.../g).map((v,i)=>(c.fillStyle=['#fc0','#f04','#08a'][a=i%3],c.beginPath(),c[l='lineTo'](x=5*~~v/10,y=v%10*25),c[l](x-10,y+(--a+!a)*17),a&&c[l](x-30,y+a*17),c[l](x-20,y),!a&&c[l](x-10,y-17),c.fill()))</script>

<!-- end snippet -->