<!-- Based on a drawing by @elCreata: https://twitter.com/elCreata/status/1412329674458476545 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2162 2162" id="frida" class="hair-decoration move-eyes blink">
  <g stroke="none" stroke-width="0" fill="none">
    <path id="ears" fill="#d97" d="M 724,1302 C 670,1204 556,1224 616,1300 676,1376 682,1456 724,1454 766,1452 788,1400 794,1374 800,1348 1358,1424 1358,1424 1358,1424 1424,1486 1448,1414 1474,1336 1538,1290 1546,1256 1554,1222 1500,1192 1444,1250" />
    <path id="body" fill="#da8" d="M 945,2238 C 1131,1863 1104,1725 882,1572 660,1419 432,549 1086,519 1740,489 1479,1329 1296,1590 1113,1851 1236,2073 1302,2226" />
    <path id="lip-top" fill="#902" d="M 998,1462 C 1072,1462 1149,1465 1219,1462 1166,1417 1118,1435 1109,1448 1101,1435 1037,1416 998,1461" />
    <path id="lip-bottom" fill="#a24" d="M 998,1462 C 1096,1462 1184,1462 1220,1462 1192,1508 1084,1564 998,1462" />
    <path id="eyebrow1" fill="#000" d="M 1040,1079 C 933,1018 791,1043 731,1139 834,1085 971,1081 1041,1134" />
    <path id="eyebrow2" fill="#000" d="M 1154,1135 C 1221,1100 1364,1065 1426,1102 1342,1016 1208,1051 1152,1080" />
    <path id="eye1" fill="#fff" d="M 777,1157 C 814,1126 977,1123 1021,1169 976,1251 828,1269 777,1157" />
    <path id="eye2" fill="#fff" d="M 1170,1165 C 1221,1252 1344,1273 1413,1156 1334,1119 1252,1110 1170,1166" />
    <g id="pupils">
      <circle cx="903" cy="1191" r="40" fill="#000" />
      <circle cx="923" cy="1191" r="13" fill="#fff" />
      <circle cx="908" cy="1176" r="7" fill="#eee" />
      <circle cx="1293" cy="1191" r="40" fill="#000" />
      <circle cx="1313" cy="1191" r="13" fill="#fff" />
      <circle cx="1296" cy="1178" r="7" fill="#eee" />
    </g>
    <g stroke="#b76" stroke-width="5">
      <path id="ear-line1" fill="none" d="M 1482,1294 C 1460,1306 1409,1365 1409,1365 1409,1365 1449,1388 1405,1408" />
      <path id="ear-line2" fill="none" d="M 646,1290 C 675,1299 732,1360 741,1383 718,1374 705,1398 717,1410" />
      <path id="nose" fill="none" d="M 1073,1326 C 1037,1310 1040,1375 1077,1357 1069,1392 1139,1395 1137,1355 1167,1368 1170,1311 1135,1324" />
    </g>
    <path id="eyelid1" fill="#c86" d="M 769,1158 C 870,1162 989,1167 1027,1168 903,1055 816,1126 768,1158" />
    <path id="eyelid2" fill="#c86" d="M 1167,1167 C 1260,1163 1343,1159 1419,1157 1357,1078 1220,1090 1166,1167" />
    <path id="unibrow" stroke="#000" stroke-width="7" d="M 1040,1132 1055,1083 1065,1132 1076,1084 1085,1136 1097,1079 1110,1138 1118,1084 1131,1133 1137,1085 1155,1133" />
    <path id="shirt" fill="#131" d="M 1002,2079 C 1071,2118 1161,2163 1254,2097 1269,2175 1284,2235 1284,2235 1284,2235 957,2268 957,2268" />
    <path id="jacket" fill="#000" d="M 814,2196 C 966,2084 1037,2020 1037,2020 1037,2020 1044,2206 1044,2206 1044,2206 1220,2196 1220,2196 1220,2196 1218,2009 1218,2009 1218,2009 1288,2140 1406,2206" />
    <path id="hair" fill="#000" d="M 731,1353 C 634,1037 679,736 1063,733 1065,734 1093,652 1093,651 1095,651 1097,735 1097,734 1486,746 1565,964 1417,1349 1516,1226 1572,1028 1580,904 1652,884 1686,678 1570,670 1628,622 1594,460 1484,496 1510,386 1436,362 1392,386 1406,274 1274,230 1208,292 1216,204 1032,178 1024,304 986,248 846,228 824,356 798,318 702,358 738,428 614,390 562,532 616,606 508,594 464,814 586,854 554,1012 646,1262 732,1354" />
    <g id="hair-decoration">
      <path id="hairband" fill="#4aa" d="M 650,978 C 608,316 1598,198 1518,1002 1542,316 684,342 650,976" />
      <path id="leaves" fill="#063" d="M 1010,290 C 1002,198 1036,202 1032,194 1028,186 1030,270 1108,294 1186,318 1312,394 1312,394 1312,394 1400,340 1400,340 1400,340 1380,380 1380,380 1380,380 1408,368 1408,368 1408,368 1408,464 1408,464 1408,464 1498,632 1552,622 1520,646 1412,610 1388,552 1364,494 1132,566 1132,566 1132,566 1062,634 1014,640 1034,624 1064,580 1064,580 1064,580 996,612 996,612 996,612 1004,394 1004,394" />
      <path id="flowers" fill="#e44" d="M 1080,540 C 951,651 816,603 798,519 768,522 744,444 819,288 798,279 1047,183 1065,312 1089,279 1071,216 1071,216 1071,216 1098,240 1098,240 1098,240 1110,204 1110,204 1110,204 1146,228 1146,228 1146,228 1221,156 1221,156 1191,222 1293,228 1263,279 1283,259 1368,312 1368,312 1368,312 1374,393 1359,417 1419,372 1431,414 1479,366 1521,405 1497,453 1497,453 1497,453 1545,468 1545,468 1545,468 1536,504 1536,504 1536,504 1533,675 1416,618 1422,690 1308,669 1311,633 1263,672 1110,651 1083,543" />
      <path id="flowers-llight" fill="#f78" d="M 1106,516 C 1140,544 1220,472 1184,476 1148,480 1158,484 1188,430 1120,490 1112,376 1186,436 1186,422 1178,382 1154,388 1068,396 1076,484 1076,484M 872,452 C 896,386 904,342 884,292 958,252 1018,316 1038,364 1058,412 1040,508 924,468 998,444 994,376 926,432 900,452 872,456 872,456M 1106,204 C 1106,204 1108,218 1098,242 1122,274 1120,354 1120,354 1120,354 1186,236 1218,236 1250,236 1146,264 1146,264 1160,230 1132,214 1110,200M 1348,608 C 1370,644 1420,650 1420,582 1406,608 1390,622 1362,584M 1396,528 C 1456,516 1492,476 1498,462 1504,448 1486,504 1486,504 1486,504 1516,502 1516,502 1516,502 1488,542 1398,552M 1206,546 C 1206,414 1314,410 1378,462 1342,470 1352,538 1352,538 1352,538 1330,628 1258,578 1302,572 1332,510 1254,532 1176,554 1206,548 1206,548M 1242,356 C 1242,356 1248,392 1240,406 1286,394 1354,390 1364,312 1348,326 1320,364 1242,354" />
      <path id="flowers-dark" fill="#b23" d="M 1078,536 C 1028,592 886,656 836,516 888,552 958,596 1064,494 1040,460 1064,386 1126,394 1100,404 1082,464 1100,484 1106,458 1134,446 1134,446 1134,446 1112,490 1122,506 1132,522 1190,514 1200,486 1198,530 1146,554 1130,550 1142,592 1240,670 1324,628 1202,698 1086,602 1080,536M 832,458 C 772,398 846,356 838,306 870,312 898,400 882,422 878,426 860,388 860,388 860,388 826,428 834,458M 1182,406 C 1186,432 1184,454 1170,466 1222,460 1202,420 1182,406M 1184,328 C 1204,280 1150,228 1226,148 1184,208 1298,230 1264,286 1236,322 1192,328 1186,328M 1346,438 C 1406,470 1400,502 1394,530 1452,524 1556,440 1474,364 1446,422 1386,358 1348,440M 1402,552 C 1470,544 1512,514 1512,514 1512,514 1456,574 1412,574" />
    </g>
  </g>
