Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <canvas id="c"></canvas>
              
            
!

CSS

              
                
              
            
!

JS

              
                const c = document.getElementById('c');
const ctx = c.getContext('2d');

const c2 = document.createElement('canvas');
const ctx2 = c2.getContext('2d');

const img = new Image();
img.addEventListener('load', e => {
  c.width = 1456 * 0.4;
  c.height = 1800 * 0.4;
  
  c2.width = 1456;
  c2.height = 1800;
  
  draw();
});

let tt = 0
let t = 0

let bt = 0

function draw() {
  ctx.globalCompositeOperation = 'source-over';
  ctx.setTransform(1,0,0,1,0,0);
  drawBackground(bt);
  ctx.setTransform(0.4,0,0,0.4,0,0);
  
  drawPath(backHairPath, 'black');
  
  drawMaskedStripes(armStripes, armMaskPath);
  drawMaskedStripes(stripes, maskPath);
  
  
  drawPath(facePath, 'white');
  drawPath(frontHairPath, 'black');
  drawPath(lipsPath, '#E04146');

  
  tt = (tt + 0.0125) % 2;
  t = tt % 1;
  bt = (bt + 0.005) % 1;
  requestAnimationFrame(draw);
}

function drawPath(path, color) {
  ctx.beginPath();
  path.forEach(point => {
    ctx.lineTo(point.x, point.y);
  })
  ctx.fillStyle = color;
  ctx.fill();
}

function drawBackground(t) {
  ctx.fillStyle = 'black';
  ctx.fillRect(0,0,c.width,c.height);
  
  ctx.fillStyle = 'white';
  for(let y = t*20-20; y < c.height; y += 20) {
    ctx.fillRect(0,y,c.width,10);
  }
}

function drawMaskedStripes(stripes, maskPath) {
  ctx2.clearRect(0,0,c2.width,c2.height);
  drawStripes(stripes, t, ctx2);
  
  ctx2.beginPath();
  maskPath.forEach(point => {
    ctx2.lineTo(point.x, point.y);
  })
  ctx2.globalCompositeOperation = 'destination-in';
  ctx2.fill();
  ctx2.globalCompositeOperation = 'destination-over';

  ctx2.beginPath();
  maskPath.forEach(point => {
    ctx2.lineTo(point.x, point.y);
  })
  ctx2.fillStyle = 'black';
  ctx2.fill();

  ctx2.globalCompositeOperation = 'destination-out';
  ctx.lineWidth = 1;
  ctx2.stroke();

  ctx2.globalCompositeOperation = 'source-over';
  
  ctx.drawImage(c2,0,0,c2.width,c2.height);
}

function drawStripes(stripes, t, ctx) {
  ctx.fillStyle = 'white';
  
  stripes.forEach((s, i) => {
    let stripe = s.concat();
    let next = stripes[i+1] || [];
    let isTop = tt > 1 ? i % 2 === 0 : i % 2 !== 0;

    if (isTop || i === 0)
      ctx.beginPath();

    let final_points = stripe.reduce((acc, point) => { //point to transition
      let transition_points = []

      next.forEach(potential_transition_point => { //potential points to transition to
        //ctx.lineTo(point.x, point.y);
        if (stripe.every(point2 => { //competition for potential points
          return dist(point,potential_transition_point) <= dist(point2,potential_transition_point);
        })) {
          transition_points.push(potential_transition_point);
        }
      });

      if (transition_points.length === 0 && next.length > 1) { //if point has no points to transition to, make up one
        let candidates = next.concat().sort((a,b) => dist(point,a) < dist(point,b) ? 1 : -1);
        let c1 = candidates.pop();
        let c2 = candidates.pop();

        transition_points.push({ //add made up point
          x: c1.x,
          y: c1.y
        });
      }

      return acc.concat(
        transition_points.map(transition_point => ({
          x: point.x*(1-t) + transition_point.x*t, 
          y: point.y*(1-t) + transition_point.y*t
        }))
      );
    }, []);

    let sort_direction = isTop ? 1 : -1
    final_points.sort((a,b) => a.x > b.x ? sort_direction : -sort_direction)

    if (final_points[0] && isTop)
      ctx.moveTo(final_points[0].x, final_points[0].y);

    final_points
      .forEach(transition_point => { //tween between current point and transition points
      ctx.lineTo(transition_point.x, transition_point.y);
    });


    if (!isTop)
      ctx.fill();
  });
}

  
function dist(p1,p2) {
  return Math.abs(p1.x-p2.x);
}

img.src = 'https://i.pinimg.com/originals/8c/c2/f2/8cc2f23565df7db379a6329e50f4e313.jpg';

