resources/images/workers-focus.svg

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color: #000;" version="1.1" width="100%" height="100%" viewBox="-10 -10 700 500"><style>
    font, span {transition: opacity .5s ease-out;}
    path, rect {transition: fill-opacity .5s ease-out, stroke-opacity .5s ease-out;}
</style><defs><linearGradient x1="0%" y1="100%" x2="0%" y2="0%" id="mx-gradient-3e63dd-1-6c83dd-1-s-0"><stop offset="0%" style="stop-color: rgb(108, 131, 221); stop-opacity: 1;"/><stop offset="100%" style="stop-color: rgb(62, 99, 221); stop-opacity: 1;"/></linearGradient><linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="mx-gradient-ffcc99-1-fbc593-1-s-0"><stop offset="0%" style="stop-color: rgb(255, 204, 153); stop-opacity: 1;"/><stop offset="100%" style="stop-color: rgb(251, 197, 147); stop-opacity: 1;"/></linearGradient><linearGradient x1="0%" y1="100%" x2="0%" y2="0%" id="mx-gradient-008a00-1-00cc00-1-s-0"><stop offset="0%" style="stop-color: rgb(0, 204, 0); stop-opacity: 1;"/><stop offset="100%" style="stop-color: rgb(0, 138, 0); stop-opacity: 1;"/></linearGradient></defs><g><g data-cell-id="0"><g data-cell-id="1"><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-1"><g><path d="M 486.37 240 L 553.63 240" fill="none" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 481.12 240 L 488.12 236.5 L 486.37 240 L 488.12 243.5 Z" fill-opacity="var(--fill-opacity)" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="all"/><path d="M 558.88 240 L 551.88 243.5 L 553.63 240 L 551.88 236.5 Z" fill-opacity="var(--fill-opacity)" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-2"><g><path d="M 240.04 320 L 240 440 L 206.37 440" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 201.12 440 L 208.12 436.5 L 206.37 440 L 208.12 443.5 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-3"><g><rect x="200" y="160" width="280" height="160" rx="24" ry="24" fill="url(#mx-gradient-3e63dd-1-6c83dd-1-s-0)" stroke="#8ba6ff" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 278px; height: 1px; padding-top: 240px; margin-left: 201px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 16px;">App Worker</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-4"><g><rect x="360" y="280" width="120" height="40" rx="6" ry="6" fill="#cce5ff" stroke="#36393d" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 300px; margin-left: 361px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 13px;" color="#000000">Your App(s)</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-5"><g><rect x="200" y="160" width="120" height="40" rx="6" ry="6" fill="#cce5ff" stroke="#36393d" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 180px; margin-left: 201px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 13px;" color="#000000">Framework</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-6"><g><rect x="0" y="200" width="120" height="80" rx="12" ry="12" fill-opacity="var(--fill-opacity)" fill="url(#mx-gradient-3e63dd-1-6c83dd-1-s-0)" stroke="#8ba6ff" stroke-opacity="var(--stroke-opacity)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;  opacity: var(--fill-opacity);"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 240px; margin-left: 1px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span style="font-size: 13px;">Service Worker<br />(optional)</span></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-7"><g><path d="M 126.37 260 L 193.63 260" fill="none" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 121.12 260 L 128.12 256.5 L 126.37 260 L 128.12 263.5 Z" fill-opacity="var(--fill-opacity)" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="all"/><path d="M 198.88 260 L 191.88 263.5 L 193.63 260 L 191.88 256.5 Z" fill-opacity="var(--fill-opacity)" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-8"><g><path d="M 486.37 40 L 553.63 40" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 481.12 40 L 488.12 36.5 L 486.37 40 L 488.12 43.5 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><path d="M 558.88 40 L 551.88 43.5 L 553.63 40 L 551.88 36.5 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-9"><g><rect x="320" y="0" width="160" height="80" rx="12" ry="12" fill="url(#mx-gradient-3e63dd-1-6c83dd-1-s-0)" stroke="#8ba6ff" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 40px; margin-left: 321px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 15px;">Data Worker</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-10"><g><path d="M 400 153.63 L 400 86.37" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 400 158.88 L 396.5 151.88 L 400 153.63 L 403.5 151.88 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><path d="M 400 81.12 L 403.5 88.12 L 400 86.37 L 396.5 88.12 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-11"><g><rect x="560" y="0" width="120" height="80" rx="12" ry="12" fill="#647687" stroke="#314354" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 40px; margin-left: 561px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 14px;">Backend</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-12"><g><path d="M 620 286.37 L 620 340 L 620 393.63" fill="none" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 620 281.12 L 623.5 288.12 L 620 286.37 L 616.5 288.12 Z" fill-opacity="var(--fill-opacity)" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="all"/><path d="M 620 398.88 L 616.5 391.88 L 620 393.63 L 623.5 391.88 Z" fill-opacity="var(--fill-opacity)" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-13"><g><rect x="560" y="200" width="120" height="80" rx="12" ry="12" fill-opacity="var(--fill-opacity)" fill="url(#mx-gradient-ffcc99-1-fbc593-1-s-0)" stroke="#994c00" stroke-opacity="var(--stroke-opacity)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;  opacity: var(--fill-opacity);"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 240px; margin-left: 561px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 13px;" color="#000000">Canvas Worker<br />(optional)</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-14"><g><rect x="280" y="400" width="400" height="80" rx="12" ry="12" fill="url(#mx-gradient-008a00-1-00cc00-1-s-0)" stroke="#005700" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 398px; height: 1px; padding-top: 440px; margin-left: 281px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 13px;">Main Thread<br />(Browser Window)</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-15"><g><path d="M 200 460 L 273.63 460" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 278.88 460 L 271.88 463.5 L 273.63 460 L 271.88 456.5 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-16"><g><rect x="0" y="400" width="200" height="80" rx="12" ry="12" fill="url(#mx-gradient-3e63dd-1-6c83dd-1-s-0)" stroke="#8ba6ff" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 198px; height: 1px; padding-top: 440px; margin-left: 1px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 13px;">VDom Worker<br />(optional)</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-17"><g><rect x="280" y="440" width="120" height="40" rx="6" ry="6" fill="url(#mx-gradient-ffcc99-1-fbc593-1-s-0)" stroke="#994c00" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 460px; margin-left: 281px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 13px;" color="#000000">DOM Operations</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-18"><g><rect x="560" y="400" width="120" height="40" rx="6" ry="6" fill-opacity="var(--fill-opacity)" fill="url(#mx-gradient-ffcc99-1-fbc593-1-s-0)" stroke="#994c00" stroke-opacity="var(--stroke-opacity)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;  opacity: var(--fill-opacity);"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 420px; margin-left: 561px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 13px;" color="#000000">Canvas</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-19"><g><path d="M 340 326.37 L 340 393.63" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 340 321.12 L 343.5 328.12 L 340 326.37 L 336.5 328.12 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><path d="M 340 398.88 L 336.5 391.88 L 340 393.63 L 343.5 391.88 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-20"><g><rect x="80" y="0" width="160" height="80" rx="12" ry="12" fill-opacity="var(--fill-opacity)" fill="url(#mx-gradient-3e63dd-1-6c83dd-1-s-0)" stroke="#8ba6ff" stroke-opacity="var(--stroke-opacity)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;  opacity: var(--fill-opacity);"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 40px; margin-left: 81px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 14px;">Task Worker<br />(optional)</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-21"><g><path d="M 160 86.37 L 160 240 L 193.63 240" fill="none" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 160 81.12 L 163.5 88.12 L 160 86.37 L 156.5 88.12 Z" fill-opacity="var(--fill-opacity)" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="all"/><path d="M 198.88 240 L 191.88 243.5 L 193.63 240 L 191.88 236.5 Z" fill-opacity="var(--fill-opacity)" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="all"/></g></g></g></g></g></svg>