before port to png

2015-04-18 00:58:09 +03:00 · 2015-04-18 00:58:09 +03:00 · ca2adc84ba
commit ca2adc84ba
parent 651a08b270
60 changed files with 206 additions and 384 deletions
--- a/1-js/3-writing-js/2-coding-style/code-style.svg
+++ b/1-js/3-writing-js/2-coding-style/code-style.svg
--- a/1-js/3-writing-js/2-coding-style/figure-bracket-style.svg
+++ b/1-js/3-writing-js/2-coding-style/figure-bracket-style.svg
--- a/1-js/4-data-structures/3-string/article.md
+++ b/1-js/4-data-structures/3-string/article.md
@ -525,7 +525,7 @@ alert( str.localeCompare("Яблони") ); // -1
 <ul>
 <li>Строки в JavaScript имеют внутреннюю кодировку Юникод. При написании строки можно использовать специальные символы, например `\n` и вставлять юникодные символы по коду.</li>
-<li>Мы познакомились со свойством `length` и методами `charAt`, `toLowerCase/toUpperCase`, `substring/substr/slice` (предпочтителен `slice`)</li>
+<li>Мы познакомились со свойством `length` и методами `charAt`, `toLowerCase/toUpperCase`, `substring/substr/slice` (предпочтителен `slice`). Есть и другие методы, например [trim](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim) обрезает пробелы с начала и конца строки.</li>
 <li>Строки сравниваются побуквенно. Поэтому если число получено в виде строки, то такие числа могут сравниваться некорректно, нужно преобразовать его к типу *number*.</li>
 <li>При сравнении строк следует иметь в виду, что буквы сравниваются по их кодам. Поэтому большая буква меньше маленькой, а буква `ё` вообще вне основного алфавита.</li>
 <li>Для правильного сравнения существует целый стандарт ECMA 402. Это не такое простое дело, много языков и много правил. Он поддерживается во всех современных браузерах, кроме IE10-, в которых нужна библиотека [](https://github.com/andyearnshaw/Intl.js/). Такое сравнение работает через вызов `str1.localeCompare(str2)`.</li>
--- a/1-js/4-data-structures/4-object/object-person-empty.svg
+++ b/1-js/4-data-structures/4-object/object-person-empty.svg
@ -14,7 +14,6 @@
                <tspan x="41.3417969" y="17">person</tspan>
            </text>
            <path d="M66,26 L66,45" id="Line-8" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-8-decoration-1" d="M66,45 C67.05,41.22 67.95,37.98 69,34.2 C66.9,34.2 65.1,34.2 63,34.2 C64.05,37.98 64.95,41.22 66,45 C66,45 66,45 66,45 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
        </g>
    </g>
 </svg>
--- a/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/linked-list.svg
+++ b/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/linked-list.svg
@ -14,7 +14,6 @@
                <tspan x="45" y="50">1</tspan>
            </text>
            <path d="M75.73,45 L147.27,45" id="Line-21" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-21-decoration-1" d="M146.73,45 C142.95,43.95 139.71,43.05 135.93,42 C135.93,44.1 135.93,45.9 135.93,48 C139.71,46.95 142.95,46.05 146.73,45 C146.73,45 146.73,45 146.73,45 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="next" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
                <tspan x="99" y="34">next</tspan>
            </text>
@ -26,7 +25,6 @@
                <tspan x="185" y="50">2</tspan>
            </text>
            <path d="M215.73,45 L287.27,45" id="Line-22" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-22-decoration-1" d="M286.73,45 C282.95,43.95 279.71,43.05 275.93,42 C275.93,44.1 275.93,45.9 275.93,48 C279.71,46.95 282.95,46.05 286.73,45 C286.73,45 286.73,45 286.73,45 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="next-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
                <tspan x="239" y="34">next</tspan>
            </text>
@ -38,7 +36,6 @@
                <tspan x="324" y="50">3</tspan>
            </text>
            <path d="M354.73,45 L426.27,45" id="Line-23" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-23-decoration-1" d="M425.73,45 C421.95,43.95 418.71,43.05 414.93,42 C414.93,44.1 414.93,45.9 414.93,48 C418.71,46.95 421.95,46.05 425.73,45 C425.73,45 425.73,45 425.73,45 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="next-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
                <tspan x="378" y="34">next</tspan>
            </text>
@ -50,7 +47,6 @@
                <tspan x="464" y="50">4</tspan>
            </text>
            <path d="M494.73,45 L566.27,45" id="Line-24" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-24-decoration-1" d="M565.73,45 C561.95,43.95 558.71,43.05 554.93,42 C554.93,44.1 554.93,45.9 554.93,48 C558.71,46.95 561.95,46.05 565.73,45 C565.73,45 565.73,45 565.73,45 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="next-4" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
                <tspan x="518" y="34">next</tspan>
            </text>
--- a/1-js/4-data-structures/9-array-iteration/reduce.svg
+++ b/1-js/4-data-structures/9-array-iteration/reduce.svg
@ -57,7 +57,6 @@
                <tspan x="331" y="65">5</tspan>
            </text>
            <path d="M420.5,92 L470.5,92" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M470.5,92 C466.72,90.95 463.48,90.05 459.7,89 C459.7,91.1 459.7,92.9 459.7,95 C463.48,93.95 466.72,93.05 470.5,92 C470.5,92 470.5,92 470.5,92 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="0+1+2+3+4+5-=-15" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
                <tspan x="485" y="96">0+1+2+3+4+5 = 15</tspan>
            </text>
--- a/1-js/5-functions-closures/6-memory-management/family-no-family.svg
+++ b/1-js/5-functions-closures/6-memory-management/family-no-family.svg
@ -7,7 +7,6 @@
    <g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="family-no-family.svg" sketch:type="MSArtboardGroup">
            <path d="M256.5,233.5 L197.5,233.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M197.5,233.5 C201.28,234.55 204.52,235.45 208.3,236.5 C208.3,234.4 208.3,232.6 208.3,230.5 C204.52,231.55 201.28,232.45 197.5,233.5 C197.5,233.5 197.5,233.5 197.5,233.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="167" y="24" width="120" height="50"></rect>
            <text id="window" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
                <tspan x="201" y="17">window</tspan>
@ -43,14 +42,11 @@
                <tspan x="308" y="208">Object</tspan>
            </text>
            <path d="M178.5,155.5 L132.5,187.5" id="Line-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-2-decoration-1" d="M132.529309,187.479611 C136.231948,186.182938 139.405639,185.071504 143.108278,183.77483 C141.909043,182.05093 140.881127,180.5733 139.681891,178.849399 C137.178487,181.869973 135.032713,184.459037 132.529309,187.479611 C132.529309,187.479611 132.529309,187.479611 132.529309,187.479611 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M197.5,199.5 L258.5,199.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M258.5,199.5 C254.72,198.45 251.48,197.55 247.7,196.5 C247.7,198.6 247.7,200.4 247.7,202.5 C251.48,201.45 254.72,200.55 258.5,199.5 C258.5,199.5 258.5,199.5 258.5,199.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="husband" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
                <tspan x="200" y="224">husband</tspan>
            </text>
            <path d="M272.5,155.5 L319.5,187.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M318.789558,187.016295 C316.255943,184.021016 314.084274,181.453634 311.550659,178.458354 C310.368798,180.194213 309.355774,181.682091 308.173913,183.41795 C311.889389,184.677371 315.074082,185.756874 318.789558,187.016295 C318.789558,187.016295 318.789558,187.016295 318.789558,187.016295 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <rect id="Rectangle-5" stroke="#D0011B" stroke-width="2" sketch:type="MSShapeGroup" x="47" y="111" width="366" height="152"></rect>
            <text id="family:-null" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
                <tspan x="181" y="66">family: null</tspan>
--- a/1-js/5-functions-closures/6-memory-management/family-no-father-2.svg
+++ b/1-js/5-functions-closures/6-memory-management/family-no-father-2.svg
@ -31,9 +31,7 @@
                <tspan x="52" y="177">Object</tspan>
            </text>
            <path d="M74.5,56.5 L74.5,87.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M74.5,87.5 C75.55,83.72 76.45,80.48 77.5,76.7 C75.4,76.7 73.6,76.7 71.5,76.7 C72.55,80.48 73.45,83.72 74.5,87.5 C74.5,87.5 74.5,87.5 74.5,87.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M73.5,123.5 L73.5,155.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M73.5,155.5 C74.55,151.72 75.45,148.48 76.5,144.7 C74.4,144.7 72.6,144.7 70.5,144.7 C71.55,148.48 72.45,151.72 73.5,155.5 C73.5,155.5 73.5,155.5 73.5,155.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
        </g>
    </g>
 </svg>
--- a/1-js/5-functions-closures/6-memory-management/family-no-father.svg
+++ b/1-js/5-functions-closures/6-memory-management/family-no-father.svg
@ -41,11 +41,8 @@
                <tspan x="308" y="180">Object</tspan>
            </text>
            <path d="M227.5,59.5 L227.5,90.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M227.5,90.5 C228.55,86.72 229.45,83.48 230.5,79.7 C228.4,79.7 226.6,79.7 224.5,79.7 C225.55,83.48 226.45,86.72 227.5,90.5 C227.5,90.5 227.5,90.5 227.5,90.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M197.5,171.5 L258.5,171.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M258.5,171.5 C254.72,170.45 251.48,169.55 247.7,168.5 C247.7,170.6 247.7,172.4 247.7,174.5 C251.48,173.45 254.72,172.55 258.5,171.5 C258.5,171.5 258.5,171.5 258.5,171.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M272.5,127.5 L319.5,159.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M318.789558,159.016295 C316.255943,156.021016 314.084274,153.453634 311.550659,150.458354 C310.368798,152.194213 309.355774,153.682091 308.173913,155.41795 C311.889389,156.677371 315.074082,157.756874 318.789558,159.016295 C318.789558,159.016295 318.789558,159.016295 318.789558,159.016295 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <rect id="Rectangle-5" stroke="#D0011B" stroke-width="2" sketch:type="MSShapeGroup" x="47" y="133" width="219" height="101"></rect>
            <g id="noun_48910_cc" sketch:type="MSLayerGroup" transform="translate(7.000000, 131.000000)">
                <path d="M17.5030263,1.75054945 L12.4969737,1.75054945 C12.3098684,1.75054945 12.1571053,1.90364835 12.1571053,2.09156044 L12.1571053,3.21745055 L17.8432895,3.21745055 L17.8432895,2.09156044 C17.8432895,1.90364835 17.6905263,1.75054945 17.5030263,1.75054945 L17.5030263,1.75054945 Z" id="Shape" sketch:type="MSShapeGroup"></path>
--- a/1-js/5-functions-closures/6-memory-management/family.svg
+++ b/1-js/5-functions-closures/6-memory-management/family.svg
@ -7,7 +7,6 @@
    <g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="family.svg" sketch:type="MSArtboardGroup">
            <path d="M192.5,201.5 L133.5,201.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M133.5,201.5 C137.28,202.55 140.52,203.45 144.3,204.5 C144.3,202.4 144.3,200.6 144.3,198.5 C140.52,199.55 137.28,200.45 133.5,201.5 C133.5,201.5 133.5,201.5 133.5,201.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="122" y="23" width="80" height="30"></rect>
            <text id="window" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
                <tspan x="122" y="16">window</tspan>
@ -46,16 +45,12 @@
                <tspan x="244" y="176">Object</tspan>
            </text>
            <path d="M163.5,55.5 L163.5,86.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M163.5,86.5 C164.55,82.72 165.45,79.48 166.5,75.7 C164.4,75.7 162.6,75.7 160.5,75.7 C161.55,79.48 162.45,82.72 163.5,86.5 C163.5,86.5 163.5,86.5 163.5,86.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M114.5,123.5 L68.5,155.5" id="Line-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-2-decoration-1" d="M68.5293087,155.479611 C72.2319481,154.182938 75.405639,153.071504 79.1082783,151.77483 C77.9090429,150.05093 76.8811268,148.5733 75.6818914,146.849399 C73.1784875,149.869973 71.0327127,152.459037 68.5293087,155.479611 C68.5293087,155.479611 68.5293087,155.479611 68.5293087,155.479611 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M133.5,167.5 L194.5,167.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M194.5,167.5 C190.72,166.45 187.48,165.55 183.7,164.5 C183.7,166.6 183.7,168.4 183.7,170.5 C187.48,169.45 190.72,168.55 194.5,167.5 C194.5,167.5 194.5,167.5 194.5,167.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="husband" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
                <tspan x="136" y="192">husband</tspan>
            </text>
            <path d="M208.5,123.5 L255.5,155.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M254.789558,155.016295 C252.255943,152.021016 250.084274,149.453634 247.550659,146.458354 C246.368798,148.194213 245.355774,149.682091 244.173913,151.41795 C247.889389,152.677371 251.074082,153.756874 254.789558,155.016295 C254.789558,155.016295 254.789558,155.016295 254.789558,155.016295 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
        </g>
    </g>
 </svg>
--- a/1-js/6-objects-more/2-object-conversion/article.md
+++ b/1-js/6-objects-more/2-object-conversion/article.md
@ -232,7 +232,7 @@ if (value) {
 }
 ```
-Дело в том, что `new Boolean` -- это не примитивное значение, а объект. Поэтому в логическом контексте он преобразуется к`true`, в результате работает первый пример.
+Дело в том, что `new Boolean` -- это не примитивное значение, а объект. Поэтому в логическом контексте он преобразуется к `true`, в результате работает первый пример.
 А второй пример вызывает `alert`, который преобразует объект к строке, и он становится `"false"`. 
--- a/1-js/9-prototypes/1-prototype/proto-animal-rabbit.svg
+++ b/1-js/9-prototypes/1-prototype/proto-animal-rabbit.svg
@ -21,7 +21,6 @@
                <tspan x="13" y="103">rabbit</tspan>
            </text>
            <path d="M73.5,101.5 L73.5,60.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M73.5,60.5 C72.45,64.28 71.55,67.52 70.5,71.3 C72.6,71.3 74.4,71.3 76.5,71.3 C75.45,67.52 74.55,64.28 73.5,60.5 C73.5,60.5 73.5,60.5 73.5,60.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
                <tspan x="83" y="82">__proto__</tspan>
            </text>
--- a/1-js/9-prototypes/3-native-prototypes/native-prototypes-array-tostring.svg
+++ b/1-js/9-prototypes/3-native-prototypes/native-prototypes-array-tostring.svg
@ -24,12 +24,10 @@
            </text>
            <rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="16" y="277" width="200" height="30"></rect>
            <path d="M76.5,268.5 L76.5,227.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M76.5,227.5 C75.45,231.28 74.55,234.52 73.5,238.3 C75.6,238.3 77.4,238.3 79.5,238.3 C78.45,234.52 77.55,231.28 76.5,227.5 C76.5,227.5 76.5,227.5 76.5,227.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
                <tspan x="86" y="249">__proto__</tspan>
            </text>
            <path d="M76.5,136.5 L76.5,95.5" id="Line-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-2-decoration-1" d="M76.5,95.5 C75.45,99.28 74.55,102.52 73.5,106.3 C75.6,106.3 77.4,106.3 79.5,106.3 C78.45,102.52 77.55,99.28 76.5,95.5 C76.5,95.5 76.5,95.5 76.5,95.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="__proto__-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
                <tspan x="86" y="117">__proto__</tspan>
            </text>
--- a/1-js/9-prototypes/3-native-prototypes/native-prototypes-classes.svg
+++ b/1-js/9-prototypes/3-native-prototypes/native-prototypes-classes.svg
@ -15,12 +15,10 @@
                <tspan x="239" y="85">Object.prototype</tspan>
            </text>
            <path d="M299.5,68.5 L299.5,27.5" id="Line-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-2-decoration-1" d="M299.5,27.5 C298.45,31.28 297.55,34.52 296.5,38.3 C298.6,38.3 300.4,38.3 302.5,38.3 C301.45,34.52 300.55,31.28 299.5,27.5 C299.5,27.5 299.5,27.5 299.5,27.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="__proto__-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
                <tspan x="309" y="49">__proto__</tspan>
            </text>
            <path d="M299.5,201.5 L299.5,160.5" id="Line-3" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-3-decoration-1" d="M299.5,160.5 C298.45,164.28 297.55,167.52 296.5,171.3 C298.6,171.3 300.4,171.3 302.5,171.3 C301.45,167.52 300.55,164.28 299.5,160.5 C299.5,160.5 299.5,160.5 299.5,160.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="null" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
                <tspan x="285" y="16">null</tspan>
            </text>
@ -58,9 +56,7 @@
                <tspan x="541" y="182">__proto__</tspan>
            </text>
            <path d="M142.5,193.5 L220.5,157.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M219.676548,157.880055 C215.80445,158.510737 212.485509,159.051323 208.613412,159.682005 C209.493434,161.58872 210.247739,163.223047 211.127761,165.129761 C214.119836,162.592364 216.684472,160.417452 219.676548,157.880055 C219.676548,157.880055 219.676548,157.880055 219.676548,157.880055 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M539.5,193.5 L462.5,157.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M462.5,157.5 C465.479529,160.052118 468.033412,162.239647 471.012941,164.791765 C471.902353,162.889412 472.664706,161.258824 473.554118,159.356471 C469.685176,158.706706 466.368941,158.149765 462.5,157.5 C462.5,157.5 462.5,157.5 462.5,157.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <rect id="Rectangle-5" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="47" y="338" width="119" height="25"></rect>
            <text id="[1,-2,-3]" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
                <tspan x="71" y="354">[1, 2, 3]</tspan>
@ -76,17 +72,14 @@
                <tspan x="573" y="355">5</tspan>
            </text>
            <path d="M299.5,331.5 L299.5,290.5" id="Line-4" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-4-decoration-1" d="M299.5,290.5 C298.45,294.28 297.55,297.52 296.5,301.3 C298.6,301.3 300.4,301.3 302.5,301.3 C301.45,297.52 300.55,294.28 299.5,290.5 C299.5,290.5 299.5,290.5 299.5,290.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="__proto__-5" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
                <tspan x="309" y="312">__proto__</tspan>
            </text>
            <path d="M576.5,331.5 L576.5,290.5" id="Line-5" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-5-decoration-1" d="M576.5,290.5 C575.45,294.28 574.55,297.52 573.5,301.3 C575.6,301.3 577.4,301.3 579.5,301.3 C578.45,297.52 577.55,294.28 576.5,290.5 C576.5,290.5 576.5,290.5 576.5,290.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="__proto__-6" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
                <tspan x="586" y="312">__proto__</tspan>
            </text>
            <path d="M106.5,331.5 L106.5,290.5" id="Line-6" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-6-decoration-1" d="M106.5,290.5 C105.45,294.28 104.55,297.52 103.5,301.3 C105.6,301.3 107.4,301.3 109.5,301.3 C108.45,297.52 107.55,294.28 106.5,290.5 C106.5,290.5 106.5,290.5 106.5,290.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="__proto__-7" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
                <tspan x="116" y="312">__proto__</tspan>
            </text>
--- a/1-js/9-prototypes/3-native-prototypes/native-prototypes-object.svg
+++ b/1-js/9-prototypes/3-native-prototypes/native-prototypes-object.svg
@ -19,12 +19,10 @@
                <tspan x="13" y="205">obj</tspan>
            </text>
            <path d="M73.5,203.5 L73.5,162.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M73.5,162.5 C72.45,166.28 71.55,169.52 70.5,173.3 C72.6,173.3 74.4,173.3 76.5,173.3 C75.45,169.52 74.55,166.28 73.5,162.5 C73.5,162.5 73.5,162.5 73.5,162.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
                <tspan x="83" y="184">__proto__</tspan>
            </text>
            <path d="M73.5,71.5 L73.5,30.5" id="Line-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-2-decoration-1" d="M73.5,30.5 C72.45,34.28 71.55,37.52 70.5,41.3 C72.6,41.3 74.4,41.3 76.5,41.3 C75.45,37.52 74.55,34.28 73.5,30.5 C73.5,30.5 73.5,30.5 73.5,30.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="__proto__-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
                <tspan x="83" y="52">__proto__</tspan>
            </text>
--- a/1-js/9-prototypes/5-class-inheritance/class-inheritance-array-object.svg
+++ b/1-js/9-prototypes/5-class-inheritance/class-inheritance-array-object.svg
@ -27,12 +27,10 @@
            </text>
            <rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="12" y="274.109589" width="200" height="30"></rect>
            <path d="M72.5,265.609589 L72.5,224.609589" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M72.5,224.609589 C71.45,228.389589 70.55,231.629589 69.5,235.409589 C71.6,235.409589 73.4,235.409589 75.5,235.409589 C74.45,231.629589 73.55,228.389589 72.5,224.609589 C72.5,224.609589 72.5,224.609589 72.5,224.609589 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
                <tspan x="82" y="246.109589">__proto__</tspan>
            </text>
            <path d="M72.5,133.609589 L72.5,92.609589" id="Line-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-2-decoration-1" d="M72.5,92.609589 C71.45,96.389589 70.55,99.629589 69.5,103.409589 C71.6,103.409589 73.4,103.409589 75.5,103.409589 C74.45,99.629589 73.55,96.389589 72.5,92.609589 C72.5,92.609589 72.5,92.609589 72.5,92.609589 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="__proto__-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
                <tspan x="82" y="114.109589">__proto__</tspan>
            </text>
--- a/1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-animal.svg
+++ b/1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-animal.svg
@ -26,12 +26,10 @@
            </text>
            <rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="14" y="257" width="200" height="50"></rect>
            <path d="M74.5,244.5 L74.5,203.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M74.5,203.5 C73.45,207.28 72.55,210.52 71.5,214.3 C73.6,214.3 75.4,214.3 77.5,214.3 C76.45,210.52 75.55,207.28 74.5,203.5 C74.5,203.5 74.5,203.5 74.5,203.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
                <tspan x="84" y="225">__proto__</tspan>
            </text>
            <path d="M74.5,136.5 L74.5,95.5" id="Line-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-2-decoration-1" d="M74.5,95.5 C73.45,99.28 72.55,102.52 71.5,106.3 C73.6,106.3 75.4,106.3 77.5,106.3 C76.45,102.52 75.55,99.28 74.5,95.5 C74.5,95.5 74.5,95.5 74.5,95.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="__proto__-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
                <tspan x="84" y="117">__proto__</tspan>
            </text>
--- a/1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-run-animal.svg
+++ b/1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-run-animal.svg
@ -28,12 +28,10 @@
            </text>
            <rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="13" y="272" width="200" height="50"></rect>
            <path d="M73.5,259.5 L73.5,218.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M73.5,218.5 C72.45,222.28 71.55,225.52 70.5,229.3 C72.6,229.3 74.4,229.3 76.5,229.3 C75.45,225.52 74.55,222.28 73.5,218.5 C73.5,218.5 73.5,218.5 73.5,218.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
                <tspan x="83" y="240">__proto__</tspan>
            </text>
            <path d="M73.5,132.5 L73.5,91.5" id="Line-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-2-decoration-1" d="M73.5,91.5 C72.45,95.28 71.55,98.52 70.5,102.3 C72.6,102.3 74.4,102.3 76.5,102.3 C75.45,98.52 74.55,95.28 73.5,91.5 C73.5,91.5 73.5,91.5 73.5,91.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="__proto__-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
                <tspan x="83" y="113">__proto__</tspan>
            </text>
--- a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy1.svg
+++ b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy1.svg
@ -12,7 +12,6 @@
            <rect id="Rectangle-1" stroke="#E8C48E" sketch:type="MSShapeGroup" x="45" y="50" width="15" height="77"></rect>
            <path d="M52.0039062,60.4414062 L51.6757812,65.9375 L49.7539062,65.9375 L49.4140625,60.4414062 L52.0039062,60.4414062 Z M56.5625,60.4414062 L56.234375,65.9375 L54.3125,65.9375 L53.9726562,60.4414062 L56.5625,60.4414062 Z" id="--&quot;-----------------" fill="#CB1E31" sketch:type="MSShapeGroup"></path>
            <path d="M52.5,9.5 L52.5,44.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M52.5,44.5 C53.55,40.72 54.45,37.48 55.5,33.7 C53.4,33.7 51.6,33.7 49.5,33.7 C50.55,37.48 51.45,40.72 52.5,44.5 C52.5,44.5 52.5,44.5 52.5,44.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
        </g>
    </g>
 </svg>
--- a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy2.svg
+++ b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy2.svg
@ -12,7 +12,6 @@
            <rect id="Rectangle-1" stroke="#E8C48E" sketch:type="MSShapeGroup" x="45" y="45" width="29" height="77"></rect>
            <path d="M52.0039062,55.4414062 L51.6757812,60.9375 L49.7539062,60.9375 L49.4140625,55.4414062 L52.0039062,55.4414062 Z M56.5625,55.4414062 L56.234375,60.9375 L54.3125,60.9375 L53.9726562,55.4414062 L56.5625,55.4414062 Z M66.0898438,68.3085938 C66.3554701,68.3085938 66.6074207,68.3593745 66.8457031,68.4609375 C67.0839856,68.5625005 67.2910147,68.7031241 67.4667969,68.8828125 C67.642579,69.0625009 67.7812495,69.2714832 67.8828125,69.5097656 C67.9843755,69.7480481 68.0351562,70.0039049 68.0351562,70.2773438 C68.0351562,70.5429701 67.9843755,70.7929676 67.8828125,71.0273438 C67.7812495,71.2617199 67.642579,71.466796 67.4667969,71.6425781 C67.2910147,71.8183603 67.0839856,71.9570307 66.8457031,72.0585938 C66.6074207,72.1601568 66.3554701,72.2109375 66.0898438,72.2109375 C65.8164049,72.2109375 65.5625012,72.1601568 65.328125,72.0585938 C65.0937488,71.9570307 64.8886728,71.8183603 64.7128906,71.6425781 C64.5371085,71.466796 64.398438,71.2617199 64.296875,71.0273438 C64.195312,70.7929676 64.1445312,70.5429701 64.1445312,70.2773438 C64.1445312,70.0039049 64.195312,69.7480481 64.296875,69.5097656 C64.398438,69.2714832 64.5371085,69.0625009 64.7128906,68.8828125 C64.8886728,68.7031241 65.0937488,68.5625005 65.328125,68.4609375 C65.5625012,68.3593745 65.8164049,68.3085938 66.0898438,68.3085938 L66.0898438,68.3085938 Z" id="--&quot;.----------------" fill="#CB1E31" sketch:type="MSShapeGroup"></path>
            <path d="M48.5,32.5 L69.5,32.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M69.5,32.5 C65.72,31.45 62.48,30.55 58.7,29.5 C58.7,31.6 58.7,33.4 58.7,35.5 C62.48,34.45 65.72,33.55 69.5,32.5 C69.5,32.5 69.5,32.5 69.5,32.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
        </g>
        <g id="witch_greedy3.svg" sketch:type="MSArtboardGroup" transform="translate(455.000000, 0.000000)"></g>
    </g>
--- a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy3.svg
+++ b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy3.svg
--- a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy4.svg
+++ b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy4.svg
@ -15,7 +15,6 @@
            <path d="M434.667969,55.4414062 L434.339844,60.9375 L432.417969,60.9375 L432.078125,55.4414062 L434.667969,55.4414062 Z" id="Path" fill="#5C8058" sketch:type="MSShapeGroup"></path>
            <path d="M439.226562,55.4414062 L438.898438,60.9375 L436.976562,60.9375 L436.636719,55.4414062 L439.226562,55.4414062 Z" id="Path" fill="#5C8058" sketch:type="MSShapeGroup"></path>
            <path d="M65.5,30.5 L422.5,30.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M422.5,30.5 C418.72,29.45 415.48,28.55 411.7,27.5 C411.7,29.6 411.7,31.4 411.7,33.5 C415.48,32.45 418.72,31.55 422.5,30.5 C422.5,30.5 422.5,30.5 422.5,30.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M423.5,30.5 L439.5,30.5" id="Line" stroke="#B8BAC1" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
        </g>
        <g id="witch_greedy3.svg" sketch:type="MSArtboardGroup" transform="translate(-455.000000, 3.000000)" fill="#CB1E31">
--- a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy5.svg
+++ b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy5.svg
@ -15,7 +15,6 @@
            <path d="M421.472656,55.4414062 L421.144531,60.9375 L419.222656,60.9375 L418.882812,55.4414062 L421.472656,55.4414062 Z" id="Path" fill="#5C8058" sketch:type="MSShapeGroup"></path>
            <path d="M426.03125,55.4414062 L425.703125,60.9375 L423.78125,60.9375 L423.441406,55.4414062 L426.03125,55.4414062 Z" id="Path" fill="#5C8058" sketch:type="MSShapeGroup"></path>
            <path d="M53.5,29.5 L409.5,29.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M409.5,29.5 C405.72,28.45 402.48,27.55 398.7,26.5 C398.7,28.6 398.7,30.4 398.7,32.5 C402.48,31.45 405.72,30.55 409.5,29.5 C409.5,29.5 409.5,29.5 409.5,29.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M410.5,29.5 L435.5,29.5" id="Line" stroke="#B8BAC1" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
        </g>
        <g id="witch_greedy4.svg" sketch:type="MSArtboardGroup" transform="translate(-455.000000, 3.000000)"></g>
--- a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy6.svg
+++ b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_greedy6.svg
--- a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy3.svg
+++ b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy3.svg
@ -14,7 +14,6 @@
            <path d="M78.3945312,53.4414062 L78.0664062,58.9375 L76.1445312,58.9375 L75.8046875,53.4414062 L78.3945312,53.4414062 Z" id="Path" fill="#5C8058" sketch:type="MSShapeGroup"></path>
            <path d="M82.953125,53.4414062 L82.625,58.9375 L80.703125,58.9375 L80.3632812,53.4414062 L82.953125,53.4414062 Z" id="Path" fill="#5C8058" sketch:type="MSShapeGroup"></path>
            <path d="M50.5,33.5 L71.5,33.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M71.5,33.5 C67.72,32.45 64.48,31.55 60.7,30.5 C60.7,32.6 60.7,34.4 60.7,36.5 C64.48,35.45 67.72,34.55 71.5,33.5 C71.5,33.5 71.5,33.5 71.5,33.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
        </g>
    </g>
 </svg>
--- a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy4.svg
+++ b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy4.svg
@ -14,7 +14,6 @@
            <path d="M91.5898438,53.4414062 L91.2617188,58.9375 L89.3398438,58.9375 L89,53.4414062 L91.5898438,53.4414062 Z" id="Path" fill="#5C8058" sketch:type="MSShapeGroup"></path>
            <path d="M96.1484375,53.4414062 L95.8203125,58.9375 L93.8984375,58.9375 L93.5585938,53.4414062 L96.1484375,53.4414062 Z" id="Path" fill="#5C8058" sketch:type="MSShapeGroup"></path>
            <path d="M50.5,29.5 L81.5,29.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M81.5,29.5 C77.72,28.45 74.48,27.55 70.7,26.5 C70.7,28.6 70.7,30.4 70.7,32.5 C74.48,31.45 77.72,30.55 81.5,29.5 C81.5,29.5 81.5,29.5 81.5,29.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
        </g>
    </g>
 </svg>
--- a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy5.svg
+++ b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy5.svg
--- a/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy6.svg
+++ b/10-regular-expressions-javascript/6-regexp-greedy-and-lazy/witch_lazy6.svg
--- a/2-ui/1-document/1-browser-environment/windowObjects.svg
+++ b/2-ui/1-document/1-browser-environment/windowObjects.svg
@ -60,9 +60,7 @@
                <tspan x="17" y="73">DOM</tspan>
            </text>
            <path d="M174.5,41.5 L174.5,72.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M174.5,72.5 C175.55,68.72 176.45,65.48 177.5,61.7 C175.4,61.7 173.6,61.7 171.5,61.7 C172.55,65.48 173.45,68.72 174.5,72.5 C174.5,72.5 174.5,72.5 174.5,72.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M132.5,41.5 L86.5,73.5" id="Line-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-2-decoration-1" d="M86.5293087,73.4796113 C90.2319481,72.182938 93.405639,71.0715038 97.1082783,69.7748305 C95.9090429,68.0509295 94.8811268,66.5733002 93.6818914,64.8493993 C91.1784875,67.8699735 89.0327127,70.4590371 86.5293087,73.4796113 C86.5293087,73.4796113 86.5293087,73.4796113 86.5293087,73.4796113 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="…" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal" fill="#727155">
                <tspan x="50" y="122">…</tspan>
            </text>
@ -70,7 +68,6 @@
                <tspan x="287" y="201">…</tspan>
            </text>
            <path d="M217.490385,40.4861111 L267.509615,74.5138889" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M267.099194,74.2346818 C264.564439,71.2403677 262.391792,68.6738127 259.857037,65.6794986 C258.675837,67.4158069 257.66338,68.9040712 256.48218,70.6403795 C260.198135,71.8983853 263.383239,72.976676 267.099194,74.2346818 C267.099194,74.2346818 267.099194,74.2346818 267.099194,74.2346818 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
        </g>
    </g>
 </svg>
--- a/2-ui/1-document/12-multi-insert/article.md
+++ b/2-ui/1-document/12-multi-insert/article.md
@ -72,7 +72,7 @@ document.body.appendChild(ul); // затем в документ
 ul.innerHTML += "<li>1</li><li>2</li>...";
 ```
-Но операция `+=` с `innerHTML` не работает с DOM. Она не прибавляет, а заменяет всё содержимое списка на дополненную строку. Это не только медленно, но все внешние ресурсы (картинки) будут загружены заново. Так лучше не делать.
+Но операцию `ul.innerHTML += "..."` можно по-другому переписать как `ul.innerHTML = ul.innerHTML + "..."`. Иначе говоря, она *не прибавляет, а заменяет* всё содержимое списка на дополненную строку. Это и нехорошо с точки зрения производительности, но и будут побочные эффекты. В частности, все внешние ресурсы (картинки) внутри перезаписываемого `innerHTML` будут загружены заново. Если в каких-то переменных были ссылки на элементы списка -- они станут неверны, так как содержимое полностью заменяется.В общем, так лучше не делать.
 А если нужно вставить в середину списка? Здесь `innerHTML` вообще не поможет.
--- a/2-ui/1-document/15-metrics/metric-all.svg
+++ b/2-ui/1-document/15-metrics/metric-all.svg
@ -62,17 +62,11 @@
            <path d="M467.5,427 L539.639999,427" id="Line-32" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M466.5,561 L614.639999,561" id="Line-26" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M605,64.5 L605,558.5" id="Line-25" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-25-decoration-1" d="M605,65.3 C606.05,69.08 606.95,72.32 608,76.1 C605.9,76.1 604.1,76.1 602,76.1 C603.05,72.32 603.95,69.08 605,65.3 C605,65.3 605,65.3 605,65.3 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-25-decoration-2" d="M605,558.5 C606.05,554.72 606.95,551.48 608,547.7 C605.9,547.7 604.1,547.7 602,547.7 C603.05,551.48 603.95,554.72 605,558.5 C605,558.5 605,558.5 605,558.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path d="M571,164.5 L571,447.5" id="Line-30" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-30-decoration-1" d="M571,165.3 C572.05,169.08 572.95,172.32 574,176.1 C571.9,176.1 570.1,176.1 568,176.1 C569.05,172.32 569.95,169.08 571,165.3 C571,165.3 571,165.3 571,165.3 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-30-decoration-2" d="M571,447.5 C572.05,443.72 572.95,440.48 574,436.7 C571.9,436.7 570.1,436.7 568,436.7 C569.05,440.48 569.95,443.72 571,447.5 C571,447.5 571,447.5 571,447.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <text id="clientHeight" sketch:type="MSTextLayer" transform="translate(516.500000, 304.000000) rotate(-90.000000) translate(-516.500000, -304.000000) " font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#EE6B47">
                <tspan x="470.316406" y="306">clientHeight</tspan>
            </text>
            <path d="M527,191.5 L527,425.5" id="Line-34" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-34-decoration-1" d="M527,192.3 C528.05,196.08 528.95,199.32 530,203.1 C527.9,203.1 526.1,203.1 524,203.1 C525.05,199.32 525.95,196.08 527,192.3 C527,192.3 527,192.3 527,192.3 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-34-decoration-2" d="M527,425.5 C528.05,421.72 528.95,418.48 530,414.7 C527.9,414.7 526.1,414.7 524,414.7 C525.05,418.48 525.95,421.72 527,425.5 C527,425.5 527,425.5 527,425.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <text id="offsetTop" sketch:type="MSTextLayer" transform="translate(106.500000, 83.000000) rotate(-90.000000) translate(-106.500000, -83.000000) " font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#EE6B47">
                <tspan x="71.8623047" y="85">offsetTop</tspan>
            </text>
@ -80,24 +74,16 @@
                <tspan x="94.5136719" y="239">clientLeft</tspan>
            </text>
            <path d="M117,4.5 L117,160.5" id="Line-36" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-36-decoration-1" d="M117,5.3 C118.05,9.08 118.95,12.32 120,16.1 C117.9,16.1 116.1,16.1 114,16.1 C115.05,12.32 115.95,9.08 117,5.3 C117,5.3 117,5.3 117,5.3 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-36-decoration-2" d="M117,159.5 C118.05,155.72 118.95,152.48 120,148.7 C117.9,148.7 116.1,148.7 114,148.7 C115.05,152.48 115.95,155.72 117,159.5 C117,159.5 117,159.5 117,159.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path d="M521,64.5 L521,157.5" id="Line-31" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-31-decoration-1" d="M521,65.3 C522.05,69.08 522.95,72.32 524,76.1 C521.9,76.1 520.1,76.1 518,76.1 C519.05,72.32 519.95,69.08 521,65.3 C521,65.3 521,65.3 521,65.3 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-31-decoration-2" d="M521,157.5 C522.05,153.72 522.95,150.48 524,146.7 C521.9,146.7 520.1,146.7 518,146.7 C519.05,150.48 519.95,153.72 521,157.5 C521,157.5 521,157.5 521,157.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <rect id="Rectangle-14" fill-opacity="0.88" fill="#FFFFFF" sketch:type="MSShapeGroup" x="154" y="73" width="312" height="89"></rect>
            <rect id="Rectangle-15" fill-opacity="0.88" fill="#FFFFFF" sketch:type="MSShapeGroup" x="154" y="451" width="312" height="93"></rect>
            <path d="M145.639999,486.09 L444.999985,486.09" id="Line-39" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-39-decoration-1" d="M146.439999,486.09 C150.219999,485.04 153.459999,484.14 157.239999,483.09 C157.239999,485.19 157.239999,486.99 157.239999,489.09 C153.459999,488.04 150.219999,487.14 146.439999,486.09 C146.439999,486.09 146.439999,486.09 146.439999,486.09 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-39-decoration-2" d="M444.639999,486.09 C440.859999,485.04 437.619999,484.14 433.839999,483.09 C433.839999,485.19 433.839999,486.99 433.839999,489.09 C437.619999,488.04 440.859999,487.14 444.639999,486.09 C444.639999,486.09 444.639999,486.09 444.639999,486.09 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path d="M445.639999,510 L445.639999,426" id="Line-42" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M141.639999,510 L141.639999,426" id="Line-43" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <text id="clientWidth" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#EE6B47">
                <tspan x="265.165039" y="478">clientWidth</tspan>
            </text>
            <path d="M4.63999939,163.09 L114,163.09" id="Line-41" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-41-decoration-1" d="M5.43999939,163.09 C9.21999939,162.04 12.4599994,161.14 16.2399994,160.09 C16.2399994,162.19 16.2399994,163.99 16.2399994,166.09 C12.4599994,165.04 9.21999939,164.14 5.43999939,163.09 C5.43999939,163.09 5.43999939,163.09 5.43999939,163.09 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-41-decoration-2" d="M113.639999,163.09 C109.859999,162.04 106.619999,161.14 102.839999,160.09 C102.839999,162.19 102.839999,163.99 102.839999,166.09 C106.619999,165.04 109.859999,164.14 113.639999,163.09 C113.639999,163.09 113.639999,163.09 113.639999,163.09 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <text id="clientTop" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#C74A6C">
                <tspan x="150.862305" y="178">clientTop</tspan>
            </text>
@ -105,8 +91,6 @@
                <tspan x="21.0136719" y="154">offsetLeft</tspan>
            </text>
            <path d="M120.639999,529.09 L488.999985,529.09" id="Line-40" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-40-decoration-1" d="M121.439999,529.09 C125.219999,528.04 128.459999,527.14 132.239999,526.09 C132.239999,528.19 132.239999,529.99 132.239999,532.09 C128.459999,531.04 125.219999,530.14 121.439999,529.09 C121.439999,529.09 121.439999,529.09 121.439999,529.09 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-40-decoration-2" d="M488.639999,529.09 C484.859999,528.04 481.619999,527.14 477.839999,526.09 C477.839999,528.19 477.839999,529.99 477.839999,532.09 C481.619999,531.04 484.859999,530.14 488.639999,529.09 C488.639999,529.09 488.639999,529.09 488.639999,529.09 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path d="M490.639999,551 L490.639999,447" id="Line-45" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M116.639999,551 L116.639999,447" id="Line-44" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <text id="offsetWidth" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#EE6B47">
--- a/2-ui/1-document/15-metrics/metric-client-left-top-rtl.svg
+++ b/2-ui/1-document/15-metrics/metric-client-left-top-rtl.svg
@ -52,11 +52,7 @@
                </g>
            </g>
            <path d="M65.4099998,15.6800003 L65.4099998,63.6800003" id="Line-7" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-7-decoration-1" d="M65.4099998,62.6800003 C66.4599998,58.9000003 67.3599998,55.6600003 68.4099998,51.8800003 C66.3099998,51.8800003 64.5099998,51.8800003 62.4099998,51.8800003 C63.4599998,55.6600003 64.3599998,58.9000003 65.4099998,62.6800003 C65.4099998,62.6800003 65.4099998,62.6800003 65.4099998,62.6800003 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-7-decoration-2" d="M65.4099998,16.4800003 C66.4599998,20.2600003 67.3599998,23.5000003 68.4099998,27.2800003 C66.3099998,27.2800003 64.5099998,27.2800003 62.4099998,27.2800003 C63.4599998,23.5000003 64.3599998,20.2600003 65.4099998,16.4800003 C65.4099998,16.4800003 65.4099998,16.4800003 65.4099998,16.4800003 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path d="M15.4099998,64.6800003 L85.9999962,64.6800003" id="Line-28" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-28-decoration-1" d="M85.4099998,64.6800003 C81.6299998,63.6300003 78.3899998,62.7300003 74.6099998,61.6800003 C74.6099998,63.7800003 74.6099998,65.5800003 74.6099998,67.6800003 C78.3899998,66.6300003 81.6299998,65.7300003 85.4099998,64.6800003 C85.4099998,64.6800003 85.4099998,64.6800003 85.4099998,64.6800003 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-28-decoration-2" d="M16.2099998,64.6800003 C19.9899998,63.6300003 23.2299998,62.7300003 27.0099998,61.6800003 C27.0099998,63.7800003 27.0099998,65.5800003 27.0099998,67.6800003 C23.2299998,66.6300003 19.9899998,65.7300003 16.2099998,64.6800003 C16.2099998,64.6800003 16.2099998,64.6800003 16.2099998,64.6800003 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <text id="clientTop:25px-=-bor" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
                <tspan x="85.6269531" y="43" fill="#EE6B47">clientTop:</tspan>
                <tspan x="151.603516" y="43" fill="#3B86C4">25px </tspan>
--- a/2-ui/1-document/15-metrics/metric-client-left-top.svg
+++ b/2-ui/1-document/15-metrics/metric-client-left-top.svg
@ -37,11 +37,7 @@
            <rect id="Rectangle-5" fill="url(#linearGradient-1)" sketch:type="MSShapeGroup" transform="translate(179.500000, 216.500000) rotate(-180.000000) translate(-179.500000, -216.500000) " x="42" y="-7" width="275" height="447"></rect>
            <rect id="Rectangle-6" fill="#FFFFFF" sketch:type="MSShapeGroup" x="316" y="8" width="162" height="399"></rect>
            <path d="M62.4099998,15.6800003 L62.4099998,63.6800003" id="Line-7" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-7-decoration-1" d="M62.4099998,62.6800003 C63.4599998,58.9000003 64.3599998,55.6600003 65.4099998,51.8800003 C63.3099998,51.8800003 61.5099998,51.8800003 59.4099998,51.8800003 C60.4599998,55.6600003 61.3599998,58.9000003 62.4099998,62.6800003 C62.4099998,62.6800003 62.4099998,62.6800003 62.4099998,62.6800003 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-7-decoration-2" d="M62.4099998,16.4800003 C63.4599998,20.2600003 64.3599998,23.5000003 65.4099998,27.2800003 C63.3099998,27.2800003 61.5099998,27.2800003 59.4099998,27.2800003 C60.4599998,23.5000003 61.3599998,20.2600003 62.4099998,16.4800003 C62.4099998,16.4800003 62.4099998,16.4800003 62.4099998,16.4800003 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path d="M12.4099998,64.6800003 L60.4099998,64.6800003" id="Line-28" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-28-decoration-1" d="M60.4099998,64.6800003 C56.6299998,63.6300003 53.3899998,62.7300003 49.6099998,61.6800003 C49.6099998,63.7800003 49.6099998,65.5800003 49.6099998,67.6800003 C53.3899998,66.6300003 56.6299998,65.7300003 60.4099998,64.6800003 C60.4099998,64.6800003 60.4099998,64.6800003 60.4099998,64.6800003 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-28-decoration-2" d="M13.2099998,64.6800003 C16.9899998,63.6300003 20.2299998,62.7300003 24.0099998,61.6800003 C24.0099998,63.7800003 24.0099998,65.5800003 24.0099998,67.6800003 C20.2299998,66.6300003 16.9899998,65.7300003 13.2099998,64.6800003 C13.2099998,64.6800003 13.2099998,64.6800003 13.2099998,64.6800003 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <text id="clientTop:25px-=-bor" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
                <tspan x="82.6269531" y="43" fill="#EE6B47">clientTop:</tspan>
                <tspan x="148.603516" y="43" fill="#3B86C4">25px </tspan>
--- a/2-ui/1-document/15-metrics/metric-client-width-height.svg
+++ b/2-ui/1-document/15-metrics/metric-client-width-height.svg
@ -48,8 +48,6 @@
                <tspan x="237.189453" y="109" fill="#3B86C4">284px</tspan>
            </text>
            <path d="M68.6799927,117 L350.5,117" id="Line-15" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-15-decoration-1" d="M69.4799927,117 C73.2599927,115.95 76.4999927,115.05 80.2799927,114 C80.2799927,116.1 80.2799927,117.9 80.2799927,120 C76.4999927,118.95 73.2599927,118.05 69.4799927,117 C69.4799927,117 69.4799927,117 69.4799927,117 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-15-decoration-2" d="M349.679993,117 C345.899993,115.95 342.659993,115.05 338.879993,114 C338.879993,116.1 338.879993,117.9 338.879993,120 C342.659993,118.95 345.899993,118.05 349.679993,117 C349.679993,117 349.679993,117 349.679993,117 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path d="M-0.46484375,114.945312 L42.5351562,114.945312" id="Line-14" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(21.480469, 114.945312) rotate(-270.000000) translate(-21.480469, -114.945312) "></path>
            <path d="M26.5351562,113.945312 L67.5351562,113.945312" id="Line-13" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(47.480469, 113.945312) rotate(-270.000000) translate(-47.480469, -113.945312) "></path>
            <text id="border-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
@ -78,8 +76,6 @@
            <path d="M46.5,376 L46.5,464.14193" id="Line-24" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M370.5,376 L370.5,464.14193" id="Line-25" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M48,452.070965 L368,452.070965" id="Line-22" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-22-decoration-1" d="M48.8,452.070965 C52.58,451.020965 55.82,450.120965 59.6,449.070965 C59.6,451.170965 59.6,452.970965 59.6,455.070965 C55.82,454.020965 52.58,453.120965 48.8,452.070965 C48.8,452.070965 48.8,452.070965 48.8,452.070965 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-22-decoration-2" d="M368,452.070965 C364.22,451.020965 360.98,450.120965 357.2,449.070965 C357.2,451.170965 357.2,452.970965 357.2,455.070965 C360.98,454.020965 364.22,453.120965 368,452.070965 C368,452.070965 368,452.070965 368,452.070965 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <text id="clientHeight:240px" sketch:type="MSTextLayer" transform="translate(489.500000, 277.000000) rotate(-90.000000) translate(-489.500000, -277.000000) " font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
                <tspan x="430.121094" y="279" fill="#EE6B47">clientHeight:</tspan>
                <tspan x="515.890625" y="279" fill="#3B86C4">240px</tspan>
@ -87,8 +83,6 @@
            <path d="M365.5,156 L485.5,156" id="Line-27" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M365.5,394 L485.5,394" id="Line-28" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M476,160 L476,389" id="Line-26" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-26-decoration-1" d="M476,160.8 C477.05,164.58 477.95,167.82 479,171.6 C476.9,171.6 475.1,171.6 473,171.6 C474.05,167.82 474.95,164.58 476,160.8 C476,160.8 476,160.8 476,160.8 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-26-decoration-2" d="M476,389 C477.05,385.22 477.95,381.98 479,378.2 C476.9,378.2 475.1,378.2 473,378.2 C474.05,381.98 474.95,385.22 476,389 C476,389 476,389 476,389 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <text id="height:200px" sketch:type="MSTextLayer" transform="translate(424.500000, 274.000000) rotate(-90.000000) translate(-424.500000, -274.000000) " font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
                <tspan x="384.914062" y="276" fill="#EE6B47">height:</tspan>
                <tspan x="431.097656" y="276" fill="#3B86C4">200px</tspan>
@ -96,8 +90,6 @@
            <path d="M353.5,175 L441.64193,175" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M353.5,377 L441.64193,377" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M435,177.5 L435,374" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M435,178.3 C436.05,182.08 436.95,185.32 438,189.1 C435.9,189.1 434.1,189.1 432,189.1 C433.05,185.32 433.95,182.08 435,178.3 C435,178.3 435,178.3 435,178.3 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-decoration-2" d="M435,373.5 C436.05,369.72 436.95,366.48 438,362.7 C435.9,362.7 434.1,362.7 432,362.7 C433.05,366.48 433.95,369.72 435,373.5 C435,373.5 435,373.5 435,373.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <text id="Introduction" sketch:type="MSTextLayer" font-family="Times" font-size="18" font-weight="bold" fill="#5A4739">
                <tspan x="69" y="193">Introduction</tspan>
                <tspan x="166.699219" y="193" font-size="16" font-weight="normal"></tspan>
--- a/2-ui/1-document/15-metrics/metric-client-width-nopadding.svg
+++ b/2-ui/1-document/15-metrics/metric-client-width-nopadding.svg
@ -18,15 +18,11 @@
                <tspan x="213.396484" y="399.64193" fill="#EE6B47">= content width</tspan>
            </text>
            <path d="M63.6799927,409.64193 L343.679993,409.64193" id="Line-44" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-44-decoration-1" d="M64.4799927,409.64193 C68.2599927,408.59193 71.4999927,407.69193 75.2799927,406.64193 C75.2799927,408.74193 75.2799927,410.54193 75.2799927,412.64193 C71.4999927,411.59193 68.2599927,410.69193 64.4799927,409.64193 C64.4799927,409.64193 64.4799927,409.64193 64.4799927,409.64193 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-44-decoration-2" d="M343.679993,409.64193 C339.899993,408.59193 336.659993,407.69193 332.879993,406.64193 C332.879993,408.74193 332.879993,410.54193 332.879993,412.64193 C336.659993,411.59193 339.899993,410.69193 343.679993,409.64193 C343.679993,409.64193 343.679993,409.64193 343.679993,409.64193 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <text id="CSS-width:-300px" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
                <tspan x="150.71875" y="429.64193" fill="#F48158">CSS width:</tspan>
                <tspan x="216.695312" y="429.64193" fill="#3B86C4"> 300px</tspan>
            </text>
            <path d="M62.6799927,434.64193 L363,434.64193" id="Line-47" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-47-decoration-1" d="M63.4799927,434.64193 C67.2599927,433.59193 70.4999927,432.69193 74.2799927,431.64193 C74.2799927,433.74193 74.2799927,435.54193 74.2799927,437.64193 C70.4999927,436.59193 67.2599927,435.69193 63.4799927,434.64193 C63.4799927,434.64193 63.4799927,434.64193 63.4799927,434.64193 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-47-decoration-2" d="M362.679993,434.64193 C358.899993,433.59193 355.659993,432.69193 351.879993,431.64193 C351.879993,433.74193 351.879993,435.54193 351.879993,437.64193 C355.659993,436.59193 358.899993,435.69193 362.679993,434.64193 C362.679993,434.64193 362.679993,434.64193 362.679993,434.64193 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <text id="Introduction-2" sketch:type="MSTextLayer" font-family="Times" font-size="18" font-weight="bold" fill="#5A4739">
                <tspan x="62" y="173">Introduction</tspan>
                <tspan x="159.699219" y="173" font-size="16" font-weight="normal"></tspan>
@ -42,7 +38,6 @@
            </text>
            <ellipse id="Oval-5" stroke="#EE6B47" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup" cx="191" cy="58.8580704" rx="76" ry="43.5"></ellipse>
            <path d="M191,104 L191,128.638622" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M191,128 C192.05,124.22 192.95,120.98 194,117.2 C191.9,117.2 190.1,117.2 188,117.2 C189.05,120.98 189.95,124.22 191,128 C191,128 191,128 191,128 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <text id="padding:-0;" sketch:type="MSTextLayer" font-family="Consolas" font-size="16" font-weight="bold" fill="#8A704D">
                <tspan x="136" y="52">padding: 0;</tspan>
                <tspan x="136" y="71">width: 300px;</tspan>
--- a/2-ui/1-document/15-metrics/metric-css.svg
+++ b/2-ui/1-document/15-metrics/metric-css.svg
@ -48,8 +48,6 @@
            <path d="M93.5,162 L181.64193,162" id="Line-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M461.5,385 L549.64193,385" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M543,185.5 L543,382" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M543,186.3 C544.05,190.08 544.95,193.32 546,197.1 C543.9,197.1 542.1,197.1 540,197.1 C541.05,193.32 541.95,190.08 543,186.3 C543,186.3 543,186.3 543,186.3 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-decoration-2" d="M543,381.5 C544.05,377.72 544.95,374.48 546,370.7 C543.9,370.7 542.1,370.7 540,370.7 C541.05,374.48 541.95,377.72 543,381.5 C543,381.5 543,381.5 543,381.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <text id="padding:20px-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal">
                <tspan x="7" y="396" fill="#EE6B47">padding:</tspan>
                <tspan x="59.78125" y="396" fill="#3B86C4">20px</tspan>
@ -69,8 +67,6 @@
                <tspan x="347.189453" y="117" fill="#3B86C4">284px</tspan>
            </text>
            <path d="M178.679993,125 L460.5,125" id="Line-21" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-21-decoration-1" d="M179.479993,125 C183.259993,123.95 186.499993,123.05 190.279993,122 C190.279993,124.1 190.279993,125.9 190.279993,128 C186.499993,126.95 183.259993,126.05 179.479993,125 C179.479993,125 179.479993,125 179.479993,125 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-21-decoration-2" d="M459.679993,125 C455.899993,123.95 452.659993,123.05 448.879993,122 C448.879993,124.1 448.879993,125.9 448.879993,128 C452.659993,126.95 455.899993,126.05 459.679993,125 C459.679993,125 459.679993,125 459.679993,125 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path d="M109.535156,122.945312 L152.535156,122.945312" id="Line-14" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(131.480469, 122.945312) rotate(-270.000000) translate(-131.480469, -122.945312) "></path>
            <path d="M136.535156,121.945312 L177.535156,121.945312" id="Line-13" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(157.480469, 121.945312) rotate(-270.000000) translate(-157.480469, -121.945312) "></path>
            <text id="border-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
--- a/2-ui/1-document/15-metrics/metric-offset-parent.svg
+++ b/2-ui/1-document/15-metrics/metric-offset-parent.svg
@ -39,16 +39,11 @@
                <tspan x="245" y="444" font-size="16" font-weight="normal">and in all browsers from Microsoft</tspan>
            </text>
            <path d="M201,42.5 L201,199.320007" id="Line-40" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-40-decoration-1" d="M201,198.5 C202.05,194.72 202.95,191.48 204,187.7 C201.9,187.7 200.1,187.7 198,187.7 C199.05,191.48 199.95,194.72 201,198.5 C201,198.5 201,198.5 201,198.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
            <path id="Line-40-decoration-2" d="M201,43.3 C202.05,47.08 202.95,50.32 204,54.1 C201.9,54.1 200.1,54.1 198,54.1 C199.05,50.32 199.95,47.08 201,43.3 C201,43.3 201,43.3 201,43.3 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M42.5899963,202.910004 L199.410004,202.910004" id="Line-41" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-41-decoration-1" d="M198.589996,202.910004 C194.809996,201.860004 191.569996,200.960004 187.789996,199.910004 C187.789996,202.010004 187.789996,203.810004 187.789996,205.910004 C191.569996,204.860004 194.809996,203.960004 198.589996,202.910004 C198.589996,202.910004 198.589996,202.910004 198.589996,202.910004 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
            <path id="Line-41-decoration-2" d="M43.3899963,202.910004 C47.1699963,201.860004 50.4099963,200.960004 54.1899963,199.910004 C54.1899963,202.010004 54.1899963,203.810004 54.1899963,205.910004 C50.4099963,204.860004 47.1699963,203.960004 43.3899963,202.910004 C43.3899963,202.910004 43.3899963,202.910004 43.3899963,202.910004 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
            <circle id="Oval-2" fill="#3B86C4" sketch:type="MSShapeGroup" cx="225" cy="227" r="2"></circle>
            <circle id="Oval-2" fill="#3B86C4" sketch:type="MSShapeGroup" cx="201" cy="202" r="3"></circle>
            <ellipse id="Oval-6" stroke="#EE6B47" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup" cx="386.25" cy="120" rx="100" ry="50"></ellipse>
            <path d="M387,173.378593 L387,198.017216" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M387,197.378593 C388.05,193.598593 388.95,190.358593 390,186.578593 C387.9,186.578593 386.1,186.578593 384,186.578593 C385.05,190.358593 385.95,193.598593 387,197.378593 C387,197.378593 387,197.378593 387,197.378593 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <text id="position:-absolute;" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
                <tspan x="318.5" y="111.792656">position: absolute;</tspan>
                <tspan x="318.5" y="127.792656">left: 180px;</tspan>
--- a/2-ui/1-document/15-metrics/metric-offset-width-height.svg
+++ b/2-ui/1-document/15-metrics/metric-offset-width-height.svg
@ -54,11 +54,7 @@
            <path d="M359.5,175 L447.64193,175" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M359.5,377 L447.64193,377" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M441,177.5 L441,374" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M441,178.3 C442.05,182.08 442.95,185.32 444,189.1 C441.9,189.1 440.1,189.1 438,189.1 C439.05,185.32 439.95,182.08 441,178.3 C441,178.3 441,178.3 441,178.3 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-decoration-2" d="M441,373.5 C442.05,369.72 442.95,366.48 444,362.7 C441.9,362.7 440.1,362.7 438,362.7 C439.05,366.48 439.95,369.72 441,373.5 C441,373.5 441,373.5 441,373.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path d="M76.6799927,117 L358.5,117" id="Line-15" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-15-decoration-1" d="M77.4799927,117 C81.2599927,115.95 84.4999927,115.05 88.2799927,114 C88.2799927,116.1 88.2799927,117.9 88.2799927,120 C84.4999927,118.95 81.2599927,118.05 77.4799927,117 C77.4799927,117 77.4799927,117 77.4799927,117 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-15-decoration-2" d="M357.679993,117 C353.899993,115.95 350.659993,115.05 346.879993,114 C346.879993,116.1 346.879993,117.9 346.879993,120 C350.659993,118.95 353.899993,118.05 357.679993,117 C357.679993,117 357.679993,117 357.679993,117 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path d="M7.53515625,114.945312 L50.5351562,114.945312" id="Line-14" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(29.480469, 114.945312) rotate(-270.000000) translate(-29.480469, -114.945312) "></path>
            <path d="M34.5351562,113.945312 L75.5351562,113.945312" id="Line-13" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup" transform="translate(55.480469, 113.945312) rotate(-270.000000) translate(-55.480469, -113.945312) "></path>
            <text id="border-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" sketch:alignment="middle">
@ -87,8 +83,6 @@
            <path d="M29.5,419 L29.5,497" id="Line-24" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M418.5,419 L418.5,499" id="Line-25" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M32.0899963,463.070965 L416,463.070965" id="Line-22" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-22-decoration-1" d="M32.8899963,463.070965 C36.6699963,462.020965 39.9099963,461.120965 43.6899963,460.070965 C43.6899963,462.170965 43.6899963,463.970965 43.6899963,466.070965 C39.9099963,465.020965 36.6699963,464.120965 32.8899963,463.070965 C32.8899963,463.070965 32.8899963,463.070965 32.8899963,463.070965 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-22-decoration-2" d="M415.089996,463.070965 C411.309996,462.020965 408.069996,461.120965 404.289996,460.070965 C404.289996,462.170965 404.289996,463.970965 404.289996,466.070965 C408.069996,465.020965 411.309996,464.120965 415.089996,463.070965 C415.089996,463.070965 415.089996,463.070965 415.089996,463.070965 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <text id="offsetHeight:290px" sketch:type="MSTextLayer" transform="translate(485.500000, 279.500000) rotate(-90.000000) translate(-485.500000, -279.500000) " font-family="Consolas" font-size="16" font-weight="normal" sketch:alignment="middle">
                <tspan x="406.328125" y="282" fill="#EE6B47">offsetHeight:</tspan>
                <tspan x="520.6875" y="282" fill="#3B86C4">290px</tspan>
@ -96,8 +90,6 @@
            <path d="M416.5,131 L504.64193,131" id="Line-27" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M416.5,420 L504.64193,420" id="Line-28" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M468,132.589996 L468,419.410004" id="Line-26" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-26-decoration-1" d="M468,133.389996 C469.05,137.169996 469.95,140.409996 471,144.189996 C468.9,144.189996 467.1,144.189996 465,144.189996 C466.05,140.409996 466.95,137.169996 468,133.389996 C468,133.389996 468,133.389996 468,133.389996 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-26-decoration-2" d="M468,418.589996 C469.05,414.809996 469.95,411.569996 471,407.789996 C468.9,407.789996 467.1,407.789996 465,407.789996 C466.05,411.569996 466.95,414.809996 468,418.589996 C468,418.589996 468,418.589996 468,418.589996 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <text id="Introduction" sketch:type="MSTextLayer" font-family="Times" font-size="18" font-weight="bold" fill="#5A4739">
                <tspan x="78" y="193">Introduction</tspan>
                <tspan x="175.699219" y="193" font-size="16" font-weight="normal"></tspan>
--- a/2-ui/1-document/15-metrics/metric-scroll-top.svg
+++ b/2-ui/1-document/15-metrics/metric-scroll-top.svg
@ -52,8 +52,6 @@
            <path d="M9.5,147 L75.6399994,147" id="Line-43" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M10.5,21 L76.6399994,21" id="Line-42" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M35,20.5 L35,146.32" id="Line-39" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-39-decoration-1" d="M35,21.3 C36.05,25.08 36.95,28.32 38,32.1 C35.9,32.1 34.1,32.1 32,32.1 C33.05,28.32 33.95,25.08 35,21.3 C35,21.3 35,21.3 35,21.3 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-39-decoration-2" d="M35,145.5 C36.05,141.72 36.95,138.48 38,134.7 C35.9,134.7 34.1,134.7 32,134.7 C33.05,138.48 33.95,141.72 35,145.5 C35,145.5 35,145.5 35,145.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <rect id="Rectangle-14" fill-opacity="0.8" fill="#FFFFFF" sketch:type="MSShapeGroup" x="88" y="33" width="312" height="89"></rect>
            <rect id="Rectangle-15" fill-opacity="0.8" fill="#FFFFFF" sketch:type="MSShapeGroup" x="88" y="411" width="312" height="89"></rect>
            <text id="scrollHeight:723px" sketch:type="MSTextLayer" transform="translate(451.500000, 270.000000) rotate(-90.000000) translate(-451.500000, -270.000000) " font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle">
@ -63,8 +61,6 @@
            <path d="M393.5,22 L471.639999,22" id="Line-27" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M393.5,522 L471.639999,522" id="Line-28" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M462,24.5 L462,518.5" id="Line-25" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-25-decoration-1" d="M462,25.3 C463.05,29.08 463.95,32.32 465,36.1 C462.9,36.1 461.1,36.1 459,36.1 C460.05,32.32 460.95,29.08 462,25.3 C462,25.3 462,25.3 462,25.3 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-25-decoration-2" d="M462,518.5 C463.05,514.72 463.95,511.48 465,507.7 C462.9,507.7 461.1,507.7 459,507.7 C460.05,511.48 460.95,514.72 462,518.5 C462,518.5 462,518.5 462,518.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <g id="Scrollbar" sketch:type="MSLayerGroup" transform="translate(384.000000, 147.000000)">
                <rect id="Rectangle-19" stroke="#E9E9E9" fill="#F3F3F3" sketch:type="MSShapeGroup" x="0" y="0" width="16" height="240" rx="3"></rect>
                <g id="Rectangle-18-+-Triangle-1" sketch:type="MSShapeGroup">
--- a/2-ui/1-document/15-metrics/metric-scroll-width-height.svg
+++ b/2-ui/1-document/15-metrics/metric-scroll-width-height.svg
@ -56,11 +56,7 @@
            <path d="M370.5,22 L448.639999,22" id="Line-27" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M370.5,524 L448.639999,524" id="Line-26" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M439,25.5 L439,519.5" id="Line-25" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-25-decoration-1" d="M439,26.3 C440.05,30.08 440.95,33.32 442,37.1 C439.9,37.1 438.1,37.1 436,37.1 C437.05,33.32 437.95,30.08 439,26.3 C439,26.3 439,26.3 439,26.3 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-25-decoration-2" d="M439,519.5 C440.05,515.72 440.95,512.48 442,508.7 C439.9,508.7 438.1,508.7 436,508.7 C437.05,512.48 437.95,515.72 439,519.5 C439,519.5 439,519.5 439,519.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path d="M49.6399994,109.09 L348.999985,109.09" id="Line-39" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-39-decoration-1" d="M50.4399994,109.09 C54.2199994,108.04 57.4599994,107.14 61.2399994,106.09 C61.2399994,108.19 61.2399994,109.99 61.2399994,112.09 C57.4599994,111.04 54.2199994,110.14 50.4399994,109.09 C50.4399994,109.09 50.4399994,109.09 50.4399994,109.09 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path id="Line-39-decoration-2" d="M348.639999,109.09 C344.859999,108.04 341.619999,107.14 337.839999,106.09 C337.839999,108.19 337.839999,109.99 337.839999,112.09 C341.619999,111.04 344.859999,110.14 348.639999,109.09 C348.639999,109.09 348.639999,109.09 348.639999,109.09 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path d="M351.639999,154 L351.639999,100" id="Line-42" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <path d="M46.6399994,154 L46.6399994,100" id="Line-43" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
            <text id="scrollWidth-=-324px" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle">
--- a/2-ui/1-document/16-metrics-window/document-client-width-height.svg
+++ b/2-ui/1-document/16-metrics-window/document-client-width-height.svg
@ -23,11 +23,7 @@
                <tspan x="229" y="197">document.documentElement.clientWidth</tspan>
            </text>
            <path d="M457.012291,168.153273 L277.502296,168.153273" id="Line-3" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-3-decoration-1" d="M278.012291,168.153273 C281.792291,169.203273 285.032291,170.103273 288.812291,171.153273 C288.812291,169.053273 288.812291,167.253273 288.812291,165.153273 C285.032291,166.203273 281.792291,167.103273 278.012291,168.153273 C278.012291,168.153273 278.012291,168.153273 278.012291,168.153273 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path id="Line-3-decoration-2" d="M456.212291,168.153273 C452.432291,169.203273 449.192291,170.103273 445.412291,171.153273 C445.412291,169.053273 445.412291,167.253273 445.412291,165.153273 C449.192291,166.203273 452.432291,167.103273 456.212291,168.153273 C456.212291,168.153273 456.212291,168.153273 456.212291,168.153273 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M257.5,151.012291 L257.5,14.5022964" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M257.5,15.012291 C256.45,18.792291 255.55,22.032291 254.5,25.812291 C256.6,25.812291 258.4,25.812291 260.5,25.812291 C259.45,22.032291 258.55,18.792291 257.5,15.012291 C257.5,15.012291 257.5,15.012291 257.5,15.012291 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path id="Line-decoration-2" d="M257.5,150.212291 C256.45,146.432291 255.55,143.192291 254.5,139.412291 C256.6,139.412291 258.4,139.412291 260.5,139.412291 C259.45,143.192291 258.55,146.432291 257.5,150.212291 C257.5,150.212291 257.5,150.212291 257.5,150.212291 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
        </g>
    </g>
 </svg>
--- a/2-ui/1-document/17-coordinates/coords.svg
+++ b/2-ui/1-document/17-coordinates/coords.svg
@ -34,17 +34,9 @@
                <tspan x="106" y="217">right</tspan>
            </text>
            <path d="M246.5,145 L246.5,78.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M246.5,79 C245.45,82.78 244.55,86.02 243.5,89.8 C245.6,89.8 247.4,89.8 249.5,89.8 C248.45,86.02 247.55,82.78 246.5,79 C246.5,79 246.5,79 246.5,79 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path id="Line-decoration-2" d="M246.5,144.2 C245.45,140.42 244.55,137.18 243.5,133.4 C245.6,133.4 247.4,133.4 249.5,133.4 C248.45,137.18 247.55,140.42 246.5,144.2 C246.5,144.2 246.5,144.2 246.5,144.2 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M275.5,170.012291 L275.5,78.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M275.5,79.012291 C274.45,82.792291 273.55,86.032291 272.5,89.812291 C274.6,89.812291 276.4,89.812291 278.5,89.812291 C277.45,86.032291 276.55,82.792291 275.5,79.012291 C275.5,79.012291 275.5,79.012291 275.5,79.012291 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path id="Line-decoration-2" d="M275.5,169.212291 C274.45,165.432291 273.55,162.192291 272.5,158.412291 C274.6,158.412291 276.4,158.412291 278.5,158.412291 C277.45,162.192291 276.55,165.432291 275.5,169.212291 C275.5,169.212291 275.5,169.212291 275.5,169.212291 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M222.012291,224.5 L29.5022964,224.5" id="Line-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-2-decoration-1" d="M30.012291,224.5 C33.792291,225.55 37.032291,226.45 40.812291,227.5 C40.812291,225.4 40.812291,223.6 40.812291,221.5 C37.032291,222.55 33.792291,223.45 30.012291,224.5 C30.012291,224.5 30.012291,224.5 30.012291,224.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path id="Line-2-decoration-2" d="M221.212291,224.5 C217.432291,225.55 214.192291,226.45 210.412291,227.5 C210.412291,225.4 210.412291,223.6 210.412291,221.5 C214.192291,222.55 217.432291,223.45 221.212291,224.5 C221.212291,224.5 221.212291,224.5 221.212291,224.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M149.012291,188.5 L29.5022888,188.5" id="Line-3" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-3-decoration-1" d="M30.012291,188.5 C33.792291,189.55 37.032291,190.45 40.812291,191.5 C40.812291,189.4 40.812291,187.6 40.812291,185.5 C37.032291,186.55 33.792291,187.45 30.012291,188.5 C30.012291,188.5 30.012291,188.5 30.012291,188.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path id="Line-3-decoration-2" d="M148.212291,188.5 C144.432291,189.55 141.192291,190.45 137.412291,191.5 C137.412291,189.4 137.412291,187.6 137.412291,185.5 C141.192291,186.55 144.432291,187.45 148.212291,188.5 C148.212291,188.5 148.212291,188.5 148.212291,188.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
        </g>
    </g>
 </svg>
--- a/2-ui/1-document/4-traversing-dom/dom-links-elements.svg
+++ b/2-ui/1-document/4-traversing-dom/dom-links-elements.svg
@ -21,7 +21,6 @@
                <tspan x="289.224609" y="95">(если внутри body)</tspan>
            </text>
            <path d="M221.5,74.5 L221.5,44.5" id="Line-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-4-decoration-1" d="M221.5,44.5 C220.45,48.28 219.55,51.52 218.5,55.3 C220.6,55.3 222.4,55.3 224.5,55.3 C223.45,51.52 222.55,48.28 221.5,44.5 C221.5,44.5 221.5,44.5 221.5,44.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M233.2715,139.2195 C233.9275,139.2195 234.4565,139.7755 234.4565,140.4575 C234.4565,141.1385 233.9275,141.6935 233.2455,141.6935 C232.5895,141.6935 232.0595,141.1385 232.0595,140.4575 C232.0595,139.7755 232.5895,139.2195 233.2715,139.2195 L233.2715,139.2195 Z M231.1755,144.6715 C230.4935,144.6715 229.9645,144.1165 229.9645,143.4345 C229.9645,142.7535 230.4935,142.1985 231.1515,142.1985 C231.8325,142.1985 232.3625,142.7535 232.3625,143.4345 C232.3625,144.1165 231.8325,144.6715 231.1755,144.6715 L231.1755,144.6715 Z M231.1755,136.2415 C231.8325,136.2415 232.3625,136.7975 232.3625,137.4785 C232.3625,138.1605 231.8325,138.7155 231.1515,138.7155 C230.4935,138.7155 229.9645,138.1605 229.9645,137.4785 C229.9645,136.7975 230.4935,136.2415 231.1755,136.2415 L231.1755,136.2415 Z M229.6615,139.2955 C230.3185,139.2955 230.8475,139.8505 230.8475,140.5325 C230.8475,141.1885 230.3185,141.7435 229.6365,141.7435 C228.9805,141.7435 228.4495,141.1885 228.4495,140.5075 C228.4495,139.8505 228.9805,139.2955 229.6615,139.2955 L229.6615,139.2955 Z M229.0815,147.6495 C228.4245,147.6495 227.8695,147.0945 227.8695,146.4135 C227.8695,145.7315 228.4005,145.2015 229.0565,145.2015 C229.7375,145.2015 230.2675,145.7315 230.2675,146.4135 C230.2675,147.0945 229.7375,147.6495 229.0815,147.6495 L229.0815,147.6495 Z M229.0815,133.2635 C229.7375,133.2635 230.2675,133.8195 230.2675,134.5005 C230.2675,135.1815 229.7375,135.7375 229.0565,135.7375 C228.4005,135.7375 227.8695,135.1815 227.8695,134.5005 C227.8695,133.8195 228.4245,133.2635 229.0815,133.2635 L229.0815,133.2635 Z M226.9875,150.6275 C226.3305,150.6275 225.7755,150.0725 225.7755,149.3905 C225.7755,148.7105 226.3045,148.1795 226.9605,148.1795 C227.6425,148.1795 228.1725,148.7105 228.1725,149.3905 C228.1725,150.0725 227.6425,150.6275 226.9875,150.6275 L226.9875,150.6275 Z M226.9875,130.2855 C227.6425,130.2855 228.1725,130.8415 228.1725,131.5225 C228.1725,132.2035 227.6425,132.7595 226.9605,132.7595 C226.3045,132.7595 225.7755,132.2035 225.7755,131.5225 C225.7755,130.8415 226.3305,130.2855 226.9875,130.2855 L226.9875,130.2855 Z M226.0015,139.2955 C226.6575,139.2955 227.1885,139.8505 227.1885,140.5325 C227.1885,141.1885 226.6575,141.7435 225.9775,141.7435 C225.3215,141.7435 224.7905,141.1885 224.7905,140.5075 C224.7905,139.8505 225.3465,139.2955 226.0015,139.2955 L226.0015,139.2955 Z M222.3675,139.2955 C223.0245,139.2955 223.5545,139.8505 223.5545,140.5325 C223.5545,141.1885 222.9985,141.7435 222.3425,141.7435 C221.6865,141.7435 221.1305,141.1885 221.1305,140.5075 C221.1305,139.8505 221.6865,139.2955 222.3675,139.2955 L222.3675,139.2955 Z M218.7085,139.2955 C219.3645,139.2955 219.8945,139.8505 219.8945,140.5325 C219.8945,141.1885 219.3645,141.7435 218.6835,141.7435 C218.0275,141.7435 217.4965,141.1885 217.4965,140.5075 C217.4965,139.8505 218.0275,139.2955 218.7085,139.2955 L218.7085,139.2955 Z M215.0485,139.2955 C215.7045,139.2955 216.2355,139.8505 216.2355,140.5325 C216.2355,141.1885 215.7045,141.7435 215.0235,141.7435 C214.3665,141.7435 213.8365,141.1885 213.8365,140.5075 C213.8365,139.8505 214.3925,139.2955 215.0485,139.2955 L215.0485,139.2955 Z M211.4145,139.2955 C212.0705,139.2955 212.6005,139.8505 212.6005,140.5325 C212.6005,141.1885 212.0455,141.7435 211.3885,141.7435 C210.7335,141.7435 210.1775,141.1885 210.1775,140.5075 C210.1775,139.8505 210.7335,139.2955 211.4145,139.2955 L211.4145,139.2955 Z M207.7545,139.2955 C208.4105,139.2955 208.9415,139.8505 208.9415,140.5325 C208.9415,141.1885 208.4105,141.7435 207.7295,141.7435 C207.0735,141.7435 206.5435,141.1885 206.5435,140.5075 C206.5435,139.8505 207.0735,139.2955 207.7545,139.2955 L207.7545,139.2955 Z" id="Fill-7" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(220.500000, 140.456500) rotate(-90.000000) translate(-220.500000, -140.456500) "></path>
            <path d="M14.5,115 L427,115" id="Line-5" stroke="#8A704D" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <text id="parentElement" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold">
@ -33,16 +32,13 @@
                <tspan x="201.051859" y="232">&lt;DIV&gt;</tspan>
            </text>
            <path d="M220.5,207.5 L220.5,181.5" id="Line-6" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-6-decoration-1" d="M220.5,181.5 C219.45,185.28 218.55,188.52 217.5,192.3 C219.6,192.3 221.4,192.3 223.5,192.3 C222.45,188.52 221.55,185.28 220.5,181.5 C220.5,181.5 220.5,181.5 220.5,181.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M267.5,226.5 L427,226.5" id="Line-7" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-7-decoration-1" d="M426.5,226.5 C422.72,225.45 419.48,224.55 415.7,223.5 C415.7,225.6 415.7,227.4 415.7,229.5 C419.48,228.45 422.72,227.55 426.5,226.5 C426.5,226.5 426.5,226.5 426.5,226.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="nextElementSibling" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold">
                <tspan x="276" y="212" fill="#8A704D">next</tspan>
                <tspan x="306.789062" y="212" fill="#EE6B47">Element</tspan>
                <tspan x="360.669922" y="212" fill="#8A704D">Sibling</tspan>
            </text>
            <path d="M168,226.5 L12,226.5" id="Line-8" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-8-decoration-1" d="M12,226.5 C15.78,227.55 19.02,228.45 22.8,229.5 C22.8,227.4 22.8,225.6 22.8,223.5 C19.02,224.55 15.78,225.45 12,226.5 C12,226.5 12,226.5 12,226.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="previousElementSibli" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold">
                <tspan x="6" y="212" fill="#8A704D">previous</tspan>
                <tspan x="67.578125" y="212" fill="#EE6B47">Element</tspan>
--- a/2-ui/1-document/4-traversing-dom/dom-links.svg
+++ b/2-ui/1-document/4-traversing-dom/dom-links.svg
@ -25,10 +25,8 @@
                <tspan x="272.224609" y="173">(если внутри body)</tspan>
            </text>
            <path d="M209.5,150.5 L209.5,120.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M209.5,120.5 C208.45,124.28 207.55,127.52 206.5,131.3 C208.6,131.3 210.4,131.3 212.5,131.3 C211.45,127.52 210.55,124.28 209.5,120.5 C209.5,120.5 209.5,120.5 209.5,120.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M221.2715,215.2195 C221.9275,215.2195 222.4565,215.7755 222.4565,216.4575 C222.4565,217.1385 221.9275,217.6935 221.2455,217.6935 C220.5895,217.6935 220.0595,217.1385 220.0595,216.4575 C220.0595,215.7755 220.5895,215.2195 221.2715,215.2195 L221.2715,215.2195 Z M219.1755,220.6715 C218.4935,220.6715 217.9645,220.1165 217.9645,219.4345 C217.9645,218.7535 218.4935,218.1985 219.1515,218.1985 C219.8325,218.1985 220.3625,218.7535 220.3625,219.4345 C220.3625,220.1165 219.8325,220.6715 219.1755,220.6715 L219.1755,220.6715 Z M219.1755,212.2415 C219.8325,212.2415 220.3625,212.7975 220.3625,213.4785 C220.3625,214.1605 219.8325,214.7155 219.1515,214.7155 C218.4935,214.7155 217.9645,214.1605 217.9645,213.4785 C217.9645,212.7975 218.4935,212.2415 219.1755,212.2415 L219.1755,212.2415 Z M217.6615,215.2955 C218.3185,215.2955 218.8475,215.8505 218.8475,216.5325 C218.8475,217.1885 218.3185,217.7435 217.6365,217.7435 C216.9805,217.7435 216.4495,217.1885 216.4495,216.5075 C216.4495,215.8505 216.9805,215.2955 217.6615,215.2955 L217.6615,215.2955 Z M217.0815,223.6495 C216.4245,223.6495 215.8695,223.0945 215.8695,222.4135 C215.8695,221.7315 216.4005,221.2015 217.0565,221.2015 C217.7375,221.2015 218.2675,221.7315 218.2675,222.4135 C218.2675,223.0945 217.7375,223.6495 217.0815,223.6495 L217.0815,223.6495 Z M217.0815,209.2635 C217.7375,209.2635 218.2675,209.8195 218.2675,210.5005 C218.2675,211.1815 217.7375,211.7375 217.0565,211.7375 C216.4005,211.7375 215.8695,211.1815 215.8695,210.5005 C215.8695,209.8195 216.4245,209.2635 217.0815,209.2635 L217.0815,209.2635 Z M214.9875,226.6275 C214.3305,226.6275 213.7755,226.0725 213.7755,225.3905 C213.7755,224.7105 214.3045,224.1795 214.9605,224.1795 C215.6425,224.1795 216.1725,224.7105 216.1725,225.3905 C216.1725,226.0725 215.6425,226.6275 214.9875,226.6275 L214.9875,226.6275 Z M214.9875,206.2855 C215.6425,206.2855 216.1725,206.8415 216.1725,207.5225 C216.1725,208.2035 215.6425,208.7595 214.9605,208.7595 C214.3045,208.7595 213.7755,208.2035 213.7755,207.5225 C213.7755,206.8415 214.3305,206.2855 214.9875,206.2855 L214.9875,206.2855 Z M214.0015,215.2955 C214.6575,215.2955 215.1885,215.8505 215.1885,216.5325 C215.1885,217.1885 214.6575,217.7435 213.9775,217.7435 C213.3215,217.7435 212.7905,217.1885 212.7905,216.5075 C212.7905,215.8505 213.3465,215.2955 214.0015,215.2955 L214.0015,215.2955 Z M210.3675,215.2955 C211.0245,215.2955 211.5545,215.8505 211.5545,216.5325 C211.5545,217.1885 210.9985,217.7435 210.3425,217.7435 C209.6865,217.7435 209.1305,217.1885 209.1305,216.5075 C209.1305,215.8505 209.6865,215.2955 210.3675,215.2955 L210.3675,215.2955 Z M206.7085,215.2955 C207.3645,215.2955 207.8945,215.8505 207.8945,216.5325 C207.8945,217.1885 207.3645,217.7435 206.6835,217.7435 C206.0275,217.7435 205.4965,217.1885 205.4965,216.5075 C205.4965,215.8505 206.0275,215.2955 206.7085,215.2955 L206.7085,215.2955 Z M203.0485,215.2955 C203.7045,215.2955 204.2355,215.8505 204.2355,216.5325 C204.2355,217.1885 203.7045,217.7435 203.0235,217.7435 C202.3665,217.7435 201.8365,217.1885 201.8365,216.5075 C201.8365,215.8505 202.3925,215.2955 203.0485,215.2955 L203.0485,215.2955 Z M199.4145,215.2955 C200.0705,215.2955 200.6005,215.8505 200.6005,216.5325 C200.6005,217.1885 200.0455,217.7435 199.3885,217.7435 C198.7335,217.7435 198.1775,217.1885 198.1775,216.5075 C198.1775,215.8505 198.7335,215.2955 199.4145,215.2955 L199.4145,215.2955 Z M195.7545,215.2955 C196.4105,215.2955 196.9415,215.8505 196.9415,216.5325 C196.9415,217.1885 196.4105,217.7435 195.7295,217.7435 C195.0735,217.7435 194.5435,217.1885 194.5435,216.5075 C194.5435,215.8505 195.0735,215.2955 195.7545,215.2955 L195.7545,215.2955 Z" id="Fill-7" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(208.500000, 216.456500) rotate(-90.000000) translate(-208.500000, -216.456500) "></path>
            <path d="M209.5,83.5 L209.5,53.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-2-decoration-1" d="M209.5,53.5 C208.45,57.28 207.55,60.52 206.5,64.3 C208.6,64.3 210.4,64.3 212.5,64.3 C211.45,60.52 210.55,57.28 209.5,53.5 C209.5,53.5 209.5,53.5 209.5,53.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M2.5,191 L415,191" id="Line" stroke="#8A704D" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <text id="parentNode" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
                <tspan x="172" y="248">parentNode</tspan>
@ -38,14 +36,11 @@
                <tspan x="189.051859" y="308">&lt;DIV&gt;</tspan>
            </text>
            <path d="M208.5,283.5 L208.5,257.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M208.5,257.5 C207.45,261.28 206.55,264.52 205.5,268.3 C207.6,268.3 209.4,268.3 211.5,268.3 C210.45,264.52 209.55,261.28 208.5,257.5 C208.5,257.5 208.5,257.5 208.5,257.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M255.5,302.5 L368,302.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M367.5,302.5 C363.72,301.45 360.48,300.55 356.7,299.5 C356.7,301.6 356.7,303.4 356.7,305.5 C360.48,304.45 363.72,303.55 367.5,302.5 C367.5,302.5 367.5,302.5 367.5,302.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="nextSibling" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
                <tspan x="264" y="288">nextSibling</tspan>
            </text>
            <path d="M164.5,302.5 L50,302.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M50.5,302.5 C54.28,303.55 57.52,304.45 61.3,305.5 C61.3,303.4 61.3,301.6 61.3,299.5 C57.52,300.55 54.28,301.45 50.5,302.5 C50.5,302.5 50.5,302.5 50.5,302.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="previousSibling" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
                <tspan x="50" y="288">previousSibling</tspan>
            </text>
--- a/2-ui/2-events-and-interfaces/4-event-bubbling/eventflow.svg
+++ b/2-ui/2-events-and-interfaces/4-event-bubbling/eventflow.svg
@ -1,194 +1,199 @@
-<svg xmlns="http://www.w3.org/2000/svg"
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-     xmlns:xlink="http://www.w3.org/1999/xlink"
+<svg width="641px" height="633px" viewBox="0 0 641 633" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-     width="100%" height="100%" viewBox="0 0 640 690">
+    <!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
-
+    <title>eventflow.svg</title>
-  <title>DOM Level 3 Events: Event Flow</title>
+    <desc>Created with bin/sketchtool.</desc>
-  <desc>Alternate description</desc>
+    <defs></defs>
-    
+    <g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-  
+        <g id="eventflow.svg" sketch:type="MSArtboardGroup">
-  <defs id="defs-1">
+            <g id="eventflow" sketch:type="MSLayerGroup" transform="translate(22.000000, 28.000000)">
-    <path id="arrowhead" d="M-9,-4 L0,0 -9,4 Z" stroke-linejoin="round" stroke-linecap="round"/>
+                <g id="nodes">
-    <marker id="blackArrow" viewBox="-13 -5 14 10" refX="-4" markerWidth="10" markerHeight="20" orient="auto">
+                    <g id="Window-node" transform="translate(224.684713, 0.000000)">
-      <use xlink:href="#arrowhead" stroke="black" fill="black"  />
+                        <g id="Group">
-    </marker>
+                            <rect id="Rectangle-path" stroke="#000000" fill="#DCDCDC" sketch:type="MSShapeGroup" x="0" y="0" width="134.426752" height="34.5671642"></rect>
-    <marker id="redArrow" viewBox="-13 -5 14 10" refX="-4" markerWidth="10" markerHeight="20" orient="auto">
+                            <text id="Window" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="15.5552239" font-weight="normal">
-      <use xlink:href="#arrowhead" stroke="red" fill="red"  />
+                                <tspan x="39.3678344" y="21.9134328">Window</tspan>
-    </marker>
+                            </text>
-    <marker id="greenArrow" viewBox="-13 -5 14 10" refX="-4" markerWidth="10" markerHeight="20" orient="auto">
+                        </g>
-      <use xlink:href="#arrowhead" stroke="green" fill="green"  />
+                    </g>
-    </marker>
+                    <g id="document-node" transform="translate(234.286624, 60.492537)">
-
+                        <g id="Group">
-    <filter x="-5%" y="-5%" width="120%" height="120%" id="dropShadow">
+                            <rect id="Rectangle-path" stroke="#000000" fill="#DCDCDC" sketch:type="MSShapeGroup" x="0" y="0" width="115.22293" height="34.5671642"></rect>
-      <feGaussianBlur stdDeviation="2 2" in="SourceAlpha"/> 
+                            <text id="Document" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="15.5552239" font-weight="normal">
-      <feOffset dx="4" dy="4"/>
+                                <tspan x="22.0843949" y="21.9134328">Document</tspan>
-      <feComponentTransfer result="shadow">
+                            </text>
-        <feFuncA type="linear" slope=".55" intercept="0"/>
+                        </g>
-      </feComponentTransfer>
+                    </g>
-      <feMerge>
+                    <g id="html-node" transform="translate(243.888535, 120.985075)">
-        <feMergeNode/>
+                        <rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
-        <feMergeNode in="SourceGraphic"/>
+                        <text id="&lt;html&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="15.5552239" font-weight="normal">
-      </feMerge>
+                            <tspan x="23.044586" y="21.9134328">&lt;html&gt;</tspan>
-    </filter>
+                        </text>
-
+                    </g>
-  </defs>
+                    <g id="body-node" transform="translate(243.888535, 181.477612)">
-  
+                        <rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
-
+                        <text id="&lt;body&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="15.5552239" font-weight="normal">
-  <g id="nodes" font-family="Verdana, sans-serif" font-size="18" fill="black" text-anchor="middle" stroke="none" stroke-width="2">
+                            <tspan x="23.044586" y="21.9134328">&lt;body&gt;</tspan>
-    <g id="Window-node" transform="translate(310, 10)">
+                        </text>
-      <a xlink:href="../DOM3-Events.html#glossary-window" target="_parent">
+                    </g>
-        <rect x="-70" y="0" width="140" height="40" fill="gainsboro" stroke="black" filter="url(#dropShadow)" />
+                    <g id="table-node" transform="translate(243.888535, 241.970149)">
-        <text x="0" y="26">Window</text>
+                        <rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
-      </a>
+                        <text id="&lt;table&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="15.5552239" font-weight="normal">
                            <tspan x="23.044586" y="21.9134328">&lt;table&gt;</tspan>
                        </text>
                    </g>
                    <g id="tbody-node" transform="translate(243.888535, 302.462687)">
                        <rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
                        <text id="&lt;tbody&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="15.5552239" font-weight="normal">
                            <tspan x="19.2038217" y="21.9134328">&lt;tbody&gt;</tspan>
                        </text>
                    </g>
                    <g id="tr_1-node" transform="translate(80.656051, 380.238806)">
                        <rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
                        <text id="&lt;tr&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="15.5552239" font-weight="normal">
                            <tspan x="35.5270701" y="21.9134328">&lt;tr&gt;</tspan>
                        </text>
                    </g>
                    <g id="tr_2-node" transform="translate(426.324841, 380.238806)">
                        <rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
                        <text id="&lt;tr&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="15.5552239" font-weight="normal">
                            <tspan x="33.6066879" y="21.9134328">&lt;tr&gt;</tspan>
                        </text>
                    </g>
                    <g id="tr_1_td_1-node" transform="translate(13.442675, 458.014925)">
                        <rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
                        <text id="&lt;td&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="15.5552239" font-weight="normal">
                            <tspan x="31.6863057" y="21.9134328">&lt;td&gt;</tspan>
                        </text>
                    </g>
                    <g id="tr_1_td_1_text-node" transform="translate(0.000000, 518.507463)">
                        <ellipse id="Oval" stroke="#000000" fill="#4682B4" sketch:type="MSShapeGroup" cx="61.4522293" cy="30.2462687" rx="61.4522293" ry="30.2462687"></ellipse>
                        <text id="Shady-Grove" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Helvetica" font-size="12.9626866" font-weight="normal">
                            <tspan x="19.2038217" y="34.6044776" fill="#000000">Shady Grove</tspan>
                        </text>
                    </g>
                    <g id="tr_1_td_2-node" transform="translate(147.869427, 458.014925)">
                        <rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
                        <text id="&lt;td&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="15.5552239" font-weight="normal">
                            <tspan x="33.6066879" y="21.9134328">&lt;td&gt;</tspan>
                        </text>
                    </g>
                    <g id="tr_1_td_2_text-node" transform="translate(134.426752, 518.507463)">
                        <ellipse id="Oval" stroke="#000000" fill="#4682B4" sketch:type="MSShapeGroup" cx="61.4522293" cy="30.2462687" rx="61.4522293" ry="30.2462687"></ellipse>
                        <text id="Aeolian" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Helvetica" font-size="12.9626866" font-weight="normal">
                            <tspan x="36.9673567" y="34.6044776" fill="#000000">Aeolian</tspan>
                        </text>
                    </g>
                    <g id="tr_2_td_1-node" transform="translate(359.111465, 458.014925)">
                        <rect id="Rectangle-path" stroke="#000000" fill="#0000FF" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
                        <text id="&lt;td&gt;" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Consolas" font-size="15.5552239" font-weight="normal">
                            <tspan x="27.8455414" y="22.3701493" fill="#000000">&lt;td&gt;</tspan>
                        </text>
                    </g>
                    <g id="tr_2_td_1_text-node" transform="translate(345.668790, 518.507463)">
                        <ellipse id="Oval" stroke="#000000" fill="#4682B4" sketch:type="MSShapeGroup" cx="61.4522293" cy="30.2462687" rx="61.4522293" ry="30.2462687"></ellipse>
                        <g id="Group" transform="translate(12.482484, 15.555224)" font-size="12.9626866" font-family="Helvetica" fill="#FFFFFF" sketch:type="MSTextLayer" font-weight="normal">
                            <text id="Over-the-River,">
                                <tspan x="0.480095541" y="13" fill="#000000">Over the River,</tspan>
                            </text>
                            <text id="Charlie">
                                <tspan x="25.9251592" y="30.2835821" fill="#000000">Charlie</tspan>
                            </text>
                        </g>
                    </g>
                    <g id="tr_2_td_2-node" transform="translate(493.538217, 458.014925)">
                        <rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
                        <text id="&lt;td&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="15.5552239" font-weight="normal">
                            <tspan x="33.6066879" y="21.9134328">&lt;td&gt;</tspan>
                        </text>
                    </g>
                    <g id="tr_2_td_2_text-node" transform="translate(480.095541, 518.507463)">
                        <ellipse id="Oval" stroke="#000000" fill="#4682B4" sketch:type="MSShapeGroup" cx="61.4522293" cy="30.2462687" rx="61.4522293" ry="30.2462687"></ellipse>
                        <text id="Dorian" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Helvetica" font-size="12.9626866" font-weight="normal">
                            <tspan x="39.8479299" y="34.6044776" fill="#000000">Dorian</tspan>
                        </text>
                    </g>
                </g>
                <g id="edges" transform="translate(61.452229, 34.567164)" stroke="#000000" stroke-width="2" sketch:type="MSShapeGroup">
                    <path d="M230.44586,0 L230.44586,19.8761194" id="window-document" fill="#000000"></path>
                    <path d="M230.44586,60.4925373 L230.44586,80.3686567" id="document-html" fill="#000000"></path>
                    <path d="M230.44586,120.985075 L230.44586,140.861194" id="html-body" fill="#000000"></path>
                    <path d="M230.44586,181.477612 L230.44586,201.353731" id="body-table" fill="#000000"></path>
                    <path d="M230.44586,241.970149 L230.44586,261.846269" id="table-tbody" fill="#000000"></path>
                    <path d="M230.44586,302.462687 C230.44586,313.985075 214.442675,319.746269 182.436306,319.746269 L86.4171975,319.746269 C73.6146497,319.746269 67.2133758,326.371642 67.2133758,339.622388" id="tbody-tr_1"></path>
                    <path d="M230.44586,302.462687 C230.44586,313.985075 252.850318,319.746269 297.659236,319.746269 L393.678344,319.746269 C406.480892,319.746269 412.882166,326.371642 412.882166,339.622388" id="tbody-tr_2"></path>
                    <path d="M67.2133758,380.238806 C67.2133758,391.761194 60.8121019,397.522388 48.0095541,397.522388 L19.2038217,397.522388 C6.40127389,397.522388 0,404.147761 0,417.398507" id="tr_1-tr_2_td_1"></path>
                    <path d="M67.2133758,380.238806 C67.2133758,391.761194 73.6146497,397.522388 86.4171975,397.522388 L115.22293,397.522388 C128.025478,397.522388 134.426752,404.147761 134.426752,417.398507" id="tr_1-tr_2_td_2"></path>
                    <path d="M412.882166,380.238806 C412.882166,391.761194 406.480892,397.522388 393.678344,397.522388 L364.872611,397.522388 C352.070064,397.522388 345.66879,404.147761 345.66879,417.398507" id="tr_2-tr_2_td_1"></path>
                    <path d="M412.882166,380.238806 C412.882166,391.761194 425.684713,397.522388 451.289809,397.522388 L460.89172,397.522388 C473.694268,397.522388 480.095541,404.147761 480.095541,417.398507" id="tr_2-tr_2_td_2"></path>
                    <path d="M0,458.014925 L0,477.891045" id="tr_1_td_1-text" fill="#000000"></path>
                    <path d="M134.426752,458.014925 L134.426752,477.891045" id="tr_1_td_2-text" fill="#000000"></path>
                    <path d="M345.66879,458.014925 L345.66879,477.891045" id="tr_2_td_1-text" fill="#000000"></path>
                    <path d="M482.015924,458.014925 L482.015924,477.891045" id="tr_2_td_2-text" fill="#000000"></path>
                </g>
                <g id="event-flow" transform="translate(103.700637, 14.691045)">
                    <g id="target_phase" transform="translate(186.277070, 443.323881)">
                        <text id="Target" fill="#0000FF" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
                            <tspan x="0.960191083" y="34.1477612" fill="#000000">Target</tspan>
                        </text>
                        <text id="Phase" fill="#0000FF" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
                            <tspan x="0.480095541" y="51.4313433" fill="#000000">Phase</tspan>
                        </text>
                        <text id="(2)" fill="#0000FF" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
                            <tspan x="15.8431529" y="68.7149254" fill="#000000">(2)</tspan>
                        </text>
                        <rect id="Rectangle-path" stroke="#000000" stroke-width="5" sketch:type="MSShapeGroup" x="69.133758" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
                    </g>
                    <g id="capture_phase">
                        <text id="Capture" fill="#FF0000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
                            <tspan x="0" y="166.367164" fill="#000000">Capture</tspan>
                        </text>
                        <text id="Phase" fill="#FF0000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
                            <tspan x="7.20143312" y="183.650746" fill="#000000">Phase</tspan>
                        </text>
                        <text id="(1)" fill="#FF0000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
                            <tspan x="22.5644904" y="200.934328" fill="#000000">(1)</tspan>
                        </text>
                        <path d="M116.183121,0.864179104 C77.7754777,-1.72835821 77.7754777,41.480597 119.063694,50.1223881" id="capture_phase_arrow" stroke="#FF0000" stroke-width="3" sketch:type="MSShapeGroup"></path>
                        <g id="capture_phase_arrow-link" transform="translate(92.178344, 60.492537)" stroke="#FF0000" stroke-width="3" sketch:type="MSShapeGroup">
                            <path d="M28.8057325,0.864179104 C-9.60191083,-1.72835821 -9.60191083,41.480597 31.6863057,50.1223881" id="capture_phase_arrow"></path>
                        </g>
                        <g id="capture_phase_arrow-link" transform="translate(96.979299, 120.985075)" stroke="#FF0000" stroke-width="3" sketch:type="MSShapeGroup">
                            <path d="M28.8057325,0.864179104 C-9.60191083,-1.72835821 -9.60191083,41.480597 31.6863057,50.1223881" id="capture_phase_arrow"></path>
                        </g>
                        <g id="capture_phase_arrow-link" transform="translate(96.979299, 181.477612)" stroke="#FF0000" stroke-width="3" sketch:type="MSShapeGroup">
                            <path d="M28.8057325,0.864179104 C-9.60191083,-1.72835821 -9.60191083,41.480597 31.6863057,50.1223881" id="capture_phase_arrow"></path>
                        </g>
                        <g id="capture_phase_arrow-link" transform="translate(96.979299, 241.970149)" stroke="#FF0000" stroke-width="3" sketch:type="MSShapeGroup">
                            <path d="M28.8057325,0.864179104 C-9.60191083,-1.72835821 -9.60191083,41.480597 31.6863057,50.1223881" id="capture_phase_arrow"></path>
                        </g>
                        <path d="M125.785032,303.326866 C87.3773885,300.734328 87.3773885,385.423881 301.5,372.461194" id="capture_phase_arrow2" stroke="#FF0000" stroke-width="3" sketch:type="MSShapeGroup"></path>
                        <path d="M301.5,385.423881 C207.401274,382.831343 207.401274,437.274627 239.08758,450.237313" id="capture_phase_arrow3" stroke="#FF0000" stroke-width="3" sketch:type="MSShapeGroup"></path>
                    </g>
                    <g id="bubble_phase" transform="translate(250.609873, 12.962687)">
                        <text id="Bubbling" fill="#008000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
                            <tspan x="72.9745223" y="239.822388" fill="#000000">Bubbling</tspan>
                        </text>
                        <text id="Phase" fill="#008000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
                            <tspan x="83.0565287" y="257.10597" fill="#000000">Phase</tspan>
                        </text>
                        <text id="(3)" fill="#008000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
                            <tspan x="98.419586" y="274.389552" fill="#000000">(3)</tspan>
                        </text>
                        <path d="M112.342357,437.274627 C244.848726,381.102985 244.848726,369.868657 179.555732,372.461194" id="bubble_phase_arrow3" stroke="#008000" stroke-width="3" sketch:type="MSShapeGroup"></path>
                        <path d="M182.436306,358.634328 C220.843949,349.992537 220.843949,307.647761 1.92038217,299.00597" id="bubble_phase_arrow2" stroke="#008000" stroke-width="3" sketch:type="MSShapeGroup"></path>
                        <path d="M0,287.771642 C38.4076433,285.179104 38.4076433,250.61194 0,241.970149" id="bubble_phase_arrow" stroke="#008000" stroke-width="3" sketch:type="MSShapeGroup"></path>
                        <g id="bubble_phase_arrow-link" transform="translate(0.000000, 181.477612)" stroke="#008000" stroke-width="3" sketch:type="MSShapeGroup">
                            <path d="M0,45.8014925 C38.4076433,43.2089552 38.4076433,8.64179104 0,0" id="bubble_phase_arrow"></path>
                        </g>
                        <g id="bubble_phase_arrow-link" transform="translate(0.000000, 120.985075)" stroke="#008000" stroke-width="3" sketch:type="MSShapeGroup">
                            <path d="M0,45.8014925 C38.4076433,43.2089552 38.4076433,8.64179104 0,0" id="bubble_phase_arrow"></path>
                        </g>
                        <path d="M0,106.29403 C48.0095541,103.701493 48.0095541,69.1343284 9.60191083,60.4925373" id="bubble_phase_arrow4" stroke="#008000" stroke-width="3" sketch:type="MSShapeGroup"></path>
                        <path d="M9.60191083,45.8014925 C57.611465,43.2089552 57.611465,8.64179104 19.2038217,0" id="bubble_phase_arrow" stroke="#008000" stroke-width="3" sketch:type="MSShapeGroup"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
    <g id="document-node" transform="translate(310, 80)">
      <a xlink:href="../DOM3-Events.html#glossary-document" target="_parent">
        <rect x="-60" y="0" width="120" height="40" fill="gainsboro" stroke="black" filter="url(#dropShadow)" />
        <text x="0" y="26">Document</text>
      </a>
    </g>
    <g id="html-node" transform="translate(310, 150)">
      <rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
      <text x="0" y="26">&lt;html&gt;</text>
    </g>
    <g id="body-node" transform="translate(310, 220)">
      <rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
      <text x="0" y="26">&lt;body&gt;</text>
    </g>
    <g id="table-node" transform="translate(310, 290)">
      <rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
      <text x="0" y="26">&lt;table&gt;</text>
    </g>
    <g id="tbody-node" transform="translate(310, 360)">
      <rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
      <text x="0" y="26">&lt;tbody&gt;</text>
    </g>
    <g id="tr_1-node" transform="translate(140, 450)">
      <rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
      <text x="0" y="26">&lt;tr&gt;</text>
    </g>
    <g id="tr_2-node" transform="translate(500, 450)">
      <rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
      <text x="0" y="26">&lt;tr&gt;</text>
    </g>
    <g id="tr_1_td_1-node" transform="translate(70, 540)">
      <rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
      <text x="0" y="26">&lt;td&gt;</text>
    </g>
    <g id="tr_1_td_1_text-node" transform="translate(70, 610)">
      <ellipse cx="0" cy="35" rx="64" ry="35" fill="steelblue" stroke="black" filter="url(#dropShadow)"/>
      <text x="0" y="40" font-size="15" fill="white" text-anchor="middle">Shady Grove</text>
    </g>
    <g id="tr_1_td_2-node" transform="translate(210, 540)">
      <rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
      <text x="0" y="26">&lt;td&gt;</text>
    </g>
    <g id="tr_1_td_2_text-node" transform="translate(210, 610)">
      <ellipse cx="0" cy="35" rx="64" ry="35" fill="steelblue" stroke="black" filter="url(#dropShadow)"/>
      <text x="0" y="40" font-size="15" fill="white" text-anchor="middle">Aeolian</text>
    </g>
    <g id="tr_2_td_1-node" transform="translate(430, 540)">
      <rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="blue" stroke="black" filter="url(#dropShadow)" />
      <text x="0" y="26" fill="white">&lt;td&gt;</text>
    </g>
    <g id="tr_2_td_1_text-node" transform="translate(430, 610)">
      <ellipse cx="0" cy="35" rx="64" ry="35" fill="steelblue" stroke="black" filter="url(#dropShadow)"/>
      <text x="0" y="40" font-size="15" fill="white" text-anchor="middle">
        <tspan x="0" y="34">Over the River,</tspan> <tspan x="0" y="54">Charlie</tspan>
      </text>
    </g>
    <g id="tr_2_td_2-node" transform="translate(570, 540)">
      <rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
      <text x="0" y="26">&lt;td&gt;</text>
    </g>
    <g id="tr_2_td_2_text-node" transform="translate(570, 610)">
      <ellipse cx="0" cy="35" rx="64" ry="35" fill="steelblue" stroke="black" filter="url(#dropShadow)"/>
      <text x="0" y="40" font-size="15" fill="white" text-anchor="middle">Dorian</text>
    </g>
  </g>
  <g id="edges">
    <line id="window-document" x1="310" y1="50" x2="310" y2="73" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>     
    <line id="document-html" x1="310" y1="120" x2="310" y2="143" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>     
    <line id="html-body" x1="310" y1="190" x2="310" y2="213" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>     
    <line id="body-table" x1="310" y1="260" x2="310" y2="283" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>     
    <line id="table-tbody" x1="310" y1="330" x2="310" y2="353" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
    <path id="tbody-tr_1" fill="none" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"
          d="M310,400 Q310,420 260,420 H160 Q140,420 140,443"/>
    <path id="tbody-tr_2" fill="none" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"
          d="M310,400 Q310,420 380,420 H480 Q500,420 500,443"/>
    <path id="tr_1-tr_2_td_1" fill="none" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"
          d="M140,490 Q140,510 120,510 H90 Q70,510 70,533"/>
    <path id="tr_1-tr_2_td_2" fill="none" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"
          d="M140,490 Q140,510 160,510 H190 Q210,510 210,533"/>
    <path id="tr_2-tr_2_td_1" fill="none" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"
          d="M500,490 Q500,510 480,510 H450 Q430,510 430,533"/>
    <path id="tr_2-tr_2_td_2" fill="none" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"
          d="M500,490 Q500,510 540,510 H550 Q570,510 570,533"/>
    <line id="tr_1_td_1-text" x1="70" y1="580" x2="70" y2="603" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
    <line id="tr_1_td_2-text" x1="210" y1="580" x2="210" y2="603" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
    <line id="tr_2_td_1-text" x1="430" y1="580" x2="430" y2="603" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
    <line id="tr_2_td_2-text" x1="570" y1="580" x2="570" y2="603" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
  </g>
  <g id="event-flow" stroke-dasharray="10,5">
    <g id="capture_phase">
      <a xlink:href="../DOM3-Events.html#glossary-capture-phase" target="_parent"><text fill="red" font-family="Verdana, sans-serif" font-size="20" font-weight="bold" text-anchor="middle"><tspan x="150" y="220">Capture</tspan> <tspan x="150" y="240">Phase</tspan> <tspan x="150" y="260">(1)</tspan></text></a>
      <path id="capture_phase_arrow" fill="none" stroke="red" stroke-width="3" marker-end="url(#redArrow)" stroke-linecap="round"
            d="M235,28 C195,25 195,75 238,85 "/>
      <use xlink:href="#capture_phase_arrow" x="5" y="70" />
      <use xlink:href="#capture_phase_arrow" x="10" y="140" />
      <use xlink:href="#capture_phase_arrow" x="10" y="210" />
      <use xlink:href="#capture_phase_arrow" x="10" y="280" />
      <path id="capture_phase_arrow2" fill="none" stroke="red" stroke-width="3" marker-end="url(#redArrow)" stroke-linecap="round"
            d="M245,378 C205,375 205,473 428,458 "/>
      <path id="capture_phase_arrow3" fill="none" stroke="red" stroke-width="3" marker-end="url(#redArrow)" stroke-linecap="round"
            stroke-dasharray="none" d="M428,473 C330,470 330,533 363,548 "/>
    </g>
    <g id="target_phase">
      <a xlink:href="../DOM3-Events.html#glossary-target-phase" target="_parent"><text fill="blue" font-family="Verdana, sans-serif" font-size="20" font-weight="bold" text-anchor="middle"><tspan x="337" y="580">Target</tspan> <tspan x="337" y="600">Phase</tspan> <tspan x="337" y="620">(2)</tspan></text></a>
      <rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="none" stroke="black" stroke-width="5" stroke-dasharray="none" 
            transform="translate(430, 540)"/>
    </g>
    <g id="bubble_phase">
      <a xlink:href="../DOM3-Events.html#glossary-bubbling-phase" target="_parent"><text fill="green" font-family="Verdana, sans-serif" font-size="20" font-weight="bold" text-anchor="middle"><tspan x="490" y="320">Bubbling</tspan> <tspan x="490" y="340">Phase</tspan> <tspan x="490" y="360">(3)</tspan></text></a>
      <path id="bubble_phase_arrow3" fill="none" stroke="green" stroke-width="3" marker-end="url(#greenArrow)" stroke-linecap="round"
            stroke-dasharray="none" d="M492,548 C630,483 630,470 562,473"/>
      <path id="bubble_phase_arrow2" fill="none" stroke="green" stroke-width="3" marker-end="url(#greenArrow)" stroke-linecap="round"
            d="M565,457 C605,447 605,398 377,388"/>
      <path id="bubble_phase_arrow" fill="none" stroke="green" stroke-width="3" marker-end="url(#greenArrow)" stroke-linecap="round"
            d="M375,375 C415,372 415,332 375,322"/>
      <use xlink:href="#bubble_phase_arrow" x="0" y="-70" />
      <use xlink:href="#bubble_phase_arrow" x="0" y="-140" />
      <path id="bubble_phase_arrow4" fill="none" stroke="green" stroke-width="3" marker-end="url(#greenArrow)" stroke-linecap="round"
            d="M375,165 C425,162 425,122 385,112"/>
      <path id="bubble_phase_arrow" fill="none" stroke="green" stroke-width="3" marker-end="url(#greenArrow)" stroke-linecap="round"
            d="M385,95 C435,92 435,52 395,42"/>
    </g>
  </g>
 </svg>
--- a/4-ajax/5-xhr-crossdomain/xhr-another-domain.svg
+++ b/4-ajax/5-xhr-crossdomain/xhr-another-domain.svg
@ -22,20 +22,16 @@
            <path d="M294,81 L294,401" id="Line" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path d="M520,81 L520,401" id="Line" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path d="M70.5,139.5 L290.5,139.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M279.7,142.5 C283.48,141.45 286.72,140.55 290.5,139.5 C286.72,138.45 283.48,137.55 279.7,136.5" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="send()" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
                <tspan x="153" y="132">send()</tspan>
            </text>
            <path d="M295.5,189.5 L515.5,189.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M515.5,189.5 C511.72,188.45 508.48,187.55 504.7,186.5 C504.7,188.6 504.7,190.4 504.7,192.5 C508.48,191.45 511.72,190.55 515.5,189.5 C515.5,189.5 515.5,189.5 515.5,189.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="HTTP-запрос" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" line-spacing="18" fill="#8A704D">
                <tspan x="370.165039" y="181">HTTP-запрос</tspan>
                <tspan x="349.822266" y="201" font-size="12">с заголовком Origin</tspan>
            </text>
            <path d="M297.5,294.5 L517.5,294.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-2-decoration-1" d="M298.3,294.5 C302.08,293.45 305.32,292.55 309.1,291.5 C309.1,293.6 309.1,295.4 309.1,297.5 C305.32,296.45 302.08,295.55 298.3,294.5 C298.3,294.5 298.3,294.5 298.3,294.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M71.5,359.5 L291.5,359.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-3-decoration-1" d="M72.3,359.5 C76.08,358.45 79.32,357.55 83.1,356.5 C83.1,358.6 83.1,360.4 83.1,362.5 C79.32,361.45 76.08,360.55 72.3,359.5 C72.3,359.5 72.3,359.5 72.3,359.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="HTTP-ответ" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" line-spacing="18" fill="#8A704D">
                <tspan x="371.513672" y="287">HTTP-ответ</tspan>
                <tspan x="274.748047" y="307" font-size="12">Access-Control-Allow-Origin: * или Origin</tspan>
--- a/4-ajax/5-xhr-crossdomain/xhr-preflight.svg
+++ b/4-ajax/5-xhr-crossdomain/xhr-preflight.svg
@ -22,7 +22,6 @@
            <path d="M294,82 L294,602" id="Line" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path d="M533,82 L533,602" id="Line" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path d="M70.5,139.5 L290.5,139.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M279.7,142.5 C283.48,141.45 286.72,140.55 290.5,139.5 C286.72,138.45 283.48,137.55 279.7,136.5" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="send()" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
                <tspan x="153" y="132">send()</tspan>
            </text>
@ -33,7 +32,6 @@
                <tspan x="315.535156" y="231" font-size="12">Access-Control-Request-Headers</tspan>
            </text>
            <path d="M297.5,292.5 L527.5,292.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M298.3,292.5 C302.08,291.45 305.32,290.55 309.1,289.5 C309.1,291.6 309.1,293.4 309.1,295.5 C305.32,294.45 302.08,293.55 298.3,292.5 C298.3,292.5 298.3,292.5 298.3,292.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="200-OK" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" line-spacing="18" fill="#8A704D">
                <tspan x="392.408203" y="285">200 OK</tspan>
                <tspan x="326.431641" y="305" font-size="12">Access-Control-Allow-Method</tspan>
@ -42,11 +40,8 @@
                <tspan x="488.074219" y="345"></tspan>
            </text>
            <path d="M298.5,179.5 L528.5,179.5" id="Line-4" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-4-decoration-1" d="M528.5,179.5 C524.72,178.45 521.48,177.55 517.7,176.5 C517.7,178.6 517.7,180.4 517.7,182.5 C521.48,181.45 524.72,180.55 528.5,179.5 C528.5,179.5 528.5,179.5 528.5,179.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M297.5,501.5 L527.5,501.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-2-decoration-1" d="M298.3,501.5 C302.08,500.45 305.32,499.55 309.1,498.5 C309.1,500.6 309.1,502.4 309.1,504.5 C305.32,503.45 302.08,502.55 298.3,501.5 C298.3,501.5 298.3,501.5 298.3,501.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M71.5,553.5 L291.5,553.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-3-decoration-1" d="M72.3,553.5 C76.08,552.45 79.32,551.55 83.1,550.5 C83.1,552.6 83.1,554.4 83.1,556.5 C79.32,555.45 76.08,554.55 72.3,553.5 C72.3,553.5 72.3,553.5 72.3,553.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="HTTP-ответ" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" line-spacing="18" fill="#8A704D">
                <tspan x="379.513672" y="494">HTTP-ответ</tspan>
                <tspan x="328.931641" y="514" font-size="12">Access-Control-Allow-Origin</tspan>
@ -57,7 +52,6 @@
                <tspan x="132.967773" y="565">иначе onerror</tspan>
            </text>
            <path d="M296.5,435.5 L526.5,435.5" id="Line-5" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-5-decoration-1" d="M526.5,435.5 C522.72,434.45 519.48,433.55 515.7,432.5 C515.7,434.6 515.7,436.4 515.7,438.5 C519.48,437.45 522.72,436.55 526.5,435.5 C526.5,435.5 526.5,435.5 526.5,435.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="Основной-HTTP-запрос" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" line-spacing="18" fill="#8A704D">
                <tspan x="339.527344" y="427">Основной HTTP-запрос</tspan>
                <tspan x="396.707031" y="447" font-size="12">Origin</tspan>
--- a/5-animation/1-bezier/bezier3-draw1.svg
+++ b/5-animation/1-bezier/bezier3-draw1.svg
@ -31,7 +31,7 @@
                <tspan x="209" y="112">0.25</tspan>
            </text>
            <path d="M70.5,247.5 L204.5,114.5" id="Line" stroke="#62C0DC" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
-            <image id="ease-in" sketch:type="MSBitmapLayer" x="231" y="-133" width="133" height="135" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIUAAACHCAIAAAC3cA1gAAAABGdBTUEAA1teXP8meAAACz9JREFUeAHtXW1MVFcaPm7cZKKY8AMEDSb8YKGkICDo0hQWTGyyIKxT+yEVMYg2pdk2KQaxP9rYrI1C2zBN1NhGsHGB8AMMGDvKplXbtaYYQUCnG7A2NrE/ZiIGVoyQhebuc7kwc2funTv3c+bOnXNi5My557znzPOc933P1z2zgmEYQoNpEPiDaVpCG8IiQPkwVz+gfFA+zIWAuVpD9YPyYS4EzNUaqh968uHYW7BiMRTsdQSX69mfm7z/k0viGTD/oEEXBFpr8vkQt/ZPiIrlstW1OEWfUv3gY6g+7vnp0r9I9SLEExwtXeedQnH3LjgOdgwL070plA8vFJoiSc+XD/yzYVFEevWiouRkZQgk3tttb8nJSRKk+xIoHz4sdIlxGpBf09reVB4g0LF3d3V/r59RC8hB5+cCQDQlXPpkf4b9IEQMdxx0XLjHlwWeukh1w44/8ROFcaofQkzUp5Q3tTPMkv84aN/tJQTe5fUjLueSQZOUL+rlaaI2BDhKkpwuNyfH2VInJEF0iEX1QwiU9pT0f7AEpKQ9L+W6xavR1hFo6SUE/GcV7rqcpCDzD/YRmBBVDsii+iHeTZWmbn+lGkXOHt6+OD3PeaVrrGFHulIhyL8CnKgoRosYhADVD4OAVSmW8qESOIOKrTRILhULBObm5pqamu7cubNmzZri4mLEQ8JC9SMkRCoz9Pf3r1u3bmxsrKSkJDMzs62tLTU11ePxhBBHR6xGIOB2uxMTEzs7O73C5+fna2pqNm3a5E0RjdDxVYj+qu5xY2Pj7du3r169yi8O87V27dqhoaH09KBDYWqv+IjpFr9x40Z5eeD6rs1mKygo6OrqkqiG8iEBjvpHq1atmpmZEZZ/9uzZ6tWrheneFMqHFwo9I1u2bLl8+XKAxOnpaYy1du3aFZDu91HUq9BEjQjMzs4mJycfO3YMbpwTNTU1VVZWVlRUJC2Z+nO/3qnjh1vff//6zp3/s9mgK6AHHmXjxo1XrlyBF5GohdorCXA0Pdo8MPBg/fozX365YcOGvLw88IEgTQbqo/qhCfSghcfHSXY2uXaNFBUFzSP2gPIhhor2tOJikpZGvvpKqSS6fqUUMRn5T54k0I++PhlZA7NQ/QhEROvn335jLZXDQWprVYiifKgATbLIyy+T6WnWc6gK1F6pgi1Yof5+MjBA7t4N9jxkOh3vhoRIdgaoxbvvkiNHWE+uNlB7pRY5YTmQ8cMP5NYtslK91VFfUtiemE4ZHCRtbazb0EAGAKT6oUcvWlggeXlk2zZ2WKUtUP+hDT+u9Mcfk6dPydGj2mVR/dCM4ego2byZfPMNKS3VLIvaK40QwlKBDCxSnTihURJXnNorbTDCUmGYe/y4Nim+0tRe+bBQHNPVUnG1Uz4Us7BUQG9LxYml9kotH3pbKq4dVD9U8WGApaJ8qGIChebmyAsv6Dim4reD2is+GvLiH37Izv70G1Pxa6XrV3w0ZMSxYojtP6xTxcXJyK04C/UfSiCDWmDv79VXyaefKimmIC/lQwFY5O23CdZxta2oS9dH7ZU0PrynX3/NrqgbSQYqo/6ch7hEdHKSvPkmu4KbmyuRS/sjaq/kYfjaawQHR65f17jdFLIyaq9CQkRIZyd7SsFgS8W1g9qrUHzcv8+6cQyonnsuVFYdnlN7JQkiFg0xFU9NJT09kvl0e0jtlSSUmIrDk2PvL1yB8hEc6W+/JZ99xk7F4+ODZ9L5CbVXQQCFWuDIyFtvkQ8+CJLDkGTKRxBYKyvZdVy8A6jtPFUQ6UGTqb0SgwYrhlgXGRkJMxloCtUPAR/Ya8KYCgOqigrBM8MTKB/+EGMFF2TocdLQX67cT5QPf6RqathXm378MfyWimsH9R88Pr74gmARNxJuw9sIqh/LUAwNEbyE2d1N7PblpAj8pXwsgo4zhphtVFUZtCsun1jKxyJWmG1wL/2Fd7Yh5In6D0KamyM12xDyEfP68d13pKyMXLzIjnFNEGJ7/8PtJm+8QQ4fNgkZ6A8xrB/Y23jpJXaeEfZFKgk9jGH/gddhsfcXll1YCQICHsUqHzi5g11xnE9ITg5AJLIfY9JewYfDUmHFMKJTP1HiY4+PX39lVwyx0fTRR6KIRDYxxvjA8i0WRXBSBOsipgwxxgeOtcGHw20YczpdO8Wx5M9hoLj7RcxKBuiMGf3ATUiY+uGwSGGh9l5snITYmJ+7XAQbTadPm5yM2NAPLIpgLR235xnzhpm+umJ1e4UBFe6zyMoK24FPjfRYmg+sUG3dygKk+VoqjSjLL27p8RUcOI4ZRu5wgnwavDmty0dDw9LoNoynb72wqo5YlI/PP2ff9cO8LyVFNTQRKWhF/9Hby041sKthji0/Rbxabv6BGTjIOHMmGskAc9biA0cLsRmOG3BV3dWtqCMblNlC9gpkYHSLLQ3Mw6M2WIUPjgzcY4iF9EifodLSGSxhr6xCBoiMfj4sRAb4iHJ7hbVC7PfhDosoN1NeExfNfIAMOHCsFVqFjGjWD44MnNbBy+HR7MC9msFFotN/cGQkJLDnbi1EBiiJQj5wzw7MFMjAioiJd8IDOr7Mj9HGB3Zesb+EVUIrkhFt+oG1Ke7lV4uSEVV8YNUWZuqdd0hHh8V8hp8pk/65YbM8dTiYlSuZEyfM0h7D2kFkSJ7I9zGYPyGjgL5Z3LU7k5YakOR0ufUVbjZpcvhg2+x2ORdBCS8f+PHwPX/j9QbQYnFKTDy+wlGdsrJLzqvVJy+jQ0z0ty4qiee8c9inrpaLmZUPXOqCQ2yTk+X/+bnh738F7Ok7dtflsCqalZFmORZ8X8iUfODeCm5ci6M6ge8v5W/fke5rvuViJjtfAhuFa4dxiQh+ORy3JfCC56dh55inruWsldkgxEx8wEbh/QwsgeBGF8FPwA47z5OcumNN5TyOLBg1jb3i2ygBGfcuOLYfHvv3aPvywNeCTCx9JZkDcAPHuzMzTFUVExfHdHcHaQwmQL5x9tmWFgvPQeTqx3/vT3iM6JR41RW/qIE9V9gof4exXJtnf+5fhslwxoqlcMr1RytrSZAuyU/mz89ZlPJrWvmPVcanppgDB9hVkPffZ2Zngwhxc2PcZW7Yv3UtziCZrZAcof1aLA7ivDOWzXGQEBuuNHgRCHenunaNKS1l4uOZ06fDXXU01CfXf3j5Ux/BcBa3IuA8J46DPHhA6uvVi7JuScXzj4WFhd7e3vHx8bi4uNzc3G1yzpBjfnfqFPsTGnv2kLt3hXML+fCqqV2+dBPkVKYfLpcrOzv73LlzaPnjx48PHTpUWVn5FJNq0YB0XPScmcnO8uAqMILCVpJgbiFaVDRRWe2iIsyfKN+ozszMZGVldfNmCfPz8/X19bW1tX5CMJ/o6GDsdsZmY1JSmOPHmUeP/DKo+iC3dlXCzVNI7v4HWtzT01NRURHQ9NnZ2YSEhEcTE8zFi8zRowwycDS89x5z/XpAZi0fpWrXg28tbdOxrAL/cfPmzZKSkgCNt9lsf87MHMzIKLXZfklM/CUhYXzr1p+TktjrOtvb2X86hZGRkT1wP/4BtRcWFg4ODqKj+D+J1k8K+MCXn8NPMAjC099/HzpwYPLFF7kn6wnBP93DkydPRB0VmoSG6V5dxATK17W+vr5STB38w9TUVHx8PP73T9b/U2Rr1//7BJGoYHwFm4DhZnNzM/7nus/09PS+ffvg0kGJ0R0qsrUb/e188oPwJJ788OFD4JKWllZVVWW32+HJGxsbMcoSz613amRr1/vbiMtTs36FyeDo6CjnS5MD91N9TBsUi2ztBn0pr1g1fHgL04juCCjwH7rXTQUKEaB8CDGJZArlI5LoC+v+Pzu1YPNgxENFAAAAAElFTkSuQmCC"></image>
+            <image id="ease-in" sketch:type="MSBitmapLayer" x="231" y="-133" width="133" height="135" xlink:href="data:image/png;base64,(null)"></image>
        </g>
    </g>
 </svg>
--- a/5-animation/3-js-animation/back.svg
+++ b/5-animation/3-js-animation/back.svg
@ -7,9 +7,7 @@
    <g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="back.svg" sketch:type="MSArtboardGroup">
            <path d="M34,209.5 L34,22.1600037" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M34,22.5 C32.95,26.28 32.05,29.52 31,33.3 C33.1,33.3 34.9,33.3 37,33.3 C35.95,29.52 35.05,26.28 34,22.5 C34,22.5 34,22.5 34,22.5 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
            <path d="M24.5,194 L208.509995,194" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M208.5,194 C204.72,192.95 201.48,192.05 197.7,191 C197.7,193.1 197.7,194.9 197.7,197 C201.48,195.95 204.72,195.05 208.5,194 C208.5,194 208.5,194 208.5,194 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
            <path d="M35.3289777,193.635841 C35.3289777,193.635841 82.5458318,209.484914 105.066994,208.643536 C127.588155,207.802158 166.326582,214.914724 208.465749,22.4456533" id="Path-747" stroke="#EE6B47" stroke-width="3" sketch:type="MSShapeGroup"></path>
            <text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
                <tspan x="17" y="212">0</tspan>
--- a/5-animation/3-js-animation/bounce-inout.svg
+++ b/5-animation/3-js-animation/bounce-inout.svg
@ -7,9 +7,7 @@
    <g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="bounce-inout.svg" sketch:type="MSArtboardGroup">
            <path d="M34,209.5 L34,22.1600037" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M34,22.5 C32.95,26.28 32.05,29.52 31,33.3 C33.1,33.3 34.9,33.3 37,33.3 C35.95,29.52 35.05,26.28 34,22.5 C34,22.5 34,22.5 34,22.5 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
            <path d="M24.5,194 L208.509995,194" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M208.5,194 C204.72,192.95 201.48,192.05 197.7,191 C197.7,193.1 197.7,194.9 197.7,197 C201.48,195.95 204.72,195.05 208.5,194 C208.5,194 208.5,194 208.5,194 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
            <path d="M35.3289777,193.635841 C35.3289777,193.635841 41.2333124,187.095281 52.2325098,193.635839 C55.4414764,183.659866 71.0514816,178.107189 80.7686063,193.635839 C89.032676,167.620814 117,110.452183 144.182478,194.552328 C148.063747,176.586161 175.037321,10.6423763 208.465749,22.4456533" id="Path-747" stroke="#EE6B47" stroke-width="3" stroke-linejoin="bevel" sketch:type="MSShapeGroup"></path>
            <text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
                <tspan x="17" y="212">0</tspan>
--- a/5-animation/3-js-animation/circ-ease.svg
+++ b/5-animation/3-js-animation/circ-ease.svg
@ -7,9 +7,7 @@
    <g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="circ-ease.svg" sketch:type="MSArtboardGroup">
            <path d="M34,209.5 L34,22.1600037" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M34,22.5 C32.95,26.28 32.05,29.52 31,33.3 C33.1,33.3 34.9,33.3 37,33.3 C35.95,29.52 35.05,26.28 34,22.5 C34,22.5 34,22.5 34,22.5 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
            <path d="M24.5,194 L208.509995,194" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M208.5,194 C204.72,192.95 201.48,192.05 197.7,191 C197.7,193.1 197.7,194.9 197.7,197 C201.48,195.95 204.72,195.05 208.5,194 C208.5,194 208.5,194 208.5,194 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
            <path d="M35.1598321,193.734972 C116.357678,193.734973 200.574538,141.537458 208.465749,22.4456533" id="Path-747" stroke="#EE6B47" stroke-width="3" stroke-linejoin="bevel" sketch:type="MSShapeGroup"></path>
            <path d="M35.1598321,193.734972 C116.357678,193.734973 200.574538,141.537458 208.465749,22.4456533" id="Path-748" stroke="#8DB173" stroke-width="3" stroke-linejoin="bevel" sketch:type="MSShapeGroup" transform="translate(121.812790, 108.090312) scale(-1, -1) translate(-121.812790, -108.090312) "></path>
            <text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
--- a/5-animation/3-js-animation/circ.svg
+++ b/5-animation/3-js-animation/circ.svg
@ -7,9 +7,7 @@
    <g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="circ.svg" sketch:type="MSArtboardGroup">
            <path d="M34,209.5 L34,22.1600037" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M34,22.5 C32.95,26.28 32.05,29.52 31,33.3 C33.1,33.3 34.9,33.3 37,33.3 C35.95,29.52 35.05,26.28 34,22.5 C34,22.5 34,22.5 34,22.5 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
            <path d="M24.5,194 L208.509995,194" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M208.5,194 C204.72,192.95 201.48,192.05 197.7,191 C197.7,193.1 197.7,194.9 197.7,197 C201.48,195.95 204.72,195.05 208.5,194 C208.5,194 208.5,194 208.5,194 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
            <path d="M35.3289777,193.635841 C35.3289777,193.635841 189.874769,197.008001 208.465749,22.4456533" id="Path-747" stroke="#EE6B47" stroke-width="3" sketch:type="MSShapeGroup"></path>
            <text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
                <tspan x="17" y="212">0</tspan>
--- a/5-animation/3-js-animation/elastic.svg
+++ b/5-animation/3-js-animation/elastic.svg
@ -7,9 +7,7 @@
    <g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="elastic.svg" sketch:type="MSArtboardGroup">
            <path d="M34,365 L34,22.1600037" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M34,23 C32.95,26.78 32.05,30.02 31,33.8 C33.1,33.8 34.9,33.8 37,33.8 C35.95,30.02 35.05,26.78 34,23 C34,23 34,23 34,23 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
            <path d="M24.5,194 L208.509995,194" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M208.5,194 C204.72,192.95 201.48,192.05 197.7,191 C197.7,193.1 197.7,194.9 197.7,197 C201.48,195.95 204.72,195.05 208.5,194 C208.5,194 208.5,194 208.5,194 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
            <path d="M34.8792035,192.69782 C38.3217915,192.697818 46.5362784,191.195974 53.4936997,193.038137 C62.0206897,195.295885 61.5154635,189.622956 87.0139157,194.339254 C100.114357,196.762365 100.423927,183.608251 115.161483,194.900075 C135.318831,210.34451 133.877092,159.362737 148.519851,194.677907 C151.940119,202.926853 155.398942,217.279032 158.65332,214.286779 C161.563227,211.611251 163.848094,194.907207 173.23036,150.175435 C177.841468,128.191083 188.232669,296.296579 192.347319,280.535848 C201.966406,243.690946 203.555755,39.1411041 207.337233,22.0938619" id="Path-747" stroke="#EE6B47" stroke-width="3" sketch:type="MSShapeGroup"></path>
            <text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
                <tspan x="17" y="212">0</tspan>
--- a/5-animation/3-js-animation/linear.svg
+++ b/5-animation/3-js-animation/linear.svg
@ -7,9 +7,7 @@
    <g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="linear.svg" sketch:type="MSArtboardGroup">
            <path d="M34,209.5 L34,22.1600037" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M34,22.5 C32.95,26.28 32.05,29.52 31,33.3 C33.1,33.3 34.9,33.3 37,33.3 C35.95,29.52 35.05,26.28 34,22.5 C34,22.5 34,22.5 34,22.5 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
            <path d="M24.5,194 L208.509995,194" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M208.5,194 C204.72,192.95 201.48,192.05 197.7,191 C197.7,193.1 197.7,194.9 197.7,197 C201.48,195.95 204.72,195.05 208.5,194 C208.5,194 208.5,194 208.5,194 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
            <path d="M35.3289777,193.635841 L207.337233,22.0938619" id="Path-747" stroke="#EE6B47" stroke-width="3" sketch:type="MSShapeGroup"></path>
            <text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
                <tspan x="17" y="212">0</tspan>
--- a/5-animation/3-js-animation/quad.svg
+++ b/5-animation/3-js-animation/quad.svg
@ -7,9 +7,7 @@
    <g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="quad.svg" sketch:type="MSArtboardGroup">
            <path d="M34,209.5 L34,22.1600037" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M34,22.5 C32.95,26.28 32.05,29.52 31,33.3 C33.1,33.3 34.9,33.3 37,33.3 C35.95,29.52 35.05,26.28 34,22.5 C34,22.5 34,22.5 34,22.5 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
            <path d="M24.5,194 L208.509995,194" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M208.5,194 C204.72,192.95 201.48,192.05 197.7,191 C197.7,193.1 197.7,194.9 197.7,197 C201.48,195.95 204.72,195.05 208.5,194 C208.5,194 208.5,194 208.5,194 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
            <path d="M35.3289777,193.635841 C35.3289777,193.635841 113.802694,208.841146 207.337233,22.0938619" id="Path-747" stroke="#EE6B47" stroke-width="3" sketch:type="MSShapeGroup"></path>
            <text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
                <tspan x="17" y="212">0</tspan>
--- a/5-animation/3-js-animation/quint.svg
+++ b/5-animation/3-js-animation/quint.svg
@ -7,9 +7,7 @@
    <g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="quint.svg" sketch:type="MSArtboardGroup">
            <path d="M34,209.5 L34,22.1600037" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M34,22.5 C32.95,26.28 32.05,29.52 31,33.3 C33.1,33.3 34.9,33.3 37,33.3 C35.95,29.52 35.05,26.28 34,22.5 C34,22.5 34,22.5 34,22.5 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
            <path d="M24.5,194 L208.509995,194" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M208.5,194 C204.72,192.95 201.48,192.05 197.7,191 C197.7,193.1 197.7,194.9 197.7,197 C201.48,195.95 204.72,195.05 208.5,194 C208.5,194 208.5,194 208.5,194 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
            <path d="M35.3289777,193.635841 C149.458906,196.88389 171.361738,184.274633 207.337233,22.0938619" id="Path-747" stroke="#EE6B47" stroke-width="3" sketch:type="MSShapeGroup"></path>
            <text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
                <tspan x="17" y="212">0</tspan>
--- a/6-optimize/4-memory-leaks/leak-xhr-2.svg
+++ b/6-optimize/4-memory-leaks/leak-xhr-2.svg
@ -19,11 +19,8 @@
                <tspan x="180.224609" y="190">LexicalEnvironment</tspan>
            </text>
            <path d="M110.5,93.5 L110.5,144.5" id="Line" stroke="#B8BAC1" stroke-width="2" stroke-linecap="square" fill="#B8BAC1" sketch:type="MSShapeGroup" transform="translate(110.500000, 119.000000) scale(1, -1) translate(-110.500000, -119.000000) "></path>
            <path id="Line-decoration-1" d="M110.5,144.5 C111.55,140.72 112.45,137.48 113.5,133.7 C111.4,133.7 109.6,133.7 107.5,133.7 C108.55,137.48 109.45,140.72 110.5,144.5 C110.5,144.5 110.5,144.5 110.5,144.5 Z" stroke="#B8BAC1" stroke-width="2" stroke-linecap="square" fill="#B8BAC1"></path>
            <path d="M187,61 L311.169243,61" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M311,61 C307.22,59.95 303.98,59.05 300.2,58 C300.2,60.1 300.2,61.9 300.2,64 C303.98,62.95 307.22,62.05 311,61 C311,61 311,61 311,61 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M381.5,113.5 L381.5,144.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M381.5,144.5 C382.55,140.72 383.45,137.48 384.5,133.7 C382.4,133.7 380.6,133.7 378.5,133.7 C379.55,137.48 380.45,140.72 381.5,144.5 C381.5,144.5 381.5,144.5 381.5,144.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <text id="onreadystatechange" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
                <tspan x="181.5" y="48">onreadystatechange</tspan>
            </text>
--- a/6-optimize/4-memory-leaks/leak-xhr.svg
+++ b/6-optimize/4-memory-leaks/leak-xhr.svg
@ -19,13 +19,9 @@
                <tspan x="180.224609" y="252">LexicalEnvironment</tspan>
            </text>
            <path d="M110.5,154.5 L110.5,185.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(110.500000, 170.000000) scale(1, -1) translate(-110.500000, -170.000000) "></path>
            <path id="Line-decoration-1" d="M110.5,185.5 C111.55,181.72 112.45,178.48 113.5,174.7 C111.4,174.7 109.6,174.7 107.5,174.7 C108.55,178.48 109.45,181.72 110.5,185.5 C110.5,185.5 110.5,185.5 110.5,185.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M187,123 L311.169243,123" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M311,123 C307.22,121.95 303.98,121.05 300.2,120 C300.2,122.1 300.2,123.9 300.2,126 C303.98,124.95 307.22,124.05 311,123 C311,123 311,123 311,123 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M381.5,175.5 L381.5,206.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M381.5,206.5 C382.55,202.72 383.45,199.48 384.5,195.7 C382.4,195.7 380.6,195.7 378.5,195.7 C379.55,199.48 380.45,202.72 381.5,206.5 C381.5,206.5 381.5,206.5 381.5,206.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
            <path d="M112.5,46.5 L112.5,77.5" id="Line" stroke="#8A704D" stroke-width="2" stroke-linecap="square" fill="#8A704D" sketch:type="MSShapeGroup"></path>
            <path id="Line-decoration-1" d="M112.5,77.5 C113.55,73.72 114.45,70.48 115.5,66.7 C113.4,66.7 111.6,66.7 109.5,66.7 C110.55,70.48 111.45,73.72 112.5,77.5 C112.5,77.5 112.5,77.5 112.5,77.5 Z" stroke="#8A704D" stroke-width="2" stroke-linecap="square" fill="#8A704D"></path>
            <text id="property" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
                <tspan x="78" y="208">property</tspan>
            </text>
--- a/8-css-for-js/10-box-sizing/border-box.svg
+++ b/8-css-for-js/10-box-sizing/border-box.svg
@ -26,9 +26,7 @@
            </text>
            <ellipse id="Oval-5" stroke="#EE6B47" stroke-width="2" sketch:type="MSShapeGroup" cx="87" cy="183.5" rx="76" ry="43.5"></ellipse>
            <path d="M157,203 L186,221" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-3-decoration-1" d="M185.887766,220.930337 C183.229857,218.044784 180.951649,215.571452 178.29374,212.685898 C177.186278,214.470142 176.237025,215.999495 175.129563,217.783739 C178.894934,218.885048 182.122395,219.829028 185.887766,220.930337 C185.887766,220.930337 185.887766,220.930337 185.887766,220.930337 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <path d="M159,165 L191,146" id="Line-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path id="Line-4-decoration-1" d="M190.814626,146.110066 C187.028309,147.137055 183.782895,148.017331 179.996578,149.04432 C181.068709,150.850015 181.987679,152.397754 183.059811,154.203449 C185.773996,151.370765 188.10044,148.94275 190.814626,146.110066 C190.814626,146.110066 190.814626,146.110066 190.814626,146.110066 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
            <text id="border:-5px;" sketch:type="MSTextLayer" font-family="Consolas" font-size="16" font-weight="bold">
                <tspan x="32" y="176.64193" fill="#999647">border: 5px;</tspan>
                <tspan x="137.5625" y="176.64193" fill="#8A704D"></tspan>
--- a/figures.sketch
+++ b/figures.sketch