//check out my profile to see my other two pens I used to create this json:
let stripes = [[{"x":658,"y":578},{"x":724,"y":594},{"x":785,"y":597},{"x":876,"y":587},{"x":939,"y":574},{"x":1001,"y":562}],[{"x":685,"y":618},{"x":716,"y":623},{"x":773,"y":626},{"x":848,"y":620},{"x":888,"y":614},{"x":927,"y":604},{"x":988,"y":594}],[{"x":686,"y":651},{"x":711,"y":653},{"x":751,"y":649},{"x":801,"y":648},{"x":874,"y":640},{"x":891,"y":635},{"x":911,"y":643},{"x":961,"y":639}],[{"x":685,"y":679},{"x":702,"y":673},{"x":738,"y":665},{"x":801,"y":661},{"x":815,"y":659},{"x":865,"y":662},{"x":907,"y":660},{"x":918,"y":664},{"x":958,"y":670}],[{"x":683,"y":699},{"x":709,"y":709},{"x":718,"y":709},{"x":746,"y":696},{"x":820,"y":685},{"x":891,"y":685},{"x":900,"y":687},{"x":926,"y":684},{"x":980,"y":691}],[{"x":671,"y":741},{"x":710,"y":721},{"x":757,"y":708},{"x":813,"y":703},{"x":879,"y":704},{"x":899,"y":704},{"x":907,"y":711},{"x":986,"y":699}],[{"x":681,"y":749},{"x":697,"y":757},{"x":713,"y":747},{"x":746,"y":735},{"x":798,"y":718},{"x":903,"y":715},{"x":1096,"y":690}],[{"x":663,"y":782},{"x":706,"y":758},{"x":782,"y":734},{"x":830,"y":727},{"x":865,"y":724},{"x":905,"y":720},{"x":964,"y":713},{"x":1151,"y":706}],[{"x":592,"y":818},{"x":625,"y":817},{"x":655,"y":792},{"x":681,"y":777},{"x":697,"y":775},{"x":764,"y":752},{"x":831,"y":735},{"x":856,"y":730},{"x":902,"y":725},{"x":942,"y":720},{"x":1004,"y":717},{"x":1048,"y":717},{"x":1087,"y":717},{"x":1107,"y":719},{"x":1191,"y":718}],[{"x":588,"y":831},{"x":609,"y":830},{"x":639,"y":813},{"x":659,"y":794},{"x":686,"y":783},{"x":730,"y":767},{"x":821,"y":741},{"x":849,"y":736},{"x":878,"y":733},{"x":931,"y":725},{"x":1006,"y":729},{"x":1066,"y":727},{"x":1077,"y":729},{"x":1094,"y":725},{"x":1182,"y":730}],[{"x":585,"y":834},{"x":607,"y":832},{"x":642,"y":814},{"x":653,"y":812},{"x":689,"y":788},{"x":733,"y":772},{"x":781,"y":759},{"x":805,"y":751},{"x":841,"y":745},{"x":885,"y":739},{"x":922,"y":736},{"x":977,"y":739},{"x":1051,"y":744},{"x":1085,"y":729},{"x":1125,"y":729},{"x":1143,"y":737},{"x":1157,"y":747},{"x":1269,"y":750}],[{"x":574,"y":840},{"x":605,"y":835},{"x":644,"y":817},{"x":665,"y":810},{"x":733,"y":781},{"x":763,"y":768},{"x":787,"y":763},{"x":823,"y":753},{"x":881,"y":745},{"x":929,"y":743},{"x":988,"y":745},{"x":1048,"y":749},{"x":1084,"y":736},{"x":1113,"y":735},{"x":1139,"y":742},{"x":1157,"y":754},{"x":1257,"y":761}],[{"x":529,"y":870},{"x":544,"y":869},{"x":605,"y":837},{"x":673,"y":803},{"x":709,"y":787},{"x":761,"y":770},{"x":797,"y":765},{"x":819,"y":759},{"x":867,"y":758},{"x":919,"y":763},{"x":952,"y":772},{"x":978,"y":776},{"x":1003,"y":781},{"x":1052,"y":763},{"x":1097,"y":754},{"x":1114,"y":754},{"x":1145,"y":760},{"x":1168,"y":771},{"x":1182,"y":788},{"x":1186,"y":794},{"x":1231,"y":795}],[{"x":511,"y":880},{"x":547,"y":869},{"x":619,"y":834},{"x":679,"y":803},{"x":724,"y":786},{"x":772,"y":779},{"x":815,"y":771},{"x":851,"y":771},{"x":900,"y":775},{"x":949,"y":787},{"x":979,"y":792},{"x":991,"y":799},{"x":1014,"y":793},{"x":1031,"y":788},{"x":1087,"y":778},{"x":1118,"y":769},{"x":1148,"y":775},{"x":1168,"y":784},{"x":1187,"y":794},{"x":1227,"y":805}],[{"x":511,"y":884},{"x":547,"y":870},{"x":620,"y":832},{"x":672,"y":811},{"x":727,"y":803},{"x":781,"y":797},{"x":811,"y":795},{"x":847,"y":797},{"x":892,"y":802},{"x":932,"y":811},{"x":975,"y":820},{"x":991,"y":815},{"x":1047,"y":810},{"x":1095,"y":805},{"x":1126,"y":799},{"x":1154,"y":798},{"x":1169,"y":802},{"x":1189,"y":820},{"x":1193,"y":824},{"x":1240,"y":831}],[{"x":511,"y":886},{"x":549,"y":869},{"x":621,"y":835},{"x":651,"y":823},{"x":675,"y":816},{"x":708,"y":811},{"x":738,"y":807},{"x":782,"y":805},{"x":809,"y":803},{"x":848,"y":807},{"x":876,"y":810},{"x":903,"y":816},{"x":932,"y":825},{"x":957,"y":828},{"x":979,"y":841},{"x":1009,"y":831},{"x":1057,"y":827},{"x":1095,"y":821},{"x":1129,"y":819},{"x":1161,"y":821},{"x":1180,"y":828},{"x":1195,"y":841},{"x":1227,"y":847}],[{"x":505,"y":889},{"x":551,"y":871},{"x":587,"y":855},{"x":641,"y":832},{"x":670,"y":823},{"x":702,"y":817},{"x":717,"y":814},{"x":757,"y":815},{"x":781,"y":817},{"x":805,"y":819},{"x":853,"y":829},{"x":885,"y":835},{"x":922,"y":848},{"x":965,"y":859},{"x":1005,"y":852},{"x":1047,"y":849},{"x":1103,"y":847},{"x":1145,"y":845},{"x":1172,"y":849},{"x":1193,"y":859},{"x":1201,"y":870},{"x":1244,"y":879}],[{"x":505,"y":893},{"x":535,"y":883},{"x":583,"y":861},{"x":623,"y":841},{"x":671,"y":827},{"x":709,"y":820},{"x":747,"y":820},{"x":783,"y":825},{"x":817,"y":827},{"x":844,"y":838},{"x":878,"y":849},{"x":923,"y":864},{"x":965,"y":880},{"x":997,"y":868},{"x":1029,"y":866},{"x":1050,"y":862},{"x":1110,"y":864},{"x":1167,"y":870},{"x":1190,"y":880},{"x":1202,"y":897},{"x":1205,"y":902},{"x":1253,"y":902}],[{"x":407,"y":935},{"x":468,"y":926},{"x":515,"y":904},{"x":557,"y":887},{"x":591,"y":867},{"x":620,"y":853},{"x":647,"y":844},{"x":683,"y":835},{"x":727,"y":835},{"x":757,"y":837},{"x":789,"y":845},{"x":814,"y":849},{"x":855,"y":863},{"x":890,"y":878},{"x":914,"y":891},{"x":947,"y":910},{"x":965,"y":925},{"x":968,"y":913},{"x":1001,"y":900},{"x":1038,"y":895},{"x":1069,"y":890},{"x":1110,"y":890},{"x":1138,"y":894},{"x":1170,"y":900},{"x":1188,"y":909},{"x":1202,"y":919},{"x":1206,"y":929},{"x":1254,"y":932}],[{"x":411,"y":947},{"x":457,"y":937},{"x":485,"y":928},{"x":544,"y":901},{"x":559,"y":895},{"x":595,"y":874},{"x":631,"y":853},{"x":670,"y":845},{"x":706,"y":841},{"x":755,"y":844},{"x":784,"y":852},{"x":817,"y":865},{"x":845,"y":880},{"x":877,"y":899},{"x":905,"y":915},{"x":944,"y":937},{"x":969,"y":953},{"x":970,"y":937},{"x":1023,"y":915},{"x":1073,"y":910},{"x":1110,"y":908},{"x":1145,"y":910},{"x":1177,"y":923},{"x":1199,"y":935},{"x":1204,"y":941},{"x":1256,"y":955}],[{"x":347,"y":969},{"x":390,"y":971},{"x":417,"y":962},{"x":443,"y":958},{"x":473,"y":949},{"x":528,"y":926},{"x":563,"y":902},{"x":608,"y":875},{"x":656,"y":859},{"x":688,"y":856},{"x":724,"y":857},{"x":755,"y":863},{"x":795,"y":874},{"x":837,"y":899},{"x":889,"y":936},{"x":937,"y":970},{"x":967,"y":993},{"x":978,"y":999},{"x":979,"y":967},{"x":1004,"y":951},{"x":1040,"y":938},{"x":1093,"y":938},{"x":1141,"y":937},{"x":1177,"y":946},{"x":1206,"y":961},{"x":1256,"y":966}],[{"x":330,"y":997},{"x":363,"y":995},{"x":408,"y":978},{"x":458,"y":962},{"x":519,"y":940},{"x":555,"y":914},{"x":607,"y":885},{"x":648,"y":871},{"x":674,"y":864},{"x":717,"y":868},{"x":751,"y":881},{"x":788,"y":898},{"x":870,"y":953},{"x":921,"y":988},{"x":962,"y":1014},{"x":981,"y":1022},{"x":982,"y":1001},{"x":1018,"y":973},{"x":1073,"y":960},{"x":1116,"y":960},{"x":1161,"y":963},{"x":1199,"y":975},{"x":1207,"y":987},{"x":1263,"y":996}],[{"x":290,"y":1054},{"x":326,"y":1056},{"x":359,"y":1023},{"x":400,"y":1003},{"x":442,"y":995},{"x":475,"y":978},{"x":519,"y":952},{"x":549,"y":931},{"x":581,"y":907},{"x":627,"y":890},{"x":686,"y":888},{"x":738,"y":905},{"x":773,"y":925},{"x":802,"y":942},{"x":837,"y":965},{"x":873,"y":991},{"x":915,"y":1014},{"x":949,"y":1030},{"x":981,"y":1049},{"x":989,"y":1053},{"x":990,"y":1029},{"x":1035,"y":1002},{"x":1083,"y":990},{"x":1131,"y":988},{"x":1165,"y":996},{"x":1209,"y":1021},{"x":1263,"y":1028}],[{"x":301,"y":1109},{"x":333,"y":1103},{"x":358,"y":1073},{"x":373,"y":1059},{"x":415,"y":1039},{"x":450,"y":1019},{"x":493,"y":992},{"x":536,"y":960},{"x":567,"y":945},{"x":615,"y":929},{"x":660,"y":928},{"x":689,"y":937},{"x":729,"y":956},{"x":783,"y":986},{"x":817,"y":1005},{"x":858,"y":1026},{"x":906,"y":1050},{"x":957,"y":1071},{"x":973,"y":1090},{"x":993,"y":1136},{"x":997,"y":1124},{"x":998,"y":1053},{"x":1040,"y":1019},{"x":1090,"y":1007},{"x":1129,"y":1005},{"x":1171,"y":1020},{"x":1200,"y":1033},{"x":1211,"y":1045},{"x":1263,"y":1052}],[{"x":315,"y":1126},{"x":339,"y":1124},{"x":379,"y":1081},{"x":407,"y":1060},{"x":438,"y":1041},{"x":473,"y":1019},{"x":527,"y":987},{"x":567,"y":969},{"x":593,"y":964},{"x":649,"y":964},{"x":690,"y":974},{"x":718,"y":986},{"x":760,"y":1007},{"x":805,"y":1027},{"x":837,"y":1045},{"x":868,"y":1061},{"x":931,"y":1089},{"x":958,"y":1114},{"x":971,"y":1153},{"x":997,"y":1131},{"x":1004,"y":1095},{"x":1043,"y":1055},{"x":1085,"y":1039},{"x":1121,"y":1040},{"x":1163,"y":1042},{"x":1184,"y":1049},{"x":1215,"y":1071},{"x":1271,"y":1083}],[{"x":324,"y":1131},{"x":347,"y":1126},{"x":377,"y":1099},{"x":431,"y":1061},{"x":501,"y":1026},{"x":558,"y":999},{"x":653,"y":1005},{"x":721,"y":1024},{"x":797,"y":1055},{"x":845,"y":1072},{"x":883,"y":1089},{"x":920,"y":1106},{"x":947,"y":1133},{"x":968,"y":1161},{"x":1004,"y":1135},{"x":1007,"y":1115},{"x":1052,"y":1076},{"x":1096,"y":1060},{"x":1147,"y":1059},{"x":1184,"y":1065},{"x":1219,"y":1090},{"x":1259,"y":1102}],[{"x":321,"y":1148},{"x":343,"y":1144},{"x":410,"y":1092},{"x":487,"y":1043},{"x":525,"y":1034},{"x":573,"y":1029},{"x":631,"y":1030},{"x":676,"y":1037},{"x":777,"y":1073},{"x":831,"y":1095},{"x":903,"y":1128},{"x":924,"y":1141},{"x":949,"y":1181},{"x":990,"y":1179},{"x":1009,"y":1135},{"x":1060,"y":1104},{"x":1125,"y":1087},{"x":1159,"y":1086},{"x":1190,"y":1097},{"x":1219,"y":1118},{"x":1273,"y":1129}],[{"x":323,"y":1160},{"x":343,"y":1155},{"x":417,"y":1094},{"x":494,"y":1063},{"x":544,"y":1051},{"x":611,"y":1047},{"x":654,"y":1055},{"x":727,"y":1077},{"x":819,"y":1104},{"x":872,"y":1130},{"x":912,"y":1156},{"x":947,"y":1186},{"x":997,"y":1189},{"x":1011,"y":1160},{"x":1052,"y":1135},{"x":1095,"y":1116},{"x":1135,"y":1111},{"x":1169,"y":1109},{"x":1197,"y":1122},{"x":1218,"y":1143},{"x":1267,"y":1158}],[{"x":317,"y":1170},{"x":340,"y":1166},{"x":393,"y":1121},{"x":430,"y":1097},{"x":487,"y":1076},{"x":531,"y":1069},{"x":569,"y":1064},{"x":610,"y":1069},{"x":681,"y":1078},{"x":748,"y":1100},{"x":815,"y":1121},{"x":873,"y":1148},{"x":905,"y":1168},{"x":937,"y":1201},{"x":987,"y":1210},{"x":1013,"y":1195},{"x":1024,"y":1182},{"x":1051,"y":1169},{"x":1107,"y":1148},{"x":1143,"y":1141},{"x":1177,"y":1142},{"x":1198,"y":1147},{"x":1220,"y":1155},{"x":1256,"y":1161}],[{"x":313,"y":1185},{"x":338,"y":1180},{"x":386,"y":1140},{"x":431,"y":1107},{"x":483,"y":1087},{"x":562,"y":1084},{"x":635,"y":1091},{"x":679,"y":1101},{"x":764,"y":1127},{"x":826,"y":1147},{"x":881,"y":1176},{"x":938,"y":1233},{"x":1015,"y":1223},{"x":1050,"y":1192},{"x":1110,"y":1165},{"x":1164,"y":1162},{"x":1200,"y":1170},{"x":1235,"y":1183},{"x":1265,"y":1183}],[{"x":323,"y":1213},{"x":357,"y":1175},{"x":407,"y":1139},{"x":501,"y":1115},{"x":591,"y":1117},{"x":629,"y":1124},{"x":702,"y":1146},{"x":761,"y":1161},{"x":831,"y":1187},{"x":850,"y":1196},{"x":932,"y":1248},{"x":1011,"y":1249},{"x":1044,"y":1223},{"x":1131,"y":1193},{"x":1173,"y":1190},{"x":1212,"y":1193},{"x":1252,"y":1211}],[{"x":319,"y":1234},{"x":367,"y":1184},{"x":413,"y":1149},{"x":452,"y":1139},{"x":590,"y":1139},{"x":635,"y":1149},{"x":710,"y":1165},{"x":808,"y":1199},{"x":843,"y":1215},{"x":934,"y":1286},{"x":1009,"y":1277},{"x":1049,"y":1246},{"x":1118,"y":1218},{"x":1167,"y":1212},{"x":1228,"y":1217},{"x":1258,"y":1238}],[{"x":313,"y":1296},{"x":355,"y":1230},{"x":397,"y":1191},{"x":447,"y":1173},{"x":547,"y":1172},{"x":643,"y":1182},{"x":720,"y":1200},{"x":864,"y":1257},{"x":881,"y":1268},{"x":937,"y":1315},{"x":999,"y":1312},{"x":1060,"y":1268},{"x":1123,"y":1245},{"x":1181,"y":1238},{"x":1213,"y":1241},{"x":1265,"y":1253}],[{"x":317,"y":1318},{"x":367,"y":1241},{"x":411,"y":1212},{"x":470,"y":1197},{"x":527,"y":1194},{"x":587,"y":1193},{"x":648,"y":1200},{"x":731,"y":1221},{"x":801,"y":1248},{"x":851,"y":1270},{"x":926,"y":1337},{"x":1015,"y":1340},{"x":1027,"y":1334},{"x":1063,"y":1298},{"x":1121,"y":1270},{"x":1179,"y":1257},{"x":1225,"y":1259},{"x":1267,"y":1273}],[{"x":326,"y":1331},{"x":367,"y":1271},{"x":401,"y":1251},{"x":409,"y":1246},{"x":457,"y":1234},{"x":511,"y":1232},{"x":564,"y":1231},{"x":615,"y":1236},{"x":707,"y":1249},{"x":781,"y":1269},{"x":831,"y":1288},{"x":870,"y":1312},{"x":917,"y":1364},{"x":993,"y":1379},{"x":1029,"y":1355},{"x":1060,"y":1326},{"x":1118,"y":1301},{"x":1167,"y":1290},{"x":1215,"y":1288},{"x":1251,"y":1288},{"x":1285,"y":1300},{"x":1285,"y":1300}],[{"x":325,"y":1376},{"x":370,"y":1312},{"x":410,"y":1281},{"x":475,"y":1259},{"x":554,"y":1255},{"x":645,"y":1261},{"x":707,"y":1266},{"x":781,"y":1291},{"x":829,"y":1317},{"x":870,"y":1341},{"x":925,"y":1389},{"x":1003,"y":1405},{"x":1061,"y":1347},{"x":1111,"y":1319},{"x":1187,"y":1308},{"x":1246,"y":1306},{"x":1282,"y":1317},{"x":1310,"y":1316}],[{"x":330,"y":1407},{"x":363,"y":1363},{"x":417,"y":1313},{"x":473,"y":1302},{"x":565,"y":1295},{"x":674,"y":1297},{"x":769,"y":1314},{"x":831,"y":1335},{"x":862,"y":1357},{"x":892,"y":1383},{"x":938,"y":1437},{"x":1008,"y":1434},{"x":1051,"y":1383},{"x":1087,"y":1364},{"x":1159,"y":1336},{"x":1219,"y":1334},{"x":1274,"y":1333},{"x":1315,"y":1340}],[{"x":336,"y":1432},{"x":361,"y":1401},{"x":385,"y":1378},{"x":479,"y":1334},{"x":565,"y":1319},{"x":638,"y":1322},{"x":726,"y":1331},{"x":801,"y":1344},{"x":848,"y":1365},{"x":889,"y":1396},{"x":937,"y":1445},{"x":1015,"y":1445},{"x":1045,"y":1421},{"x":1102,"y":1383},{"x":1150,"y":1367},{"x":1209,"y":1354},{"x":1275,"y":1353},{"x":1313,"y":1355}],[{"x":334,"y":1469},{"x":359,"y":1437},{"x":410,"y":1401},{"x":474,"y":1373},{"x":565,"y":1354},{"x":636,"y":1346},{"x":707,"y":1346},{"x":781,"y":1359},{"x":829,"y":1377},{"x":883,"y":1405},{"x":917,"y":1435},{"x":950,"y":1462},{"x":1049,"y":1457},{"x":1085,"y":1425},{"x":1167,"y":1389},{"x":1243,"y":1375},{"x":1307,"y":1375},{"x":1331,"y":1377}],[{"x":342,"y":1490},{"x":357,"y":1467},{"x":426,"y":1419},{"x":560,"y":1377},{"x":623,"y":1367},{"x":720,"y":1372},{"x":790,"y":1382},{"x":849,"y":1401},{"x":899,"y":1434},{"x":959,"y":1481},{"x":1048,"y":1482},{"x":1069,"y":1472},{"x":1099,"y":1440},{"x":1203,"y":1406},{"x":1274,"y":1393},{"x":1324,"y":1393},{"x":1347,"y":1385}],[{"x":335,"y":1533},{"x":394,"y":1487},{"x":447,"y":1451},{"x":551,"y":1417},{"x":645,"y":1400},{"x":713,"y":1395},{"x":777,"y":1401},{"x":853,"y":1423},{"x":902,"y":1451},{"x":975,"y":1505},{"x":1073,"y":1509},{"x":1112,"y":1472},{"x":1177,"y":1444},{"x":1246,"y":1426},{"x":1320,"y":1411},{"x":1345,"y":1413}],[{"x":328,"y":1566},{"x":384,"y":1519},{"x":457,"y":1475},{"x":567,"y":1444},{"x":660,"y":1420},{"x":725,"y":1413},{"x":795,"y":1422},{"x":853,"y":1441},{"x":905,"y":1472},{"x":966,"y":1517},{"x":1059,"y":1551},{"x":1097,"y":1519},{"x":1121,"y":1492},{"x":1191,"y":1460},{"x":1279,"y":1438},{"x":1352,"y":1431}],[{"x":327,"y":1601},{"x":415,"y":1535},{"x":521,"y":1491},{"x":661,"y":1449},{"x":701,"y":1439},{"x":803,"y":1447},{"x":839,"y":1456},{"x":909,"y":1493},{"x":949,"y":1517},{"x":989,"y":1545},{"x":1076,"y":1560},{"x":1106,"y":1549},{"x":1139,"y":1523},{"x":1182,"y":1494},{"x":1244,"y":1469},{"x":1297,"y":1460},{"x":1359,"y":1458}],[{"x":331,"y":1630},{"x":385,"y":1584},{"x":489,"y":1532},{"x":599,"y":1492},{"x":697,"y":1463},{"x":779,"y":1465},{"x":844,"y":1479},{"x":888,"y":1497},{"x":934,"y":1523},{"x":997,"y":1558},{"x":1098,"y":1581},{"x":1149,"y":1545},{"x":1227,"y":1503},{"x":1301,"y":1482},{"x":1350,"y":1479},{"x":1377,"y":1475}],[{"x":312,"y":1670},{"x":371,"y":1628},{"x":443,"y":1593},{"x":541,"y":1549},{"x":612,"y":1523},{"x":712,"y":1497},{"x":773,"y":1497},{"x":819,"y":1496},{"x":877,"y":1523},{"x":925,"y":1543},{"x":986,"y":1573},{"x":1045,"y":1614},{"x":1120,"y":1612},{"x":1159,"y":1568},{"x":1212,"y":1539},{"x":1275,"y":1518},{"x":1343,"y":1507},{"x":1375,"y":1504}],[{"x":332,"y":1697},{"x":414,"y":1637},{"x":506,"y":1596},{"x":580,"y":1566},{"x":644,"y":1538},{"x":741,"y":1527},{"x":797,"y":1525},{"x":868,"y":1543},{"x":927,"y":1572},{"x":981,"y":1599},{"x":1021,"y":1620},{"x":1055,"y":1647},{"x":1125,"y":1633},{"x":1187,"y":1583},{"x":1239,"y":1558},{"x":1294,"y":1535},{"x":1351,"y":1529},{"x":1381,"y":1536}],[{"x":407,"y":1698},{"x":491,"y":1644},{"x":561,"y":1611},{"x":665,"y":1579},{"x":733,"y":1563},{"x":813,"y":1563},{"x":869,"y":1571},{"x":955,"y":1607},{"x":1000,"y":1632},{"x":1039,"y":1666},{"x":1150,"y":1643},{"x":1207,"y":1597},{"x":1289,"y":1561},{"x":1333,"y":1556},{"x":1367,"y":1559}],[{"x":459,"y":1703},{"x":553,"y":1641},{"x":639,"y":1609},{"x":683,"y":1593},{"x":741,"y":1586},{"x":805,"y":1588},{"x":847,"y":1592},{"x":927,"y":1620},{"x":980,"y":1649},{"x":1029,"y":1691},{"x":1103,"y":1676},{"x":1194,"y":1656},{"x":1229,"y":1618},{"x":1262,"y":1599},{"x":1313,"y":1585},{"x":1349,"y":1582},{"x":1401,"y":1581}],[{"x":550,"y":1706},{"x":621,"y":1659},{"x":675,"y":1643},{"x":772,"y":1633},{"x":838,"y":1635},{"x":887,"y":1645},{"x":945,"y":1674},{"x":986,"y":1693},{"x":1031,"y":1701},{"x":1089,"y":1692},{"x":1163,"y":1671},{"x":1209,"y":1668},{"x":1243,"y":1642},{"x":1292,"y":1625},{"x":1351,"y":1608},{"x":1375,"y":1609},{"x":1409,"y":1608}],[{"x":624,"y":1713},{"x":707,"y":1705},{"x":777,"y":1698},{"x":884,"y":1691},{"x":929,"y":1698},{"x":971,"y":1711},{"x":1024,"y":1718},{"x":1067,"y":1717},{"x":1142,"y":1704},{"x":1216,"y":1687},{"x":1275,"y":1670},{"x":1307,"y":1651},{"x":1357,"y":1633},{"x":1411,"y":1644}],[{"x":1290,"y":1700},{"x":1331,"y":1680},{"x":1377,"y":1672}]];
const armStripes = [[{"x":317,"y":1242},{"x":357,"y":1255},{"x":414,"y":1267}],[{"x":305,"y":1283},{"x":372,"y":1299},{"x":409,"y":1312}],[{"x":305,"y":1329},{"x":348,"y":1339},{"x":379,"y":1345}],[{"x":289,"y":1369},{"x":315,"y":1360},{"x":338,"y":1360},{"x":363,"y":1362}],[{"x":259,"y":1388},{"x":311,"y":1387},{"x":330,"y":1384},{"x":355,"y":1383}],[{"x":249,"y":1410},{"x":274,"y":1402},{"x":308,"y":1400},{"x":335,"y":1404},{"x":353,"y":1409}],[{"x":246,"y":1419},{"x":271,"y":1416},{"x":315,"y":1421},{"x":336,"y":1423},{"x":356,"y":1428}],[{"x":231,"y":1433},{"x":262,"y":1429},{"x":299,"y":1435},{"x":333,"y":1445},{"x":354,"y":1458}],[{"x":202,"y":1451},{"x":251,"y":1449},{"x":278,"y":1451},{"x":315,"y":1466},{"x":354,"y":1481}],[{"x":197,"y":1471},{"x":235,"y":1462},{"x":267,"y":1468},{"x":310,"y":1479},{"x":357,"y":1500}],[{"x":178,"y":1483},{"x":230,"y":1481},{"x":257,"y":1485},{"x":301,"y":1501},{"x":341,"y":1518},{"x":357,"y":1529}],[{"x":174,"y":1496},{"x":223,"y":1494},{"x":247,"y":1498},{"x":303,"y":1526},{"x":369,"y":1559}],[{"x":153,"y":1519},{"x":179,"y":1513},{"x":247,"y":1523},{"x":303,"y":1554},{"x":343,"y":1581},{"x":365,"y":1598}],[{"x":145,"y":1543},{"x":177,"y":1531},{"x":223,"y":1539},{"x":274,"y":1565},{"x":317,"y":1591},{"x":355,"y":1633}],[{"x":133,"y":1559},{"x":164,"y":1551},{"x":207,"y":1561},{"x":269,"y":1591},{"x":315,"y":1626},{"x":347,"y":1662}],[{"x":127,"y":1574},{"x":170,"y":1571},{"x":205,"y":1582},{"x":256,"y":1609},{"x":300,"y":1653},{"x":325,"y":1690}],[{"x":103,"y":1593},{"x":156,"y":1596},{"x":183,"y":1605},{"x":234,"y":1633},{"x":279,"y":1674},{"x":285,"y":1690}],[{"x":95,"y":1611},{"x":147,"y":1613},{"x":187,"y":1632},{"x":215,"y":1650},{"x":245,"y":1679},{"x":253,"y":1697}],[{"x":93,"y":1627},{"x":121,"y":1628},{"x":158,"y":1639},{"x":183,"y":1659},{"x":209,"y":1694}],[{"x":97,"y":1649},{"x":125,"y":1649},{"x":143,"y":1658},{"x":163,"y":1676},{"x":183,"y":1703}],[{"x":91,"y":1667},{"x":118,"y":1671},{"x":133,"y":1679},{"x":151,"y":1701}],[{"x":93,"y":1683},{"x":106,"y":1687},{"x":124,"y":1704}]];