</svg>

<button type="button" onclick="runSpeechRecognition()">Click and speak to Frida in Spanish</button>
<div id="output"></div>
<p>Only works on Chrome for now :-/</p>

body {
  background: #d8ddd8;
}

button {
  background: transparent;
  display: flex;
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

#output {
  pointer-events: none;
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, 0);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 6vmin;
  width: 80%;
  text-align: center;
  color: white;
  text-transform: uppercase;
  text-shadow: 0 -1px #000, 1px -1px #000, 1px 0 #000, 1px 1px #000, 0 1px #000, -1px 1px #000, -1px 0 #000, -1px -1px #000;
}

svg {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 99vmin;
  z-index: -1;
}

svg #eyebrow1 {
  transition: transform 1s;
  transform-origin: 48% 52%;
}

svg.listening #eyebrow1 {
  transform: rotate(11deg);
}

@keyframes blink1 {
  0%, 3%, 100% {
    d: path("M 769 1158 C 870 1162 989 1167 1027 1168 C 903 1055 816 1126 768 1158");
  }
  1.5% {
    d: path("M 769,1158 C 880,1320 1007,1204 1027,1168 903,1055 816,1126 768,1158")
  }
}

@keyframes blink2 {
  0%, 3%, 100% {
    d: path("M 1167,1167 C 1260,1163 1343,1159 1419,1157 1357,1078 1220,1090 1166,1167");
  }
  1.5% {
    d: path("M 1167,1167 C 1229,1257 1341,1271 1419,1157 1357,1078 1220,1090 1166,1167")
  }
}