let maskPath = [{"x":711,"y":595},{"x":711,"y":659},{"x":702,"y":681},{"x":709,"y":694},{"x":689,"y":735},{"x":694,"y":747},{"x":690,"y":753},{"x":691,"y":762},{"x":652,"y":796},{"x":605,"y":830},{"x":557,"y":859},{"x":495,"y":899},{"x":445,"y":940},{"x":410,"y":959},{"x":383,"y":974},{"x":363,"y":991},{"x":345,"y":1011},{"x":337,"y":1032},{"x":330,"y":1071},{"x":331,"y":1086},{"x":334,"y":1103},{"x":340,"y":1120},{"x":341,"y":1137},{"x":341,"y":1163},{"x":336,"y":1190},{"x":327,"y":1223},{"x":324,"y":1239},{"x":323,"y":1275},{"x":327,"y":1302},{"x":327,"y":1302},{"x":335,"y":1329},{"x":339,"y":1368},{"x":342,"y":1432},{"x":349,"y":1487},{"x":349,"y":1522},{"x":349,"y":1559},{"x":350,"y":1586},{"x":343,"y":1619},{"x":337,"y":1662},{"x":1041,"y":1633},{"x":1003,"y":1577},{"x":979,"y":1546},{"x":968,"y":1532},{"x":961,"y":1512},{"x":949,"y":1485},{"x":933,"y":1448},{"x":933,"y":1448},{"x":918,"y":1401},{"x":912,"y":1371},{"x":906,"y":1295},{"x":908,"y":1261},{"x":915,"y":1237},{"x":947,"y":1187},{"x":973,"y":1151},{"x":993,"y":1122},{"x":1000,"y":1099},{"x":1005,"y":1129},{"x":1012,"y":1165},{"x":1022,"y":1225},{"x":1029,"y":1263},{"x":1035,"y":1280},{"x":1035,"y":1303},{"x":1045,"y":1339},{"x":1048,"y":1359},{"x":1051,"y":1387},{"x":1061,"y":1419},{"x":1073,"y":1461},{"x":1093,"y":1497},{"x":1129,"y":1555},{"x":1157,"y":1592},{"x":1189,"y":1627},{"x":1342,"y":1619},{"x":1345,"y":1461},{"x":1330,"y":1421},{"x":1300,"y":1366},{"x":1264,"y":1307},{"x":1252,"y":1277},{"x":1235,"y":1209},{"x":1218,"y":1125},{"x":1212,"y":1052},{"x":1207,"y":983},{"x":1204,"y":909},{"x":1201,"y":876},{"x":1191,"y":811},{"x":1179,"y":781},{"x":1159,"y":756},{"x":1144,"y":735},{"x":1135,"y":731},{"x":1112,"y":723},{"x":1085,"y":720},{"x":929,"y":707},{"x":917,"y":693},{"x":912,"y":682},{"x":910,"y":637},{"x":919,"y":605},{"x":921,"y":577}];
let armMaskPath = [{"x":346,"y":1309},{"x":309,"y":1355},{"x":282,"y":1387},{"x":269,"y":1406},{"x":257,"y":1413},{"x":252,"y":1423},{"x":219,"y":1454},{"x":193,"y":1486},{"x":167,"y":1521},{"x":151,"y":1561},{"x":131,"y":1608},{"x":115,"y":1670},{"x":367,"y":1660},{"x":403,"y":1629}];