svg #eyelid1 {
  d: path("M 769,1158 C 880,1320 1007,1204 1027,1168 903,1055 816,1126 768,1158");
  animation: blink1 10s infinite;
}

svg #eyelid2 {
  d: path("M 1167,1167 C 1260,1163 1343,1159 1419,1157 1357,1078 1220,1090 1166,1167");
  animation: blink2 10s infinite;
}

@keyframes moveEyes {
  0%, 100% {
    transform: translate(0, 0);
  }
  15% {
    transform: translate(1%, -0.5%);
  }
  50% {
    transform: translate(-1%, 0);
  }
  75% {
    transform: translate(0, -0.5%);
  }
}

svg #pupils {
  animation: moveEyes 60s infinite linear;
}

@keyframes speaking {
  0%, 100% {
    d: path("M 998,1462 C 1096,1462 1184,1462 1220,1462 1192,1508 1084,1564 998,1462")
  }
  50% {
    d: path("M 998,1462 C 1065,1476 1154,1482 1220,1462 1179,1524 1084,1564 998,1462")
  }
}

svg.speaking #lip-bottom {
  animation: speaking 0.6s infinite;
}

function runSpeechRecognition() {
  const frida = document.querySelector("#frida");
  const texto = document.querySelector("#output");

  // new speech recognition object in Spanish!
  var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
  const recognition = new SpeechRecognition();
  recognition.lang = "es";

  // This runs when the speech recognition service starts
  recognition.onstart = function () {
    frida.classList.add("listening");
  };

  // stop listenting the speech recognition
  recognition.onspeechend = function () {
    recognition.stop();
  }

  // This runs when the speech recognition service returns result
  recognition.onresult = function (event) {
    const transcript = event.results[0][0].transcript.toLowerCase();
    const confidence = event.results[0][0].confidence;

    let textToSpeak = "Perdón. No comprendí.";

    // only run the special sentences if confidence is "high"
    if (confidence > 0.75) {
      const dias = ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"];
      const meses = ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"];
      const d = new Date();

      if ((transcript.indexOf(" día") > -1 || transcript.indexOf(" dia") > -1) && transcript.indexOf(" hoy") > -1) {
        textToSpeak = `Hoy es ${dias[d.getDay()]}`;
      } else if ((transcript.indexOf(" día") > -1 || transcript.indexOf(" dia") > -1) && transcript.indexOf(" mañana") > -1) {
        const n = d.getDay();
        textToSpeak = `Mañana será ${dias[(n + 1) % 7]}`;
      } else if (transcript.indexOf("hora") > -1) {
        let hour = d.getHours();
        if (hour > 12) hour -= 12;
        if (hour === 0) hour = 12;
        const minutes = d.getMinutes();
        let textMinutes = `y ${minutes} minutos`;
        if (minutes === 0) { textMinutes = "en punto"; }
        if (minutes === 1) { textMinutes = "y 1 minuto"; }
        if (minutes === 15) { textMinutes = "y cuarto"; }
        if (minutes === 30) { textMinutes = "y media"; }
        textToSpeak = `Son las ${hour} ${textMinutes}`;
      } else if (transcript.indexOf(" fecha") > -1 && transcript.indexOf(" hoy") > -1) {
        textToSpeak = `Hoy es ${d.getDate()} de ${meses[d.getMonth()]}`;
      } else if (transcript.indexOf(" fecha") > -1 && transcript.indexOf(" mañana") > -1) {
        d.setDate(d.getDate() + 1)
        textToSpeak = `Mañana será ${d.getDate()} de ${meses[d.getMonth()]}`;
      } else if (transcript.indexOf(" mejor") > -1 && transcript.indexOf(" profesora") > -1) {
        textToSpeak = `Jill Montoro es la mejor profesora`;
      } else if (transcript === "hola" || transcript === "hola frida") {
        textToSpeak = `¡Hola!`;
      } else if ((transcript.indexOf("como") > -1 || transcript.indexOf("cómo") > -1) && transcript.indexOf("llamas") > -1) {
        textToSpeak = "Me llamo Frida. ¿Cómo te llamas tú?"
      } else if ((transcript.indexOf("como") > -1 || transcript.indexOf("cómo") > -1) && (transcript.indexOf("estas") > -1 || transcript.indexOf("estás"))) {
        textToSpeak = "Estoy bien, ¿y tú?"
      }
    }

    // show the closed captioned and remove after 3 seconds
    texto.textContent = textToSpeak;
    setTimeout(function () {
      texto.textContent = "";
    }, 3000)

    // read out loud the answer
    let speech = new SpeechSynthesisUtterance();
    speech.lang = "es-MX";
    speech.text = textToSpeak;
    speech.onend = function (event) {
      console.log(event.elapsedTime);
      setTimeout(function () {
        frida.classList.remove("speaking");
      }, 600 - (event.elapsedTime % 600));
    }
    frida.classList.remove("listening");
    frida.classList.add("speaking");
    window.speechSynthesis.speak(speech);
  };

  // start recognition
  recognition.start();
}