let facePath = [{"x":641,"y":419},{"x":639,"y":466},{"x":645,"y":493},{"x":655,"y":517},{"x":663,"y":539},{"x":667,"y":563},{"x":672,"y":589},{"x":685,"y":607},{"x":727,"y":632},{"x":763,"y":646},{"x":785,"y":651},{"x":808,"y":651},{"x":835,"y":646},{"x":857,"y":637},{"x":887,"y":618},{"x":921,"y":602},{"x":938,"y":591},{"x":954,"y":576},{"x":984,"y":502},{"x":1005,"y":399},{"x":956,"y":311},{"x":862,"y":245},{"x":777,"y":253},{"x":689,"y":260},{"x":637,"y":342},{"x":637,"y":377}];
let frontHairPath = [{"x":947,"y":604},{"x":946,"y":514},{"x":939,"y":505},{"x":939,"y":483},{"x":946,"y":446},{"x":942,"y":425},{"x":932,"y":423},{"x":901,"y":423},{"x":893,"y":417},{"x":871,"y":385},{"x":855,"y":368},{"x":840,"y":358},{"x":837,"y":343},{"x":844,"y":341},{"x":854,"y":341},{"x":866,"y":331},{"x":871,"y":319},{"x":871,"y":308},{"x":866,"y":301},{"x":861,"y":303},{"x":831,"y":325},{"x":793,"y":347},{"x":773,"y":357},{"x":766,"y":358},{"x":794,"y":329},{"x":803,"y":317},{"x":803,"y":311},{"x":797,"y":311},{"x":785,"y":318},{"x":749,"y":345},{"x":729,"y":357},{"x":698,"y":371},{"x":687,"y":373},{"x":684,"y":365},{"x":684,"y":350},{"x":687,"y":339},{"x":693,"y":332},{"x":693,"y":327},{"x":685,"y":327},{"x":673,"y":342},{"x":669,"y":354},{"x":666,"y":362},{"x":665,"y":386},{"x":660,"y":404},{"x":655,"y":426},{"x":653,"y":437},{"x":644,"y":449},{"x":634,"y":487},{"x":599,"y":407},{"x":611,"y":333},{"x":653,"y":271},{"x":737,"y":229},{"x":852,"y":223},{"x":930,"y":251},{"x":992,"y":314},{"x":1036,"y":409},{"x":1036,"y":496},{"x":993,"y":592},{"x":959,"y":614}];
let backHairPath = [{"x":764,"y":784},{"x":620,"y":789},{"x":571,"y":777},{"x":571,"y":785},{"x":605,"y":819},{"x":577,"y":818},{"x":548,"y":803},{"x":519,"y":789},{"x":493,"y":763},{"x":477,"y":737},{"x":465,"y":701},{"x":460,"y":668},{"x":451,"y":667},{"x":444,"y":681},{"x":444,"y":711},{"x":449,"y":729},{"x":463,"y":744},{"x":434,"y":732},{"x":413,"y":710},{"x":398,"y":685},{"x":393,"y":655},{"x":393,"y":608},{"x":386,"y":603},{"x":373,"y":609},{"x":337,"y":609},{"x":317,"y":600},{"x":317,"y":580},{"x":317,"y":571},{"x":300,"y":539},{"x":304,"y":519},{"x":313,"y":514},{"x":324,"y":498},{"x":335,"y":497},{"x":341,"y":487},{"x":339,"y":479},{"x":313,"y":468},{"x":284,"y":451},{"x":275,"y":445},{"x":265,"y":429},{"x":261,"y":414},{"x":259,"y":404},{"x":268,"y":391},{"x":273,"y":390},{"x":271,"y":396},{"x":271,"y":408},{"x":277,"y":414},{"x":363,"y":415},{"x":398,"y":395},{"x":421,"y":374},{"x":470,"y":328},{"x":519,"y":290},{"x":614,"y":214},{"x":670,"y":183},{"x":731,"y":167},{"x":772,"y":163},{"x":837,"y":171},{"x":880,"y":181},{"x":938,"y":207},{"x":1011,"y":233},{"x":1031,"y":251},{"x":1040,"y":280},{"x":1070,"y":308},{"x":1088,"y":335},{"x":1095,"y":360},{"x":1087,"y":374},{"x":1101,"y":401},{"x":1112,"y":429},{"x":1108,"y":449},{"x":1109,"y":466},{"x":1126,"y":491},{"x":1147,"y":514},{"x":1155,"y":542},{"x":1151,"y":576},{"x":1135,"y":607},{"x":1126,"y":629},{"x":1117,"y":648},{"x":1117,"y":666},{"x":1108,"y":687},{"x":1099,"y":705},{"x":1060,"y":715},{"x":1012,"y":738}];
let lipsPath = [{"x":740,"y":565},{"x":769,"y":521},{"x":778,"y":519},{"x":791,"y":524},{"x":803,"y":517},{"x":812,"y":517},{"x":823,"y":524},{"x":859,"y":558},{"x":858,"y":565},{"x":845,"y":579},{"x":830,"y":589},{"x":813,"y":597},{"x":780,"y":596},{"x":765,"y":590},{"x":751,"y":580},{"x":742,"y":571}];
              
            
!
999px

Console