jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-03-04 23:09:07 +03:00
parent 05d35d0d16
commit 951cf3f2ec
152 changed files with 2527 additions and 2179 deletions
Download patch file Download diff file Expand all files Collapse all files

4
1-js/2-first-steps/5-variables/variable-change.svg
View file

@ -11,13 +11,13 @@
<path d="M25,123 L25,95 L10,123" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path> <path d="M25,123 L25,95 L10,123" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(0.000000, 57.000000)"> <g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(0.000000, 57.000000)">
<path d="M18.9106925,0.395208397 L73.4146415,58.8435379 L55.0893075,75.9321883 L0.585358502,17.4838588 L18.9106925,0.395208397 L18.9106925,0.395208397 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup"></path> <path d="M18.9106925,0.395208397 L73.4146415,58.8435379 L55.0893075,75.9321883 L0.585358502,17.4838588 L18.9106925,0.395208397 L18.9106925,0.395208397 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup"></path>
<text id="&quot;World!&quot;" sketch:type="MSTextLayer" transform="translate(39.885486, 39.782373) rotate(47.000000) translate(-39.885486, -39.782373) " font-family="Open Sans" font-size="14" font-weight="526" line-spacing="17" fill="#8A704D"> <text id="&quot;World!&quot;" sketch:type="MSTextLayer" transform="translate(39.885486, 39.782373) rotate(47.000000) translate(-39.885486, -39.782373) " font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="10.392998" y="46.2823729">"World!"</tspan> <tspan x="10.392998" y="46.2823729">"World!"</tspan>
</text> </text>
</g> </g>
<g id="Rectangle-5-+-&quot;World!&quot;-2" transform="translate(139.643781, 49.254803) rotate(293.000000) translate(-139.643781, -49.254803) translate(102.643781, 11.254803)"> <g id="Rectangle-5-+-&quot;World!&quot;-2" transform="translate(139.643781, 49.254803) rotate(293.000000) translate(-139.643781, -49.254803) translate(102.643781, 11.254803)">
<path d="M18.9106925,0.395208397 L73.4146415,58.8435379 L55.0893075,75.9321883 L0.585358502,17.4838588 L18.9106925,0.395208397 L18.9106925,0.395208397 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup"></path> <path d="M18.9106925,0.395208397 L73.4146415,58.8435379 L55.0893075,75.9321883 L0.585358502,17.4838588 L18.9106925,0.395208397 L18.9106925,0.395208397 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup"></path>
<text id="&quot;Hello!&quot;" sketch:type="MSTextLayer" transform="translate(39.885486, 39.782373) rotate(47.000000) translate(-39.885486, -39.782373) " font-family="Open Sans" font-size="14" font-weight="526" line-spacing="17" fill="#8A704D"> <text id="&quot;Hello!&quot;" sketch:type="MSTextLayer" transform="translate(39.885486, 39.782373) rotate(47.000000) translate(-39.885486, -39.782373) " font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="10.392998" y="46.2823729">"Hello!"</tspan> <tspan x="10.392998" y="46.2823729">"Hello!"</tspan>
</text> </text>
</g> </g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 7 KiB

Before After
Before After

2
1-js/2-first-steps/5-variables/variable.svg
View file

@ -12,7 +12,7 @@
<path d="M17,66 L17,38 L2,66" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path> <path d="M17,66 L17,38 L2,66" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(15.000000, 0.000000)"> <g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(15.000000, 0.000000)">
<path d="M18.9106925,0.395208397 L73.4146415,58.8435379 L55.0893075,75.9321883 L0.585358502,17.4838588 L18.9106925,0.395208397 L18.9106925,0.395208397 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup"></path> <path d="M18.9106925,0.395208397 L73.4146415,58.8435379 L55.0893075,75.9321883 L0.585358502,17.4838588 L18.9106925,0.395208397 L18.9106925,0.395208397 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup"></path>
<text id="&quot;Hello!&quot;" sketch:type="MSTextLayer" transform="translate(39.885486, 39.782373) rotate(47.000000) translate(-39.885486, -39.782373) " font-family="Open Sans" font-size="14" font-weight="526" line-spacing="17" fill="#8A704D"> <text id="&quot;Hello!&quot;" sketch:type="MSTextLayer" transform="translate(39.885486, 39.782373) rotate(47.000000) translate(-39.885486, -39.782373) " font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="10.392998" y="46.2823729">"Hello!"</tspan> <tspan x="10.392998" y="46.2823729">"Hello!"</tspan>
</text> </text>
</g> </g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

Before After
Before After

48
1-js/3-writing-js/2-coding-style/code-style.svg
View file

@ -22,65 +22,65 @@
<tspan x="122.139648" y="89">Между именем функции</tspan> <tspan x="122.139648" y="89">Между именем функции</tspan>
<tspan x="126.559082" y="108">и скобкой ( нет пробела</tspan> <tspan x="126.559082" y="108">и скобкой ( нет пробела</tspan>
</text> </text>
<path d="M270.5,118.5 L326.5,174.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M270.5,118.5 L326.5,174.5" id="Line" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M326.361436,174.361436 C324.431034,170.94611 322.776404,168.018688 320.846003,164.603362 C319.361079,166.088286 318.088286,167.361079 316.603362,168.846003 C320.018688,170.776404 322.94611,172.431034 326.361436,174.361436 C326.361436,174.361436 326.361436,174.361436 326.361436,174.361436 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path> <path id="Line-decoration-1" d="M326.361436,174.361436 C324.431034,170.94611 322.776404,168.018688 320.846003,164.603362 C319.361079,166.088286 318.088286,167.361079 316.603362,168.846003 C320.018688,170.776404 322.94611,172.431034 326.361436,174.361436 C326.361436,174.361436 326.361436,174.361436 326.361436,174.361436 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="Отступ-" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47"> <text id="Отступ-" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="104.10791" y="192">Отступ </tspan> <tspan x="104.10791" y="192">Отступ </tspan>
<tspan x="93.1259766" y="211">2 пробела</tspan> <tspan x="93.1259766" y="211">2 пробела</tspan>
</text> </text>
<path d="M169.5,201.5 L229,201.5" id="Line-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M169.5,201.5 L229,201.5" id="Line-4" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-4-decoration-1" d="M228.5,201.5 C224.72,200.45 221.48,199.55 217.7,198.5 C217.7,200.6 217.7,202.4 217.7,204.5 C221.48,203.45 224.72,202.55 228.5,201.5 C228.5,201.5 228.5,201.5 228.5,201.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path> <path id="Line-4-decoration-1" d="M228.5,201.5 C224.72,200.45 221.48,199.55 217.7,198.5 C217.7,200.6 217.7,202.4 217.7,204.5 C221.48,203.45 224.72,202.55 228.5,201.5 C228.5,201.5 228.5,201.5 228.5,201.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="Пробел-после-for" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47"> <text id="Пробел-после-for" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="36.5083008" y="238">Пробел после for</tspan> <tspan x="36.5083008" y="238">Пробел после for</tspan>
</text> </text>
<path d="M169.5,234.5 L229,234.5" id="Line-6" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M169.5,234.5 L229,234.5" id="Line-6" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-6-decoration-1" d="M228.5,234.5 C224.72,233.45 221.48,232.55 217.7,231.5 C217.7,233.6 217.7,235.4 217.7,237.5 C221.48,236.45 224.72,235.55 228.5,234.5 C228.5,234.5 228.5,234.5 228.5,234.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path> <path id="Line-6-decoration-1" d="M228.5,234.5 C224.72,233.45 221.48,232.55 217.7,231.5 C217.7,233.6 217.7,235.4 217.7,237.5 C221.48,236.45 224.72,235.55 228.5,234.5 C228.5,234.5 228.5,234.5 228.5,234.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="}-else-{-без-перевод" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47"> <text id="}-else-{-без-перевод" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="503.068359" y="479">} else { без перевода строки</tspan> <tspan x="503.068359" y="479">} else { без перевода строки</tspan>
</text> </text>
<path d="M487,470 L407,459.5" id="Line-14" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M487,470 L407,459.5" id="Line-14" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-14-decoration-1" d="M407.680286,459.589288 C411.291502,461.122265 414.38683,462.436246 417.998045,463.969223 C418.271327,461.88708 418.505568,460.102387 418.778849,458.020244 C414.894352,458.569409 411.564783,459.040122 407.680286,459.589288 C407.680286,459.589288 407.680286,459.589288 407.680286,459.589288 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path> <path id="Line-14-decoration-1" d="M407.680286,459.589288 C411.291502,461.122265 414.38683,462.436246 417.998045,463.969223 C418.271327,461.88708 418.505568,460.102387 418.778849,458.020244 C414.894352,458.569409 411.564783,459.040122 407.680286,459.589288 C407.680286,459.589288 407.680286,459.589288 407.680286,459.589288 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="Пробелы-вокруг" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47"> <text id="Пробелы-вокруг" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="284.414551" y="525">Пробелы вокруг</tspan> <tspan x="284.414551" y="525">Пробелы вокруг</tspan>
<tspan x="270.329102" y="544">вложенного вызова</tspan> <tspan x="270.329102" y="544">вложенного вызова</tspan>
</text> </text>
<path d="M326,507 L300,481.565217" id="Line-15" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M326,507 L300,481.565217" id="Line-15" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-15-decoration-1" d="M300.265975,481.82541 C302.233789,485.219318 303.920486,488.128382 305.8883,491.522289 C307.356818,490.021138 308.615547,488.734437 310.084065,487.233285 C306.647734,485.340529 303.702307,483.718167 300.265975,481.82541 C300.265975,481.82541 300.265975,481.82541 300.265975,481.82541 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path> <path id="Line-15-decoration-1" d="M300.265975,481.82541 C302.233789,485.219318 303.920486,488.128382 305.8883,491.522289 C307.356818,490.021138 308.615547,488.734437 310.084065,487.233285 C306.647734,485.340529 303.702307,483.718167 300.265975,481.82541 C300.265975,481.82541 300.265975,481.82541 300.265975,481.82541 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M375,507 L349,481.565217" id="Line-16" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(362.000000, 494.000000) scale(-1, 1) translate(-362.000000, -494.000000) "></path> <path d="M375,507 L349,481.565217" id="Line-16" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(362.000000, 494.000000) scale(-1, 1) translate(-362.000000, -494.000000) "></path>
<path id="Line-16-decoration-1" d="M349.265975,481.82541 C351.233789,485.219318 352.920486,488.128382 354.8883,491.522289 C356.356818,490.021138 357.615547,488.734437 359.084065,487.233285 C355.647734,485.340529 352.702307,483.718167 349.265975,481.82541 C349.265975,481.82541 349.265975,481.82541 349.265975,481.82541 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path> <path id="Line-16-decoration-1" d="M349.265975,481.82541 C351.233789,485.219318 352.920486,488.128382 354.8883,491.522289 C356.356818,490.021138 357.615547,488.734437 359.084065,487.233285 C355.647734,485.340529 352.702307,483.718167 349.265975,481.82541 C349.265975,481.82541 349.265975,481.82541 349.265975,481.82541 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="пустая-строка" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47"> <text id="пустая-строка" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="51.4902344" y="374">пустая строка</tspan> <tspan x="51.4902344" y="374">пустая строка</tspan>
<tspan x="77.7128906" y="393">между </tspan> <tspan x="77.7128906" y="393">между </tspan>
<tspan x="18.0761719" y="412">логическими блоками</tspan> <tspan x="18.0761719" y="412">логическими блоками</tspan>
</text> </text>
<path d="M170.441667,385.5 L223,385.5" id="Line-7" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M170.441667,385.5 L223,385.5" id="Line-7" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-7-decoration-1" d="M222.441667,385.5 C218.661667,384.45 215.421667,383.55 211.641667,382.5 C211.641667,384.6 211.641667,386.4 211.641667,388.5 C215.421667,387.45 218.661667,386.55 222.441667,385.5 C222.441667,385.5 222.441667,385.5 222.441667,385.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path> <path id="Line-7-decoration-1" d="M222.441667,385.5 C218.661667,384.45 215.421667,383.55 211.641667,382.5 C211.641667,384.6 211.641667,386.4 211.641667,388.5 C215.421667,387.45 218.661667,386.55 222.441667,385.5 C222.441667,385.5 222.441667,385.5 222.441667,385.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="длина-строки" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47"> <text id="длина-строки" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="569.00293" y="380">длина строки</tspan> <tspan x="569.00293" y="380">длина строки</tspan>
<tspan x="539.126465" y="399">не более 80 символов</tspan> <tspan x="539.126465" y="399">не более 80 символов</tspan>
</text> </text>
<path d="M534.441667,385.5 L443,420" id="Line-13" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M534.441667,385.5 L443,420" id="Line-13" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-13-decoration-1" d="M443.686238,419.741089 C447.593544,419.38915 450.942663,419.087488 454.849969,418.735548 C454.108667,416.77074 453.473265,415.086619 452.731964,413.121811 C449.56596,415.438558 446.852242,417.424342 443.686238,419.741089 C443.686238,419.741089 443.686238,419.741089 443.686238,419.741089 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path> <path id="Line-13-decoration-1" d="M443.686238,419.741089 C447.593544,419.38915 450.942663,419.087488 454.849969,418.735548 C454.108667,416.77074 453.473265,415.086619 452.731964,413.121811 C449.56596,415.438558 446.852242,417.424342 443.686238,419.741089 C443.686238,419.741089 443.686238,419.741089 443.686238,419.741089 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="точка-с-запятой-;" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47"> <text id="точка-с-запятой-;" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="593.187012" y="247">точка с запятой ;</tspan> <tspan x="593.187012" y="247">точка с запятой ;</tspan>
<tspan x="608.933594" y="266">обязательна</tspan> <tspan x="608.933594" y="266">обязательна</tspan>
</text> </text>
<path d="M591,252.5 L386,252.5" id="Line-8" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M591,252.5 L386,252.5" id="Line-8" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-8-decoration-1" d="M386,252.5 C389.78,253.55 393.02,254.45 396.8,255.5 C396.8,253.4 396.8,251.6 396.8,249.5 C393.02,250.55 389.78,251.45 386,252.5 C386,252.5 386,252.5 386,252.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path> <path id="Line-8-decoration-1" d="M386,252.5 C389.78,253.55 393.02,254.45 396.8,255.5 C396.8,253.4 396.8,251.6 396.8,249.5 C393.02,250.55 389.78,251.45 386,252.5 C386,252.5 386,252.5 386,252.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="Фигурная-скобка-{" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47"> <text id="Фигурная-скобка-{" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="525.230957" y="85">Фигурная скобка {</tspan> <tspan x="525.230957" y="85">Фигурная скобка {</tspan>
<tspan x="477.153809" y="104">на той же строке, через пробел</tspan> <tspan x="477.153809" y="104">на той же строке, через пробел</tspan>
</text> </text>
<path d="M518,123 L400,178" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M518,123 L400,178" id="Line-3" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-3-decoration-1" d="M400.170694,177.920439 C404.040396,177.27522 407.357283,176.722175 411.226985,176.076956 C410.339809,174.173559 409.579372,172.542077 408.692195,170.63868 C405.70967,173.187296 403.153219,175.371824 400.170694,177.920439 C400.170694,177.920439 400.170694,177.920439 400.170694,177.920439 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path> <path id="Line-3-decoration-1" d="M400.170694,177.920439 C404.040396,177.27522 407.357283,176.722175 411.226985,176.076956 C410.339809,174.173559 409.579372,172.542077 408.692195,170.63868 C405.70967,173.187296 403.153219,175.371824 400.170694,177.920439 C400.170694,177.920439 400.170694,177.920439 400.170694,177.920439 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M354.5,61 L354.5,170" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M354.5,61 L354.5,170" id="Line-2" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-2-decoration-1" d="M354.5,170 C355.55,166.22 356.45,162.98 357.5,159.2 C355.4,159.2 353.6,159.2 351.5,159.2 C352.55,162.98 353.45,166.22 354.5,170 C354.5,170 354.5,170 354.5,170 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path> <path id="Line-2-decoration-1" d="M354.5,170 C355.55,166.22 356.45,162.98 357.5,159.2 C355.4,159.2 353.6,159.2 351.5,159.2 C352.55,162.98 353.45,166.22 354.5,170 C354.5,170 354.5,170 354.5,170 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="Пробел-между-" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47"> <text id="Пробел-между-" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="434.909668" y="303">Пробел между </tspan> <tspan x="434.909668" y="303">Пробел между </tspan>
<tspan x="437.524414" y="322">параметрами </tspan> <tspan x="437.524414" y="322">параметрами </tspan>
</text> </text>
<path d="M426,311 L392,348" id="Line-9" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M426,311 L392,348" id="Line-9" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-9-decoration-1" d="M392.168736,347.816376 C395.499523,345.743515 398.354484,343.966776 401.685271,341.893915 C400.138983,340.473002 398.813594,339.255076 397.267306,337.834163 C395.482806,341.327938 393.953235,344.322601 392.168736,347.816376 C392.168736,347.816376 392.168736,347.816376 392.168736,347.816376 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path> <path id="Line-9-decoration-1" d="M392.168736,347.816376 C395.499523,345.743515 398.354484,343.966776 401.685271,341.893915 C400.138983,340.473002 398.813594,339.255076 397.267306,337.834163 C395.482806,341.327938 393.953235,344.322601 392.168736,347.816376 C392.168736,347.816376 392.168736,347.816376 392.168736,347.816376 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="Пробел-между--2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47"> <text id="Пробел-между--2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="306.909668" y="35">Пробел между </tspan> <tspan x="306.909668" y="35">Пробел между </tspan>
<tspan x="309.524414" y="54">параметрами</tspan> <tspan x="309.524414" y="54">параметрами</tspan>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 82 KiB

After

Width:  |  Height:  |  Size: 82 KiB

Before After
Before After

4
1-js/4-data-structures/4-object/object-person-empty.svg
View file

@ -13,8 +13,8 @@
<text id="person" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47"> <text id="person" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="41.3417969" y="17">person</tspan> <tspan x="41.3417969" y="17">person</tspan>
</text> </text>
<path d="M66,26 L66,45" id="Line-8" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M66,26 L66,45" id="Line-8" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
</g> </g>
</g> </g>
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2 KiB

After

Width:  |  Height:  |  Size: 2 KiB

Before After
Before After

4
1-js/4-data-structures/6-object-reference/variable-copy-value.svg
View file

@ -12,7 +12,7 @@
<path d="M17,66 L17,38 L2,66" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path> <path d="M17,66 L17,38 L2,66" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(15.000000, 0.000000)"> <g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(15.000000, 0.000000)">
<path d="M18.9106925,0.395208397 L73.4146415,58.8435379 L55.0893075,75.9321883 L0.585358502,17.4838588 L18.9106925,0.395208397 L18.9106925,0.395208397 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup"></path> <path d="M18.9106925,0.395208397 L73.4146415,58.8435379 L55.0893075,75.9321883 L0.585358502,17.4838588 L18.9106925,0.395208397 L18.9106925,0.395208397 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup"></path>
<text id="&quot;Привет!&quot;" sketch:type="MSTextLayer" transform="translate(40.359759, 39.417209) rotate(47.000000) translate(-40.359759, -39.417209) " font-family="Open Sans" font-size="14" font-weight="526" line-spacing="17" fill="#8A704D"> <text id="&quot;Привет!&quot;" sketch:type="MSTextLayer" transform="translate(40.359759, 39.417209) rotate(47.000000) translate(-40.359759, -39.417209) " font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="3.68215005" y="45.9172093">"Привет!"</tspan> <tspan x="3.68215005" y="45.9172093">"Привет!"</tspan>
</text> </text>
</g> </g>
@ -27,7 +27,7 @@
<path d="M18,66 L18,38 L2,66" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path> <path d="M18,66 L18,38 L2,66" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(15.000000, 0.000000)"> <g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(15.000000, 0.000000)">
<path d="M19.1662424,0.395208397 L74.4067312,58.8435379 L55.8337576,75.9321883 L0.593268752,17.4838588 L19.1662424,0.395208397 L19.1662424,0.395208397 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup"></path> <path d="M19.1662424,0.395208397 L74.4067312,58.8435379 L55.8337576,75.9321883 L0.593268752,17.4838588 L19.1662424,0.395208397 L19.1662424,0.395208397 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup"></path>
<text id="&quot;Привет!&quot;" sketch:type="MSTextLayer" transform="translate(39.891647, 37.685856) rotate(47.000000) translate(-39.891647, -37.685856) " font-family="Open Sans" font-size="14" font-weight="526" line-spacing="17" fill="#8A704D"> <text id="&quot;Привет!&quot;" sketch:type="MSTextLayer" transform="translate(39.891647, 37.685856) rotate(47.000000) translate(-39.891647, -37.685856) " font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="3.40960987" y="44.1858556">"Привет!"</tspan> <tspan x="3.40960987" y="44.1858556">"Привет!"</tspan>
</text> </text>
</g> </g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

Before After
Before After

8
1-js/4-data-structures/7-array/array-speed.svg
View file

@ -8,18 +8,18 @@
<g id="array-speed.svg" sketch:type="MSArtboardGroup"> <g id="array-speed.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="108" y="92" width="37" height="64"></rect> <rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="108" y="92" width="37" height="64"></rect>
<rect id="Rectangle-2" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="144" y="92" width="37" height="64"></rect> <rect id="Rectangle-2" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="144" y="92" width="37" height="64"></rect>
<text id="0" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" line-spacing="17" fill="#8A704D"> <text id="0" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="122.5" y="128.5">0</tspan> <tspan x="122.5" y="128.5">0</tspan>
</text> </text>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" line-spacing="17" fill="#8A704D"> <text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="159.5" y="128.5">1</tspan> <tspan x="159.5" y="128.5">1</tspan>
</text> </text>
<rect id="Rectangle-3" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="180" y="92" width="37" height="64"></rect> <rect id="Rectangle-3" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="180" y="92" width="37" height="64"></rect>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" line-spacing="17" fill="#8A704D"> <text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="195.5" y="128.5">2</tspan> <tspan x="195.5" y="128.5">2</tspan>
</text> </text>
<rect id="Rectangle-4" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="216" y="92" width="37" height="64"></rect> <rect id="Rectangle-4" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="216" y="92" width="37" height="64"></rect>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" line-spacing="17" fill="#8A704D"> <text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="231.5" y="128.5">3</tspan> <tspan x="231.5" y="128.5">3</tspan>
</text> </text>
<path d="M326.5,117.5 L331,111.30787 L328,111.30787 L328,95.5 L325,95.5 L325,111.30787 L322,111.30787 L326.5,117.5 Z" id="Shape-5" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(326.500000, 106.500000) rotate(-90.000000) translate(-326.500000, -106.500000) "></path> <path d="M326.5,117.5 L331,111.30787 L328,111.30787 L328,95.5 L325,95.5 L325,111.30787 L322,111.30787 L326.5,117.5 Z" id="Shape-5" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(326.500000, 106.500000) rotate(-90.000000) translate(-326.500000, -106.500000) "></path>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

Before After
Before After

16
1-js/4-data-structures/8-array-methods/9-output-single-linked-list/linked-list.svg
View file

@ -13,8 +13,8 @@
<text id="-8" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D"> <text id="-8" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="45" y="50">1</tspan> <tspan x="45" y="50">1</tspan>
</text> </text>
<path d="M75.73,45 L147.27,45" id="Line-21" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M75.73,45 L147.27,45" id="Line-21" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<text id="next" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47"> <text id="next" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="99" y="34">next</tspan> <tspan x="99" y="34">next</tspan>
</text> </text>
@ -25,8 +25,8 @@
<text id="-9" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D"> <text id="-9" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="185" y="50">2</tspan> <tspan x="185" y="50">2</tspan>
</text> </text>
<path d="M215.73,45 L287.27,45" id="Line-22" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M215.73,45 L287.27,45" id="Line-22" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<text id="next-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47"> <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> <tspan x="239" y="34">next</tspan>
</text> </text>
@ -37,8 +37,8 @@
<text id="-10" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D"> <text id="-10" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="324" y="50">3</tspan> <tspan x="324" y="50">3</tspan>
</text> </text>
<path d="M354.73,45 L426.27,45" id="Line-23" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M354.73,45 L426.27,45" id="Line-23" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<text id="next-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47"> <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> <tspan x="378" y="34">next</tspan>
</text> </text>
@ -49,8 +49,8 @@
<text id="4" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D"> <text id="4" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="464" y="50">4</tspan> <tspan x="464" y="50">4</tspan>
</text> </text>
<path d="M494.73,45 L566.27,45" id="Line-24" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M494.73,45 L566.27,45" id="Line-24" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<text id="next-4" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47"> <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> <tspan x="518" y="34">next</tspan>
</text> </text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

Before After
Before After

4
1-js/4-data-structures/9-array-iteration/reduce.svg
View file

@ -56,8 +56,8 @@
<tspan x="331" y="49">current</tspan> <tspan x="331" y="49">current</tspan>
<tspan x="331" y="65">5</tspan> <tspan x="331" y="65">5</tspan>
</text> </text>
<path d="M420.5,92 L470.5,92" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M420.5,92 L470.5,92" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-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"> <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> <tspan x="485" y="96">0+1+2+3+4+5 = 15</tspan>
</text> </text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

Before After
Before After

16
1-js/5-functions-closures/6-memory-management/family-no-family.svg
View file

@ -6,8 +6,8 @@
<defs></defs> <defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <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"> <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="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M256.5,233.5 L197.5,233.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-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> <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"> <text id="window" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="201" y="17">window</tspan> <tspan x="201" y="17">window</tspan>
@ -42,15 +42,15 @@
<text id="Object-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D"> <text id="Object-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="308" y="208">Object</tspan> <tspan x="308" y="208">Object</tspan>
</text> </text>
<path d="M178.5,155.5 L132.5,187.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M178.5,155.5 L132.5,187.5" id="Line-2" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<path d="M197.5,199.5 L258.5,199.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M197.5,199.5 L258.5,199.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<text id="husband" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D"> <text id="husband" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="200" y="224">husband</tspan> <tspan x="200" y="224">husband</tspan>
</text> </text>
<path d="M272.5,155.5 L319.5,187.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M272.5,155.5 L319.5,187.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-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> <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"> <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> <tspan x="181" y="66">family: null</tspan>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 8.8 KiB

Before After
Before After

8
1-js/5-functions-closures/6-memory-management/family-no-father-2.svg
View file

@ -30,10 +30,10 @@
<text id="Object-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D"> <text id="Object-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="52" y="177">Object</tspan> <tspan x="52" y="177">Object</tspan>
</text> </text>
<path d="M74.5,56.5 L74.5,87.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M74.5,56.5 L74.5,87.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<path d="M73.5,123.5 L73.5,155.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M73.5,123.5 L73.5,155.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
</g> </g>
</g> </g>
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

Before After
Before After

12
1-js/5-functions-closures/6-memory-management/family-no-father.svg
View file

@ -40,12 +40,12 @@
<text id="Object-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D"> <text id="Object-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="308" y="180">Object</tspan> <tspan x="308" y="180">Object</tspan>
</text> </text>
<path d="M227.5,59.5 L227.5,90.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M227.5,59.5 L227.5,90.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<path d="M197.5,171.5 L258.5,171.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M197.5,171.5 L258.5,171.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<path d="M272.5,127.5 L319.5,159.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M272.5,127.5 L319.5,159.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-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> <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)"> <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> <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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB

Before After
Before After

20
1-js/5-functions-closures/6-memory-management/family.svg
View file

@ -6,8 +6,8 @@
<defs></defs> <defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="family.svg" sketch:type="MSArtboardGroup"> <g id="family.svg" sketch:type="MSArtboardGroup">
<path d="M192.5,201.5 L133.5,201.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M192.5,201.5 L133.5,201.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-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> <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"> <text id="window" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="122" y="16">window</tspan> <tspan x="122" y="16">window</tspan>
@ -45,17 +45,17 @@
<text id="Object-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D"> <text id="Object-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="244" y="176">Object</tspan> <tspan x="244" y="176">Object</tspan>
</text> </text>
<path d="M163.5,55.5 L163.5,86.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M163.5,55.5 L163.5,86.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<path d="M114.5,123.5 L68.5,155.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M114.5,123.5 L68.5,155.5" id="Line-2" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<path d="M133.5,167.5 L194.5,167.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M133.5,167.5 L194.5,167.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<text id="husband" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D"> <text id="husband" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="136" y="192">husband</tspan> <tspan x="136" y="192">husband</tspan>
</text> </text>
<path d="M208.5,123.5 L255.5,155.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M208.5,123.5 L255.5,155.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
</g> </g>
</g> </g>
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6 KiB

Before After
Before After

6
1-js/7-js-misc/3-setTimeout-setInterval/setinterval-interval.svg
View file

@ -11,19 +11,19 @@
<text id="func(1)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D"> <text id="func(1)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="131" y="112">func(1)</tspan> <tspan x="131" y="112">func(1)</tspan>
</text> </text>
<path d="M128.581818,34.3424658 L118.911364,31.4383562 L126.490909,15.2739726 L106.470455,36.0958904 L116.193182,39 L110.286364,54.890411 L128.581818,34.3424658 L128.581818,34.3424658 Z M108.195455,35.6575342 L123.302273,19.9315068 L117.604545,32.0410959 L126.856818,34.7808219 L112.9,50.6164384 L117.447727,38.3972603 L108.195455,35.6575342 L108.195455,35.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M128.581818,34.3424658 L118.911364,31.4383562 L126.490909,15.2739726 L106.470455,36.0958904 L116.193182,39 L110.286364,54.890411 L128.581818,34.3424658 L128.581818,34.3424658 Z M108.195455,35.6575342 L123.302273,19.9315068 L117.604545,32.0410959 L126.856818,34.7808219 L112.9,50.6164384 L117.447727,38.3972603 L108.195455,35.6575342 L108.195455,35.6575342 Z" id="Shape" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M109,142.5 L109,72.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path> <path d="M109,142.5 L109,72.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="252" y="88" width="90" height="40"></rect> <rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="252" y="88" width="90" height="40"></rect>
<text id="func(2)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D"> <text id="func(2)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="274" y="112">func(2)</tspan> <tspan x="274" y="112">func(2)</tspan>
</text> </text>
<path d="M271.581818,34.3424658 L261.911364,31.4383562 L269.490909,15.2739726 L249.470455,36.0958904 L259.193182,39 L253.286364,54.890411 L271.581818,34.3424658 L271.581818,34.3424658 Z M251.195455,35.6575342 L266.302273,19.9315068 L260.604545,32.0410959 L269.856818,34.7808219 L255.9,50.6164384 L260.447727,38.3972603 L251.195455,35.6575342 L251.195455,35.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M271.581818,34.3424658 L261.911364,31.4383562 L269.490909,15.2739726 L249.470455,36.0958904 L259.193182,39 L253.286364,54.890411 L271.581818,34.3424658 L271.581818,34.3424658 Z M251.195455,35.6575342 L266.302273,19.9315068 L260.604545,32.0410959 L269.856818,34.7808219 L255.9,50.6164384 L260.447727,38.3972603 L251.195455,35.6575342 L251.195455,35.6575342 Z" id="Shape" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M252,142.5 L252,72.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path> <path d="M252,142.5 L252,72.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="386" y="88" width="90" height="40"></rect> <rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="386" y="88" width="90" height="40"></rect>
<text id="func(3)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D"> <text id="func(3)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="408" y="112">func(3)</tspan> <tspan x="408" y="112">func(3)</tspan>
</text> </text>
<path d="M405.581818,34.3424658 L395.911364,31.4383562 L403.490909,15.2739726 L383.470455,36.0958904 L393.193182,39 L387.286364,54.890411 L405.581818,34.3424658 L405.581818,34.3424658 Z M385.195455,35.6575342 L400.302273,19.9315068 L394.604545,32.0410959 L403.856818,34.7808219 L389.9,50.6164384 L394.447727,38.3972603 L385.195455,35.6575342 L385.195455,35.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M405.581818,34.3424658 L395.911364,31.4383562 L403.490909,15.2739726 L383.470455,36.0958904 L393.193182,39 L387.286364,54.890411 L405.581818,34.3424658 L405.581818,34.3424658 Z M385.195455,35.6575342 L400.302273,19.9315068 L394.604545,32.0410959 L403.856818,34.7808219 L389.9,50.6164384 L394.447727,38.3972603 L385.195455,35.6575342 L385.195455,35.6575342 Z" id="Shape" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M386,142.5 L386,72.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path> <path d="M386,142.5 L386,72.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<text id="100" sketch:type="MSTextLayer" font-family="Consolas" font-size="18" font-weight="normal" fill="#8A704D"> <text id="100" sketch:type="MSTextLayer" font-family="Consolas" font-size="18" font-weight="normal" fill="#8A704D">
<tspan x="93" y="170">100</tspan> <tspan x="93" y="170">100</tspan>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

Before After
Before After

26
1-js/7-js-misc/3-setTimeout-setInterval/settimeout-interval.svg
View file

@ -11,19 +11,19 @@
<text id="func(1)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D"> <text id="func(1)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="82" y="111">func(1)</tspan> <tspan x="82" y="111">func(1)</tspan>
</text> </text>
<path d="M79.5818182,33.3424658 L69.9113636,30.4383562 L77.4909091,14.2739726 L57.4704545,35.0958904 L67.1931818,38 L61.2863636,53.890411 L79.5818182,33.3424658 L79.5818182,33.3424658 Z M59.1954545,34.6575342 L74.3022727,18.9315068 L68.6045455,31.0410959 L77.8568182,33.7808219 L63.9,49.6164384 L68.4477273,37.3972603 L59.1954545,34.6575342 L59.1954545,34.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M79.5818182,33.3424658 L69.9113636,30.4383562 L77.4909091,14.2739726 L57.4704545,35.0958904 L67.1931818,38 L61.2863636,53.890411 L79.5818182,33.3424658 L79.5818182,33.3424658 Z M59.1954545,34.6575342 L74.3022727,18.9315068 L68.6045455,31.0410959 L77.8568182,33.7808219 L63.9,49.6164384 L68.4477273,37.3972603 L59.1954545,34.6575342 L59.1954545,34.6575342 Z" id="Shape" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M60,141.5 L60,71.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path> <path d="M60,141.5 L60,71.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="253" y="87" width="90" height="40"></rect> <rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="253" y="87" width="90" height="40"></rect>
<text id="func(2)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D"> <text id="func(2)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="275" y="111">func(2)</tspan> <tspan x="275" y="111">func(2)</tspan>
</text> </text>
<path d="M272.581818,33.3424658 L262.911364,30.4383562 L270.490909,14.2739726 L250.470455,35.0958904 L260.193182,38 L254.286364,53.890411 L272.581818,33.3424658 L272.581818,33.3424658 Z M252.195455,34.6575342 L267.302273,18.9315068 L261.604545,31.0410959 L270.856818,33.7808219 L256.9,49.6164384 L261.447727,37.3972603 L252.195455,34.6575342 L252.195455,34.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M272.581818,33.3424658 L262.911364,30.4383562 L270.490909,14.2739726 L250.470455,35.0958904 L260.193182,38 L254.286364,53.890411 L272.581818,33.3424658 L272.581818,33.3424658 Z M252.195455,34.6575342 L267.302273,18.9315068 L261.604545,31.0410959 L270.856818,33.7808219 L256.9,49.6164384 L261.447727,37.3972603 L252.195455,34.6575342 L252.195455,34.6575342 Z" id="Shape" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M253,141.5 L253,71.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path> <path d="M253,141.5 L253,71.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="446" y="87" width="90" height="40"></rect> <rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="446" y="87" width="90" height="40"></rect>
<text id="func(3)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D"> <text id="func(3)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="468" y="111">func(3)</tspan> <tspan x="468" y="111">func(3)</tspan>
</text> </text>
<path d="M465.581818,33.3424658 L455.911364,30.4383562 L463.490909,14.2739726 L443.470455,35.0958904 L453.193182,38 L447.286364,53.890411 L465.581818,33.3424658 L465.581818,33.3424658 Z M445.195455,34.6575342 L460.302273,18.9315068 L454.604545,31.0410959 L463.856818,33.7808219 L449.9,49.6164384 L454.447727,37.3972603 L445.195455,34.6575342 L445.195455,34.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M465.581818,33.3424658 L455.911364,30.4383562 L463.490909,14.2739726 L443.470455,35.0958904 L453.193182,38 L447.286364,53.890411 L465.581818,33.3424658 L465.581818,33.3424658 Z M445.195455,34.6575342 L460.302273,18.9315068 L454.604545,31.0410959 L463.856818,33.7808219 L449.9,49.6164384 L454.447727,37.3972603 L445.195455,34.6575342 L445.195455,34.6575342 Z" id="Shape" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M446,141.5 L446,71.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path> <path d="M446,141.5 L446,71.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M150.5,108.5 L250.5,108.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" sketch:type="MSShapeGroup"></path> <path d="M150.5,108.5 L250.5,108.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M343.5,108.5 L443.5,108.5" id="Line-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" sketch:type="MSShapeGroup"></path> <path d="M343.5,108.5 L443.5,108.5" id="Line-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
@ -33,16 +33,16 @@
<text id="100" sketch:type="MSTextLayer" font-family="Consolas" font-size="18" font-weight="normal" fill="#000000"> <text id="100" sketch:type="MSTextLayer" font-family="Consolas" font-size="18" font-weight="normal" fill="#000000">
<tspan x="380" y="190">100</tspan> <tspan x="380" y="190">100</tspan>
</text> </text>
<path d="M150.5,165.5 L250.5,165.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M150.5,165.5 L250.5,165.5" id="Line-3" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M242.5,165.5 L250.5,160.5" id="Line-5" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(246.500000, 163.000000) scale(-1, 1) translate(-246.500000, -163.000000) "></path> <path d="M242.5,165.5 L250.5,160.5" id="Line-5" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(246.500000, 163.000000) scale(-1, 1) translate(-246.500000, -163.000000) "></path>
<path d="M150.5,170.5 L158.5,165.5" id="Line-6" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(154.500000, 168.000000) scale(-1, 1) translate(-154.500000, -168.000000) "></path> <path d="M150.5,170.5 L158.5,165.5" id="Line-6" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(154.500000, 168.000000) scale(-1, 1) translate(-154.500000, -168.000000) "></path>
<path d="M242.5,170.5 L250.5,165.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M242.5,170.5 L250.5,165.5" id="Line" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M150.5,165.5 L158.5,160.5" id="Line-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M150.5,165.5 L158.5,160.5" id="Line-4" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M344.5,165.5 L444.5,165.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M344.5,165.5 L444.5,165.5" id="Line-3" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M436.5,165.5 L444.5,160.5" id="Line-5" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(440.500000, 163.000000) scale(-1, 1) translate(-440.500000, -163.000000) "></path> <path d="M436.5,165.5 L444.5,160.5" id="Line-5" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(440.500000, 163.000000) scale(-1, 1) translate(-440.500000, -163.000000) "></path>
<path d="M344.5,170.5 L352.5,165.5" id="Line-6" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(348.500000, 168.000000) scale(-1, 1) translate(-348.500000, -168.000000) "></path> <path d="M344.5,170.5 L352.5,165.5" id="Line-6" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(348.500000, 168.000000) scale(-1, 1) translate(-348.500000, -168.000000) "></path>
<path d="M436.5,170.5 L444.5,165.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M436.5,170.5 L444.5,165.5" id="Line" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M344.5,165.5 L352.5,160.5" id="Line-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M344.5,165.5 L352.5,160.5" id="Line-4" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
</g> </g>
</g> </g>
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.4 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

Before After
Before After

4
1-js/9-prototypes/1-prototype/proto-animal-rabbit.svg
View file

@ -20,8 +20,8 @@
<text id="rabbit" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D"> <text id="rabbit" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="13" y="103">rabbit</tspan> <tspan x="13" y="103">rabbit</tspan>
</text> </text>
<path d="M73.5,101.5 L73.5,60.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M73.5,101.5 L73.5,60.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D"> <text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="83" y="82">__proto__</tspan> <tspan x="83" y="82">__proto__</tspan>
</text> </text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Before After
Before After

8
1-js/9-prototypes/3-native-prototypes/native-prototypes-array-tostring.svg
View file

@ -23,13 +23,13 @@
<tspan x="16" y="20">Object.prototype</tspan> <tspan x="16" y="20">Object.prototype</tspan>
</text> </text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="16" y="277" width="200" height="30"></rect> <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="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M76.5,268.5 L76.5,227.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47"> <text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="86" y="249">__proto__</tspan> <tspan x="86" y="249">__proto__</tspan>
</text> </text>
<path d="M76.5,136.5 L76.5,95.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M76.5,136.5 L76.5,95.5" id="Line-2" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<text id="__proto__-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47"> <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> <tspan x="86" y="117">__proto__</tspan>
</text> </text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

Before After
Before After

28
1-js/9-prototypes/3-native-prototypes/native-prototypes-classes.svg
View file

@ -14,13 +14,13 @@
<text id="Object.prototype" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D"> <text id="Object.prototype" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="239" y="85">Object.prototype</tspan> <tspan x="239" y="85">Object.prototype</tspan>
</text> </text>
<path d="M299.5,68.5 L299.5,27.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M299.5,68.5 L299.5,27.5" id="Line-2" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<text id="__proto__-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47"> <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> <tspan x="309" y="49">__proto__</tspan>
</text> </text>
<path d="M299.5,201.5 L299.5,160.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M299.5,201.5 L299.5,160.5" id="Line-3" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<text id="null" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D"> <text id="null" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="285" y="16">null</tspan> <tspan x="285" y="16">null</tspan>
</text> </text>
@ -57,10 +57,10 @@
<text id="__proto__-4" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47"> <text id="__proto__-4" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="541" y="182">__proto__</tspan> <tspan x="541" y="182">__proto__</tspan>
</text> </text>
<path d="M142.5,193.5 L220.5,157.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M142.5,193.5 L220.5,157.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<path d="M539.5,193.5 L462.5,157.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M539.5,193.5 L462.5,157.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-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> <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"> <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> <tspan x="71" y="354">[1, 2, 3]</tspan>
@ -75,18 +75,18 @@
<text id="5" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D"> <text id="5" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="573" y="355">5</tspan> <tspan x="573" y="355">5</tspan>
</text> </text>
<path d="M299.5,331.5 L299.5,290.5" id="Line-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M299.5,331.5 L299.5,290.5" id="Line-4" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<text id="__proto__-5" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47"> <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> <tspan x="309" y="312">__proto__</tspan>
</text> </text>
<path d="M576.5,331.5 L576.5,290.5" id="Line-5" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M576.5,331.5 L576.5,290.5" id="Line-5" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<text id="__proto__-6" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47"> <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> <tspan x="586" y="312">__proto__</tspan>
</text> </text>
<path d="M106.5,331.5 L106.5,290.5" id="Line-6" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M106.5,331.5 L106.5,290.5" id="Line-6" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<text id="__proto__-7" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47"> <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> <tspan x="116" y="312">__proto__</tspan>
</text> </text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.6 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

Before After
Before After

8
1-js/9-prototypes/3-native-prototypes/native-prototypes-object.svg
View file

@ -18,13 +18,13 @@
<text id="obj" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D"> <text id="obj" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="13" y="205">obj</tspan> <tspan x="13" y="205">obj</tspan>
</text> </text>
<path d="M73.5,203.5 L73.5,162.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M73.5,203.5 L73.5,162.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D"> <text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="83" y="184">__proto__</tspan> <tspan x="83" y="184">__proto__</tspan>
</text> </text>
<path d="M73.5,71.5 L73.5,30.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M73.5,71.5 L73.5,30.5" id="Line-2" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<text id="__proto__-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D"> <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> <tspan x="83" y="52">__proto__</tspan>
</text> </text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

Before After
Before After

8
1-js/9-prototypes/5-class-inheritance/class-inheritance-array-object.svg
View file

@ -26,13 +26,13 @@
<tspan x="12" y="17.109589">Object.prototype</tspan> <tspan x="12" y="17.109589">Object.prototype</tspan>
</text> </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> <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="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M72.5,265.609589 L72.5,224.609589" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47"> <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> <tspan x="82" y="246.109589">__proto__</tspan>
</text> </text>
<path d="M72.5,133.609589 L72.5,92.609589" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M72.5,133.609589 L72.5,92.609589" id="Line-2" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<text id="__proto__-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47"> <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> <tspan x="82" y="114.109589">__proto__</tspan>
</text> </text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4 KiB

Before After
Before After

8
1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-animal.svg
View file

@ -25,13 +25,13 @@
<tspan x="14" y="20">Animal.prototype</tspan> <tspan x="14" y="20">Animal.prototype</tspan>
</text> </text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="14" y="257" width="200" height="50"></rect> <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="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M74.5,244.5 L74.5,203.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47"> <text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="84" y="225">__proto__</tspan> <tspan x="84" y="225">__proto__</tspan>
</text> </text>
<path d="M74.5,136.5 L74.5,95.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M74.5,136.5 L74.5,95.5" id="Line-2" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<text id="__proto__-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47"> <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> <tspan x="84" y="117">__proto__</tspan>
</text> </text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

Before After
Before After

8
1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-run-animal.svg
View file

@ -27,13 +27,13 @@
<tspan x="13" y="16">Animal.prototype</tspan> <tspan x="13" y="16">Animal.prototype</tspan>
</text> </text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="13" y="272" width="200" height="50"></rect> <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="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M73.5,259.5 L73.5,218.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47"> <text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="83" y="240">__proto__</tspan> <tspan x="83" y="240">__proto__</tspan>
</text> </text>
<path d="M73.5,132.5 L73.5,91.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M73.5,132.5 L73.5,91.5" id="Line-2" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<text id="__proto__-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47"> <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> <tspan x="83" y="113">__proto__</tspan>
</text> </text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4 KiB

After

Width:  |  Height:  |  Size: 4 KiB

Before After
Before After

10
10-regular-expressions-javascript/1-regexp-introduction/article.md
View file

@ -15,20 +15,20 @@
var regexp = new RegExp("шаблон", "флаги"); var regexp = new RegExp("шаблон", "флаги");
``` ```
Как правило, используют более короткую запись через слеши `/`: Как правило, используют более короткую запись: шаблон внутри слешей `"/"`:
```js ```js
var regexp = /шаблон/; // без флагов var regexp = /шаблон/; // без флагов
var regexp = /шаблон/gmi; // с флагами gmi (изучим их дальше) var regexp = /шаблон/gmi; // с флагами gmi (изучим их дальше)
``` ```
Слэши `'/'` говорят JavaScript о том, что это регулярное выражение. Они играют здесь ту же роль, что и кавычки для обозначения строк. Слэши `"/"` говорят JavaScript о том, что это регулярное выражение. Они играют здесь ту же роль, что и кавычки для обозначения строк.
## Использование ## Использование
Основа регулярного выражения -- паттерн. Это строка, которую можно расширить специальными символами, которые делают поиск намного мощнее. Основа регулярного выражения -- паттерн. Это строка, которую можно расширить специальными символами, которые делают поиск намного мощнее.
Если флагов и специальных символов нет, то поиск по паттерну -- то же самое, что и обычный поиск подстроки: В простейшем случае, если флагов и специальных символов нет, поиск по паттерну -- то же самое, что и обычный поиск подстроки:
```js ```js
//+ run //+ run
@ -48,7 +48,9 @@ var substr = "лю";
alert( str.indexOf(substr) ); // 2 alert( str.indexOf(substr) ); // 2
``` ```
Как видим, то же самое, разве что для регэкспа использован метод [:String#search(reg)], а для строки [:String#indexOf(substr)]. Но это соответствие лишь кажущееся. Очень скоро мы усложним регулярные выражения, и тогда появятся отличия. Как видим, то же самое, разве что для регэкспа использован метод [search](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/search) -- он как раз работает с регулярными выражениями, а для подстроки -- [indexOf](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf).
Но это соответствие лишь кажущееся. Очень скоро мы усложним регулярные выражения, и тогда увидим, что они гораздо мощнее.
[smart header="Цветовые обозначения"] [smart header="Цветовые обозначения"]
Здесь и далее используется следующая цветовая схема: Здесь и далее используется следующая цветовая схема:

12
2-ui/1-document/16-metrics-window/document-client-width-height.svg
View file

@ -22,12 +22,12 @@
<text id="document.documentEle" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"> <text id="document.documentEle" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="229" y="197">document.documentElement.clientWidth</tspan> <tspan x="229" y="197">document.documentElement.clientWidth</tspan>
</text> </text>
<path d="M457.012291,168.153273 L277.502296,168.153273" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M457.012291,168.153273 L277.502296,168.153273" id="Line-3" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-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="2" 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-linecap="square" fill="#EE6B47"></path>
<path d="M257.5,151.012291 L257.5,14.5022964" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M257.5,151.012291 L257.5,14.5022964" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-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="2" 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-linecap="square" fill="#EE6B47"></path>
</g> </g>
</g> </g>
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.1 KiB

After

Width:  |  Height:  |  Size: 6 KiB

Before After
Before After

24
2-ui/1-document/17-coordinates/coords.svg
View file

@ -33,18 +33,18 @@
<text id="right" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"> <text id="right" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="106" y="217">right</tspan> <tspan x="106" y="217">right</tspan>
</text> </text>
<path d="M246.5,145 L246.5,78.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M246.5,145 L246.5,78.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-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="2" 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-linecap="square" fill="#EE6B47"></path>
<path d="M275.5,170.012291 L275.5,78.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M275.5,170.012291 L275.5,78.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-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="2" 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-linecap="square" fill="#EE6B47"></path>
<path d="M222.012291,224.5 L29.5022964,224.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M222.012291,224.5 L29.5022964,224.5" id="Line-2" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-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="2" 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-linecap="square" fill="#EE6B47"></path>
<path d="M149.012291,188.5 L29.5022888,188.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M149.012291,188.5 L29.5022888,188.5" id="Line-3" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-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="2" 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-linecap="square" fill="#EE6B47"></path>
</g> </g>
</g> </g>
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

Before After
Before After

12
2-ui/1-document/4-traversing-dom/dom-links-elements.svg
View file

@ -26,17 +26,17 @@
<text id="&lt;DIV&gt;" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D"> <text id="&lt;DIV&gt;" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="201.051859" y="225">&lt;DIV&gt;</tspan> <tspan x="201.051859" y="225">&lt;DIV&gt;</tspan>
</text> </text>
<path d="M220.5,200.5 L220.5,174.5" id="Line-6" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M220.5,200.5 L220.5,174.5" id="Line-6" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-6-decoration-1" d="M220.5,174.5 C219.45,178.28 218.55,181.52 217.5,185.3 C219.6,185.3 221.4,185.3 223.5,185.3 C222.45,181.52 221.55,178.28 220.5,174.5 C220.5,174.5 220.5,174.5 220.5,174.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path> <path id="Line-6-decoration-1" d="M220.5,174.5 C219.45,178.28 218.55,181.52 217.5,185.3 C219.6,185.3 221.4,185.3 223.5,185.3 C222.45,181.52 221.55,178.28 220.5,174.5 C220.5,174.5 220.5,174.5 220.5,174.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M267.5,219.5 L427,219.5" id="Line-7" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M267.5,219.5 L427,219.5" id="Line-7" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-7-decoration-1" d="M426.5,219.5 C422.72,218.45 419.48,217.55 415.7,216.5 C415.7,218.6 415.7,220.4 415.7,222.5 C419.48,221.45 422.72,220.55 426.5,219.5 C426.5,219.5 426.5,219.5 426.5,219.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path> <path id="Line-7-decoration-1" d="M426.5,219.5 C422.72,218.45 419.48,217.55 415.7,216.5 C415.7,218.6 415.7,220.4 415.7,222.5 C419.48,221.45 422.72,220.55 426.5,219.5 C426.5,219.5 426.5,219.5 426.5,219.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="nextElementSibling" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold"> <text id="nextElementSibling" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold">
<tspan x="276" y="205" fill="#8A704D">next</tspan> <tspan x="276" y="205" fill="#8A704D">next</tspan>
<tspan x="306.789062" y="205" fill="#EE6B47">Element</tspan> <tspan x="306.789062" y="205" fill="#EE6B47">Element</tspan>
<tspan x="360.669922" y="205" fill="#8A704D">Sibling</tspan> <tspan x="360.669922" y="205" fill="#8A704D">Sibling</tspan>
</text> </text>
<path d="M168,219.5 L12,219.5" id="Line-8" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M168,219.5 L12,219.5" id="Line-8" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-8-decoration-1" d="M12,219.5 C15.78,220.55 19.02,221.45 22.8,222.5 C22.8,220.4 22.8,218.6 22.8,216.5 C19.02,217.55 15.78,218.45 12,219.5 C12,219.5 12,219.5 12,219.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path> <path id="Line-8-decoration-1" d="M12,219.5 C15.78,220.55 19.02,221.45 22.8,222.5 C22.8,220.4 22.8,218.6 22.8,216.5 C19.02,217.55 15.78,218.45 12,219.5 C12,219.5 12,219.5 12,219.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="previousElementSibli" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold"> <text id="previousElementSibli" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold">
<tspan x="6" y="205" fill="#8A704D">previous</tspan> <tspan x="6" y="205" fill="#8A704D">previous</tspan>
<tspan x="67.578125" y="205" fill="#EE6B47">Element</tspan> <tspan x="67.578125" y="205" fill="#EE6B47">Element</tspan>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 9.7 KiB

Before After
Before After

12
2-ui/1-document/4-traversing-dom/dom-links.svg
View file

@ -31,15 +31,15 @@
<text id="&lt;DIV&gt;" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D"> <text id="&lt;DIV&gt;" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="189.051859" y="288">&lt;DIV&gt;</tspan> <tspan x="189.051859" y="288">&lt;DIV&gt;</tspan>
</text> </text>
<path d="M208.5,263.5 L208.5,237.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M208.5,263.5 L208.5,237.5" id="Line" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M208.5,237.5 C207.45,241.28 206.55,244.52 205.5,248.3 C207.6,248.3 209.4,248.3 211.5,248.3 C210.45,244.52 209.55,241.28 208.5,237.5 C208.5,237.5 208.5,237.5 208.5,237.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path> <path id="Line-decoration-1" d="M208.5,237.5 C207.45,241.28 206.55,244.52 205.5,248.3 C207.6,248.3 209.4,248.3 211.5,248.3 C210.45,244.52 209.55,241.28 208.5,237.5 C208.5,237.5 208.5,237.5 208.5,237.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M255.5,282.5 L368,282.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M255.5,282.5 L368,282.5" id="Line" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M367.5,282.5 C363.72,281.45 360.48,280.55 356.7,279.5 C356.7,281.6 356.7,283.4 356.7,285.5 C360.48,284.45 363.72,283.55 367.5,282.5 C367.5,282.5 367.5,282.5 367.5,282.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path> <path id="Line-decoration-1" d="M367.5,282.5 C363.72,281.45 360.48,280.55 356.7,279.5 C356.7,281.6 356.7,283.4 356.7,285.5 C360.48,284.45 363.72,283.55 367.5,282.5 C367.5,282.5 367.5,282.5 367.5,282.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="nextSibling" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"> <text id="nextSibling" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="264" y="268">nextSibling</tspan> <tspan x="264" y="268">nextSibling</tspan>
</text> </text>
<path d="M164.5,282.5 L50,282.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M164.5,282.5 L50,282.5" id="Line" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M50.5,282.5 C54.28,283.55 57.52,284.45 61.3,285.5 C61.3,283.4 61.3,281.6 61.3,279.5 C57.52,280.55 54.28,281.45 50.5,282.5 C50.5,282.5 50.5,282.5 50.5,282.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path> <path id="Line-decoration-1" d="M50.5,282.5 C54.28,283.55 57.52,284.45 61.3,285.5 C61.3,283.4 61.3,281.6 61.3,279.5 C57.52,280.55 54.28,281.45 50.5,282.5 C50.5,282.5 50.5,282.5 50.5,282.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="previousSibling" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"> <text id="previousSibling" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="50" y="268">previousSibling</tspan> <tspan x="50" y="268">previousSibling</tspan>
</text> </text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.9 KiB

After

Width:  |  Height:  |  Size: 9.8 KiB

Before After
Before After

6
2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling.svg
View file

@ -19,9 +19,9 @@
<text id="3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#EE6B47"> <text id="3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="157" y="181">3</tspan> <tspan x="157" y="181">3</tspan>
</text> </text>
<text id="Самый-глубокий-элеме" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" line-spacing="17" fill="#8A704D"> <text id="Самый-глубокий-элеме" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="211" y="181">Самый глубокий </tspan> <tspan x="213.611328" y="181">Самый глубокий </tspan>
<tspan x="211" y="198">элемент</tspan> <tspan x="243.361328" y="198">элемент</tspan>
</text> </text>
<path d="M170.5,176.5 L200.5,176.5" id="Line-30" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path> <path d="M170.5,176.5 L200.5,176.5" id="Line-30" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
</g> </g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

Before After
Before After

2
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.svg
View file

@ -18,7 +18,7 @@
<text id="#TO" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D"> <text id="#TO" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="251.150618" y="109">#TO</tspan> <tspan x="251.150618" y="109">#TO</tspan>
</text> </text>
<path d="M236,94.6353921 L223.12832,94.6353921 L217.344468,101.853926 L105.198001,101.853926 L108.348404,94.146 L82,103.645409 L108.348404,113.146 L105.235092,105.438074 L217.204218,105.438074 L223.12832,112.830378 L236,112.830378 L228.709332,103.733476 L236,94.6353921" id="Fill-21" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(159.000000, 103.646000) scale(-1, 1) translate(-159.000000, -103.646000) "></path> <path d="M236,94.6353921 L223.12832,94.6353921 L217.344468,101.853926 L105.198001,101.853926 L108.348404,94.146 L82,103.645409 L108.348404,113.146 L105.235092,105.438074 L217.204218,105.438074 L223.12832,112.830378 L236,112.830378 L228.709332,103.733476 L236,94.6353921" id="Fill-21" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(159.000000, 103.646000) scale(-1, 1) translate(-159.000000, -103.646000) "></path>
<text id="target" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"> <text id="target" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="240" y="80">target</tspan> <tspan x="240" y="80">target</tspan>
</text> </text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4 KiB

After

Width:  |  Height:  |  Size: 4 KiB

Before After
Before After

2
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.svg
View file

@ -26,7 +26,7 @@
<text id="&lt;DIV&gt;-3" opacity="0.6" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D"> <text id="&lt;DIV&gt;-3" opacity="0.6" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="306.384505" y="63">&lt;DIV&gt;</tspan> <tspan x="306.384505" y="63">&lt;DIV&gt;</tspan>
</text> </text>
<path d="M401,38.6353921 L375.340223,38.6353921 L363.810075,45.8539263 L140.245366,45.8539263 L146.525714,38.146 L94,47.6454089 L146.525714,57.146 L140.319306,49.4380737 L363.530486,49.4380737 L375.340223,56.8303775 L401,56.8303775 L386.466006,47.7334759 L401,38.6353921" id="Fill-21" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(247.500000, 47.646000) scale(-1, 1) translate(-247.500000, -47.646000) "></path> <path d="M401,38.6353921 L375.340223,38.6353921 L363.810075,45.8539263 L140.245366,45.8539263 L146.525714,38.146 L94,47.6454089 L146.525714,57.146 L140.319306,49.4380737 L363.530486,49.4380737 L375.340223,56.8303775 L401,56.8303775 L386.466006,47.7334759 L401,38.6353921" id="Fill-21" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(247.500000, 47.646000) scale(-1, 1) translate(-247.500000, -47.646000) "></path>
<text id="mouseover" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"> <text id="mouseover" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="340" y="17">mouseover</tspan> <tspan x="340" y="17">mouseover</tspan>
</text> </text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

Before After
Before After

4
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout.svg
View file

@ -10,11 +10,11 @@
<text id="&lt;DIV&gt;" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D"> <text id="&lt;DIV&gt;" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="119.384505" y="56">&lt;DIV&gt;</tspan> <tspan x="119.384505" y="56">&lt;DIV&gt;</tspan>
</text> </text>
<path d="M109,51.8276766 C109,51.8276766 88.1589755,39.0886766 74.3265137,34 C73.990849,36.1044846 73.6561461,38.2078702 73.3204815,40.3112558 C50.6491708,39.1326345 27.6239215,40.8772137 6,45.5449934 C8.76995481,49.733632 11.5399096,53.9217211 14.3098644,58.1098102 C32.5800247,54.1662369 52.0341482,52.6925483 71.1891551,53.6881948 C70.8534905,55.7926793 70.5178258,57.8960649 70.1831229,60 C81.3091081,56.2091804 109,51.8276766 109,51.8276766" id="Fill-55" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M109,51.8276766 C109,51.8276766 88.1589755,39.0886766 74.3265137,34 C73.990849,36.1044846 73.6561461,38.2078702 73.3204815,40.3112558 C50.6491708,39.1326345 27.6239215,40.8772137 6,45.5449934 C8.76995481,49.733632 11.5399096,53.9217211 14.3098644,58.1098102 C32.5800247,54.1662369 52.0341482,52.6925483 71.1891551,53.6881948 C70.8534905,55.7926793 70.5178258,57.8960649 70.1831229,60 C81.3091081,56.2091804 109,51.8276766 109,51.8276766" id="Fill-55" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<text id="mouseover" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"> <text id="mouseover" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="21">mouseover</tspan> <tspan x="17" y="21">mouseover</tspan>
</text> </text>
<path d="M268,51.8276766 C268,51.8276766 247.158975,39.0886766 233.326514,34 C232.990849,36.1044846 232.656146,38.2078702 232.320481,40.3112558 C209.649171,39.1326345 186.623921,40.8772137 165,45.5449934 C167.769955,49.733632 170.53991,53.9217211 173.309864,58.1098102 C191.580025,54.1662369 211.034148,52.6925483 230.189155,53.6881948 C229.85349,55.7926793 229.517826,57.8960649 229.183123,60 C240.309108,56.2091804 268,51.8276766 268,51.8276766" id="Fill-56" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M268,51.8276766 C268,51.8276766 247.158975,39.0886766 233.326514,34 C232.990849,36.1044846 232.656146,38.2078702 232.320481,40.3112558 C209.649171,39.1326345 186.623921,40.8772137 165,45.5449934 C167.769955,49.733632 170.53991,53.9217211 173.309864,58.1098102 C191.580025,54.1662369 211.034148,52.6925483 230.189155,53.6881948 C229.85349,55.7926793 229.517826,57.8960649 229.183123,60 C240.309108,56.2091804 268,51.8276766 268,51.8276766" id="Fill-56" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<text id="mouseoout" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"> <text id="mouseoout" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="176" y="21">mouseoout</tspan> <tspan x="176" y="21">mouseoout</tspan>
</text> </text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

Before After
Before After

2
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child.svg
View file

@ -14,7 +14,7 @@
<text id="#TO" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D"> <text id="#TO" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="160.150618" y="88">#TO</tspan> <tspan x="160.150618" y="88">#TO</tspan>
</text> </text>
<path d="M151,83.0279175 C151,83.0279175 135.824497,73.7186483 125.752316,70 C125.5079,71.5378926 125.264184,73.074982 125.019768,74.6120715 C108.511532,73.7507714 91.7455739,75.0256562 76,78.436726 C78.0169574,81.4976542 80.0339148,84.5581808 82.0508721,87.6187075 C95.3543869,84.7368655 109.520011,83.6599391 123.467831,84.3875269 C123.223415,85.9254195 122.978999,87.462509 122.735284,89 C130.836729,86.2297857 151,83.0279175 151,83.0279175" id="Fill-54" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M151,83.0279175 C151,83.0279175 135.824497,73.7186483 125.752316,70 C125.5079,71.5378926 125.264184,73.074982 125.019768,74.6120715 C108.511532,73.7507714 91.7455739,75.0256562 76,78.436726 C78.0169574,81.4976542 80.0339148,84.5581808 82.0508721,87.6187075 C95.3543869,84.7368655 109.520011,83.6599391 123.467831,84.3875269 C123.223415,85.9254195 122.978999,87.462509 122.735284,89 C130.836729,86.2297857 151,83.0279175 151,83.0279175" id="Fill-54" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<text id="mouseover" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"> <text id="mouseover" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="113" y="59">mouseover</tspan> <tspan x="113" y="59">mouseover</tspan>
</text> </text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Before After
Before After

23
4-ajax/4-xhr-forms/article.md
View file

@ -48,10 +48,7 @@ alert( encodeURIComponent('В') ); // %D0%92
alert( encodeURIComponent('Виктор') ); // %D0%92%D0%B8%D0%BA%D1%82%D0%BE%D1%80 alert( encodeURIComponent('Виктор') ); // %D0%92%D0%B8%D0%BA%D1%82%D0%BE%D1%80
``` ```
Формы с `method="GET"` всегда кодируются указанным образом. Эта кодировка используется в основном для метода GET, то есть для передачи параметра в строке запроса. По стандарту строка запроса не может содержать произвольные Unicode-символы, поэтому они кодируются как показано выше.
Для `method="POST"` существует альтернативная кодировка, которую мы рассмотрим позже.
## GET-запрос ## GET-запрос
@ -92,11 +89,23 @@ xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
## POST с urlencoded ## POST с urlencoded
В методе POST параметры передаются не в URL, а в теле, посылаемом через `send(body)`. Поэтому `params` нужно указывать не в `open`, а в `send`. В методе POST параметры передаются не в URL, а в теле запроса. Оно указывается в вызове `send(body)`.
Кроме того, при POST обязателен заголовок `Content-Type`, содержащий кодировку. Это указание для сервера -- как обрабатывать (раскодировать) пришедший запрос. В стандартных HTTP-формах для метода POST доступны [три кодировки](https://html.spec.whatwg.org/multipage/forms.html#submit-body), задаваемые через атрибут `enctype`:
<ul>
<li>`application/x-www-form-urlencoded`</li>
<li>`multipart/form-data`</li>
<li>`text-plain`</li>
</ul>
В зависимости от `enctype` браузер кодирует данные соответствующим способом перед отправкой на сервер.
В случае с `XMLHttpRequest` мы, вообще говоря, не обязаны использовать ни один из этих способов. Главное, чтобы сервер наш запрос понял. Но обычно проще всего выбрать какой-то из стандартных.
В частности, при POST обязателен заголовок `Content-Type`, содержащий кодировку. Это указание для сервера -- как обрабатывать (раскодировать) пришедший запрос.
Для примера отправим запрос в кодировке `application/x-www-form-urlencoded`:
Полный код для POST:
```js ```js
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();

8
4-ajax/5-xhr-crossdomain/xhr-another-domain.svg
View file

@ -21,13 +21,13 @@
<path d="M69,81 L69,401" id="Line" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path> <path d="M69,81 L69,401" id="Line" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M294,81 L294,401" id="Line" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path> <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="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="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M70.5,139.5 L290.5,139.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<text id="send()" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"> <text id="send()" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="153" y="132">send()</tspan> <tspan x="153" y="132">send()</tspan>
</text> </text>
<path d="M295.5,189.5 L515.5,189.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M295.5,189.5 L515.5,189.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-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"> <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="370.165039" y="181">HTTP-запрос</tspan>
<tspan x="349.822266" y="201" font-size="12">с заголовком Origin</tspan> <tspan x="349.822266" y="201" font-size="12">с заголовком Origin</tspan>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

Before After
Before After

16
4-ajax/5-xhr-crossdomain/xhr-preflight.svg
View file

@ -21,8 +21,8 @@
<path d="M69,82 L69,602" id="Line" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path> <path d="M69,82 L69,602" id="Line" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M294,82 L294,602" id="Line" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path> <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="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="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M70.5,139.5 L290.5,139.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
<text id="send()" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"> <text id="send()" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="153" y="132">send()</tspan> <tspan x="153" y="132">send()</tspan>
</text> </text>
@ -32,8 +32,8 @@
<tspan x="318.833984" y="211" font-size="12">Access-Control-Request-Method</tspan> <tspan x="318.833984" y="211" font-size="12">Access-Control-Request-Method</tspan>
<tspan x="315.535156" y="231" font-size="12">Access-Control-Request-Headers</tspan> <tspan x="315.535156" y="231" font-size="12">Access-Control-Request-Headers</tspan>
</text> </text>
<path d="M297.5,292.5 L527.5,292.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M297.5,292.5 L527.5,292.5" id="Line" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-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"> <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="392.408203" y="285">200 OK</tspan>
<tspan x="326.431641" y="305" font-size="12">Access-Control-Allow-Method</tspan> <tspan x="326.431641" y="305" font-size="12">Access-Control-Allow-Method</tspan>
@ -41,8 +41,8 @@
<tspan x="342.925781" y="345" font-size="12">Access-Control-Max-Age</tspan> <tspan x="342.925781" y="345" font-size="12">Access-Control-Max-Age</tspan>
<tspan x="488.074219" y="345"></tspan> <tspan x="488.074219" y="345"></tspan>
</text> </text>
<path d="M298.5,179.5 L528.5,179.5" id="Line-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M298.5,179.5 L528.5,179.5" id="Line-4" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-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 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 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 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>
@ -56,8 +56,8 @@
<tspan x="75.2382812" y="545">если сервер разрешил: onload</tspan> <tspan x="75.2382812" y="545">если сервер разрешил: onload</tspan>
<tspan x="132.967773" y="565">иначе onerror</tspan> <tspan x="132.967773" y="565">иначе onerror</tspan>
</text> </text>
<path d="M296.5,435.5 L526.5,435.5" id="Line-5" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path> <path d="M296.5,435.5 L526.5,435.5" id="Line-5" stroke="#EE6B47" 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="2" stroke-linecap="square" fill="#EE6B47"></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-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"> <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="339.527344" y="427">Основной HTTP-запрос</tspan>
<tspan x="396.707031" y="447" font-size="12">Origin</tspan> <tspan x="396.707031" y="447" font-size="12">Origin</tspan>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

Before After
Before After

33
5-animation/1-bezier/article.md
View file

@ -4,9 +4,8 @@
Несмотря на "умное" название -- это очень простая штука. Несмотря на "умное" название -- это очень простая штука.
В принципе, можно создавать анимацию и без знания кривых Безье, но стоит один раз прочитать, что это такое, так как в векторной графике и продвинутых анимаций без них никак. Это образовательный минимум. В принципе, можно создавать анимацию и без знания кривых Безье, но стоит один раз изучить эту тему хотя бы для того, чтобы в дальнейшем с комфортом пользоваться этим замечательным инструментом. Тем более что в мире векторной графики и продвинутых анимаций без них никак.
Тему эту стоит изучить один раз, чтобы в дальнейшем с комфортом пользоваться этим замечательным инструментом.
[cut] [cut]
## Виды кривых Безье ## Виды кривых Безье
@ -17,15 +16,15 @@
По двум точкам: По двум точкам:
<img src="bezier2.png"> <img src="bezier2.svg">
По трём точкам: По трём точкам:
<img src="bezier3.png"> <img src="bezier3.svg">
По четырём точкам: По четырём точкам:
<img src="bezier4.png"> <img src="bezier4.svg">
Если вы посмотрите внимательно на эти кривые, то "на глазок" заметите: Если вы посмотрите внимательно на эти кривые, то "на глазок" заметите:
@ -35,7 +34,7 @@
Для двух точек -- это линейная кривая (т.е. прямая), для трёх точек -- квадратическая кривая (парабола), для четырёх -- кубическая.</li> Для двух точек -- это линейная кривая (т.е. прямая), для трёх точек -- квадратическая кривая (парабола), для четырёх -- кубическая.</li>
<li>**Кривая всегда находится внутри [выпуклой оболочки](http://ru.wikipedia.org/wiki/%D0%92%D1%8B%D0%BF%D1%83%D0%BA%D0%BB%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BE%D0%BB%D0%BE%D1%87%D0%BA%D0%B0), образованной опорными точками:** <li>**Кривая всегда находится внутри [выпуклой оболочки](http://ru.wikipedia.org/wiki/%D0%92%D1%8B%D0%BF%D1%83%D0%BA%D0%BB%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BE%D0%BB%D0%BE%D1%87%D0%BA%D0%B0), образованной опорными точками:**
<img src="bezier4-e.png"> <img src="bezier3-e.png"> <img src="bezier4-e.svg"> <img src="bezier3-e.svg">
Благодаря последнему свойству в компьютерной графике можно оптимизировать проверку пересечений двух кривых. Если их выпуклые оболочки не пересекаются, то и кривые тоже не пересекутся. Благодаря последнему свойству в компьютерной графике можно оптимизировать проверку пересечений двух кривых. Если их выпуклые оболочки не пересекаются, то и кривые тоже не пересекутся.
</li> </li>
@ -53,7 +52,7 @@
Вот некоторые примеры: Вот некоторые примеры:
<img src="car.jpg"> <img src="letter_m.png"> <img src="vase.png"> <img src="bezier-car.svg"> <img src="bezier-letter.svg"> <img src="bezier-vase.svg">
## Математика ## Математика
@ -122,8 +121,8 @@
<table> <table>
<tr><td>При `t=0.25`</td><td>При `t=0.5`</td></tr> <tr><td>При `t=0.25`</td><td>При `t=0.5`</td></tr>
<tr> <tr>
<td><img src="bezier3-draw1.png"></td> <td><img src="bezier3-draw1.svg"></td>
<td><img src="bezier3-draw2.png"></td> <td><img src="bezier3-draw2.svg"></td>
</tr> </tr>
</table> </table>
@ -136,7 +135,8 @@
По мере того как `t` пробегает последовательность от `0` до `1`, каждое значение `t` добавляет к кривой точку. **Совокупность таких точек для всех значений `t` образуют кривую Безье.** По мере того как `t` пробегает последовательность от `0` до `1`, каждое значение `t` добавляет к кривой точку. **Совокупность таких точек для всех значений `t` образуют кривую Безье.**
</li> </li>
</ol> </ol>
**Это был процесс для построения по трём точкам. Но то же самое происходит и с четырьмя точками.**
Это был процесс для построения по трём точкам. Но то же самое происходит и с четырьмя точками.
Демо для четырёх точек (точки можно двигать): Демо для четырёх точек (точки можно двигать):
@ -173,15 +173,18 @@
Аналогичным образом могут быть построены кривые Безье и более высокого порядка: по пяти точкам, шести и так далее. Но обычно используются 2-3 точки, а для сложных линий несколько кривых соединяются. Это гораздо проще с точки зрения поддержки и расчётов. Аналогичным образом могут быть построены кривые Безье и более высокого порядка: по пяти точкам, шести и так далее. Но обычно используются 2-3 точки, а для сложных линий несколько кривых соединяются. Это гораздо проще с точки зрения поддержки и расчётов.
[smart header="Как провести кривую Безье через нужные точки?"] [smart header="Как провести кривую Безье через нужные точки?"]
Кривые Безье обычно проводятся через "опорные" точки, которые, как можно видеть из примеров выше, редко лежат на кривой. Кривые Безье обычно проводятся при помощи "опорных" точек, из которых, как можно видеть из примеров выше, только первая и последняя лежат на кривой.
Если нужно провести кривую именно через нужные точки, то это уже другая задача. Она называется [интерполяцией](http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BF%D0%BE%D0%BB%D1%8F%D1%86%D0%B8%D1%8F). Существуют математические формулы, которые подбирают коэффициенты кривой по точкам, исходя из требований, например [многочлен Лагранжа](http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BF%D0%BE%D0%BB%D1%8F%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D1%8B%D0%B9_%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE%D1%87%D0%BB%D0%B5%D0%BD_%D0%9B%D0%B0%D0%B3%D1%80%D0%B0%D0%BD%D0%B6%D0%B0). Если нужно провести кривую именно *через* нужные точки, то это уже другая задача, она называется [интерполяцией](http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BF%D0%BE%D0%BB%D1%8F%D1%86%D0%B8%D1%8F). Существуют математические формулы, которые подбирают коэффициенты кривой по точкам, исходя из требований, например [многочлен Лагранжа](http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BF%D0%BE%D0%BB%D1%8F%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D1%8B%D0%B9_%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE%D1%87%D0%BB%D0%B5%D0%BD_%D0%9B%D0%B0%D0%B3%D1%80%D0%B0%D0%BD%D0%B6%D0%B0).
Как правило, в компьютерной графике для интерполяции используют кубические кривые, соединённых гладким образом. Вместе они выглядят как одна кривая. Это называется [интерполяция сплайнами](http://ru.wikipedia.org/wiki/%D0%9A%D1%83%D0%B1%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D1%81%D0%BF%D0%BB%D0%B0%D0%B9%D0%BD). Как правило, в компьютерной графике для интерполяции используют кубические кривые, соединённых гладким образом. Вместе они выглядят как одна кривая. Это называется [интерполяция сплайнами](http://ru.wikipedia.org/wiki/%D0%9A%D1%83%D0%B1%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D1%81%D0%BF%D0%BB%D0%B0%D0%B9%D0%BD).
[/smart] [/smart]
## Итого ## Итого
Кривые Безье задаются опорными точками. Мы рассмотрели два определения кривых: Кривые Безье задаются опорными точками.
Мы рассмотрели два определения кривых:
<ol> <ol>
<li>Через математическую формулу.</li> <li>Через математическую формулу.</li>
<li>Через процесс построения де Кастельжо.</li> <li>Через процесс построения де Кастельжо.</li>
@ -197,6 +200,6 @@
<ul> <ul>
<li>В компьютерной графике, моделировании, в графических редакторах. Шрифты описываются с помощью кривых Безье.</li> <li>В компьютерной графике, моделировании, в графических редакторах. Шрифты описываются с помощью кривых Безье.</li>
<li>В веб-разработке -- для графики на Canvas или в формате SVG. Кстати, все живые примеры выше написаны на SVG. Фактически, это один SVG-документ, к которому точки передаются параметрами. Вы можете открыть его в отдельном окне и посмотреть исходник: <a href="/files/tutorial/browser/animation/bezier/demo.svg?p=0,0,1,0.5,0,0.5,1,1&animate=1">demo.svg</a>.</li> <li>В веб-разработке -- для графики на Canvas или в формате SVG. Кстати, все живые примеры выше написаны на SVG. Фактически, это один SVG-документ, к которому точки передаются параметрами. Вы можете открыть его в отдельном окне и посмотреть исходник: [demo.svg](demo.svg?p=0,0,1,0.5,0,0.5,1,1&animate=1).</li>
<li>В CSS-анимации, для задания траектории и скорости передвижения.</li> <li>В CSS-анимации, для задания траектории или скорости передвижения.</li>
</ul> </ul>

32
5-animation/1-bezier/bezier-car.svg Normal file
View file

@ -0,0 +1,32 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="260px" height="130px" viewBox="0 0 260 130" 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">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>bezier-car.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="bezier-car.svg" sketch:type="MSArtboardGroup" stroke="#000000">
<g id="car" sketch:type="MSLayerGroup" transform="translate(20.000000, 12.000000)">
<path d="M3.5483871,89.7419355 C-8.27956989,60.9784946 15.3763441,43.7204301 74.516129,37.9677419 C80.4301075,26.4623656 83.3870968,14.9569892 83.3870968,3.4516129 C183.924731,-8.05376344 228.27957,20.7096774 216.451613,89.7419355 L3.5483871,89.7419355 Z" id="Shape" stroke-width="2" fill="#C0C0C0" sketch:type="MSShapeGroup"></path>
<g id="crvpnt-link" transform="translate(0.000000, 86.290323)" fill="#D3D3D3" sketch:type="MSShapeGroup">
<ellipse id="crvpnt" cx="3.5483871" cy="3.4516129" rx="3.5483871" ry="3.4516129"></ellipse>
</g>
<g id="crvpnt-link" transform="translate(70.967742, 34.516129)" fill="#D3D3D3" sketch:type="MSShapeGroup">
<ellipse id="crvpnt" cx="3.5483871" cy="3.4516129" rx="3.5483871" ry="3.4516129"></ellipse>
</g>
<g id="crvpnt-link" transform="translate(79.838710, 0.000000)" fill="#D3D3D3" sketch:type="MSShapeGroup">
<ellipse id="crvpnt" cx="3.5483871" cy="3.4516129" rx="3.5483871" ry="3.4516129"></ellipse>
</g>
<g id="crvpnt-link" transform="translate(212.903226, 86.290323)" fill="#D3D3D3" sketch:type="MSShapeGroup">
<ellipse id="crvpnt" cx="3.5483871" cy="3.4516129" rx="3.5483871" ry="3.4516129"></ellipse>
</g>
<g id="wheel-link" transform="translate(39.032258, 72.483871)" stroke-width="5" fill="#D3D3D3" sketch:type="MSShapeGroup">
<ellipse id="wheel" cx="17.7419355" cy="17.2580645" rx="17.7419355" ry="17.2580645"></ellipse>
</g>
<g id="wheel-link" transform="translate(154.354839, 72.483871)" stroke-width="5" fill="#D3D3D3" sketch:type="MSShapeGroup">
<ellipse id="wheel" cx="17.7419355" cy="17.2580645" rx="17.7419355" ry="17.2580645"></ellipse>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB

50
5-animation/1-bezier/bezier-letter.svg Normal file
View file

@ -0,0 +1,50 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="166px" height="173px" viewBox="0 0 166 173" 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">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>bezier-letter.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="bezier-letter.svg" sketch:type="MSArtboardGroup">
<g id="blue-zones" sketch:type="MSLayerGroup" transform="translate(13.000000, 3.000000)">
<g id="g10" transform="translate(74.667210, 82.907153) scale(1, -1) translate(-74.667210, -82.907153) translate(0.167210, 0.907153)" sketch:type="MSShapeGroup">
<g id="g12" transform="translate(0.082789, 0.014893)">
<g id="g14" transform="translate(0.000000, 0.000000)">
<g id="g24" transform="translate(0.000000, 0.778344)">
<path d="M94.1950078,31.5813173 C95.4706172,17.7726644 104.08103,3.27358276 119.069517,3.27358276 C125.766502,3.27358276 145.219636,8.10661506 145.219636,36.0691123 L145.219636,55.4012263 L137.247042,55.4012263 L137.247042,36.0691123 C137.247042,16.0465847 129.274434,13.975283 125.766502,13.975283 C115.242661,13.975283 113.967052,29.5100156 113.967052,31.2360953 L113.967052,100.279314 C113.967052,114.778396 113.967052,128.241826 102.486511,141.014828 C90.0492563,154.478259 74.1040547,160.001705 58.7966719,160.001705 C32.6465531,160.001705 10.6421719,143.776559 10.6421719,120.992285 C10.6421719,110.635807 17.0202609,104.767124 25.31175,104.767124 C34.2410719,104.767124 39.9813422,111.671458 39.9813422,120.647079 C39.9813422,124.789667 38.3868234,136.181796 23.7172453,136.527018 C32.3276438,148.609576 47.9539359,152.406957 58.1588672,152.406957 C73.7851594,152.406957 91.9626844,138.943527 91.9626844,108.219283 L91.9626844,95.4462967 C75.6985734,94.4106459 53.3752969,93.374995 33.2843578,83.0185168 C9.3665625,71.2811657 1.39396875,53.3299246 1.39396875,38.1404141 C1.39396875,10.1779168 32.3276437,1.54750305 52.4185969,1.54750305 C73.46625,1.54750305 88.1358281,15.3561407 94.1950078,31.5813173 L94.1950078,31.5813173 Z" id="path30" fill="#B3B3B3"></path>
<path d="M91.9626844,88.1967559 L91.9626844,53.6751466 C91.9626844,20.879617 69.0016031,9.14226592 54.6509203,9.14226592 C39.0246281,9.14226592 25.9495688,21.2248238 25.9495688,38.4856361 C25.9495688,57.4725281 39.3435375,86.1254542 91.9626844,88.1967559 L91.9626844,88.1967559 Z" id="path32" fill="#FFFFFF"></path>
<path d="M93.0700078,30.3634803 L95.3200078,30.3634803 L95.3200078,32.7991391 L93.0700078,32.7991391 L93.0700078,30.3634803 L93.0700078,30.3634803 Z" id="path34" fill="#000000"></path>
<path d="M117.944503,2.05576097 L120.194517,2.05576097 L120.194517,4.49141976 L117.944503,4.49141976 L117.944503,2.05576097 L117.944503,2.05576097 Z" id="path36" fill="#000000"></path>
<path d="M144.094636,34.8512906 L146.344636,34.8512906 L146.344636,37.2869493 L144.094636,37.2869493 L144.094636,34.8512906 L144.094636,34.8512906 Z" id="path38" fill="#000000"></path>
<path d="M144.094636,54.1833893 L146.344636,54.1833893 L146.344636,56.6190481 L144.094636,56.6190481 L144.094636,54.1833893 L144.094636,54.1833893 Z" id="path40" fill="#000000"></path>
<path d="M136.122028,54.1833893 L138.372042,54.1833893 L138.372042,56.6190481 L136.122028,56.6190481 L136.122028,54.1833893 L136.122028,54.1833893 Z" id="path42" fill="#000000"></path>
<path d="M136.122028,34.8512906 L138.372042,34.8512906 L138.372042,37.2869493 L136.122028,37.2869493 L136.122028,34.8512906 L136.122028,34.8512906 Z" id="path44" fill="#000000"></path>
<path d="M124.641487,12.7574612 L126.891502,12.7574612 L126.891502,15.1931048 L124.641487,15.1931048 L124.641487,12.7574612 L124.641487,12.7574612 Z" id="path46" fill="#000000"></path>
<path d="M112.842052,30.0182583 L115.092052,30.0182583 L115.092052,32.453917 L112.842052,32.453917 L112.842052,30.0182583 L112.842052,30.0182583 Z" id="path48" fill="#000000"></path>
<path d="M112.842052,99.061492 L115.092052,99.061492 L115.092052,101.497151 L112.842052,101.497151 L112.842052,99.061492 L112.842052,99.061492 Z" id="path50" fill="#000000"></path>
<path d="M101.361511,139.796991 L103.611511,139.796991 L103.611511,142.23265 L101.361511,142.23265 L101.361511,139.796991 L101.361511,139.796991 Z" id="path52" fill="#000000"></path>
<path d="M57.6716719,158.783883 L59.9216719,158.783883 L59.9216719,161.219527 L57.6716719,161.219527 L57.6716719,158.783883 L57.6716719,158.783883 Z" id="path54" fill="#000000"></path>
<path d="M9.51717187,119.774464 L11.7671859,119.774464 L11.7671859,122.210107 L9.51717187,122.210107 L9.51717187,119.774464 L9.51717187,119.774464 Z" id="path56" fill="#000000"></path>
<path d="M24.18675,103.549302 L26.4367641,103.549302 L26.4367641,105.984961 L24.18675,105.984961 L24.18675,103.549302 L24.18675,103.549302 Z" id="path58" fill="#000000"></path>
<path d="M38.8563281,119.429242 L41.1063422,119.429242 L41.1063422,121.8649 L38.8563281,121.8649 L38.8563281,119.429242 L38.8563281,119.429242 Z" id="path60" fill="#000000"></path>
<path d="M22.5922312,135.309181 L24.8422453,135.309181 L24.8422453,137.74484 L22.5922312,137.74484 L22.5922312,135.309181 L22.5922312,135.309181 Z" id="path62" fill="#000000"></path>
<path d="M57.0338531,151.189136 L59.2838672,151.189136 L59.2838672,153.624779 L57.0338531,153.624779 L57.0338531,151.189136 L57.0338531,151.189136 Z" id="path64" fill="#000000"></path>
<path d="M90.8376703,107.001462 L93.0876844,107.001462 L93.0876844,109.437121 L90.8376703,109.437121 L90.8376703,107.001462 L90.8376703,107.001462 Z" id="path66" fill="#000000"></path>
<path d="M90.8376703,94.228475 L93.0876844,94.228475 L93.0876844,96.6641185 L90.8376703,96.6641185 L90.8376703,94.228475 L90.8376703,94.228475 Z" id="path68" fill="#000000"></path>
<path d="M32.1593438,81.8006798 L34.4093578,81.8006798 L34.4093578,84.2363386 L32.1593438,84.2363386 L32.1593438,81.8006798 L32.1593438,81.8006798 Z" id="path70" fill="#000000"></path>
<path d="M0.26896875,36.9225923 L2.51896875,36.9225923 L2.51896875,39.3582358 L0.26896875,39.3582358 L0.26896875,36.9225923 L0.26896875,36.9225923 Z" id="path72" fill="#000000"></path>
<path d="M51.2935828,0.329681271 L53.5435969,0.329681271 L53.5435969,2.76534006 L51.2935828,2.76534006 L51.2935828,0.329681271 L51.2935828,0.329681271 Z" id="path74" fill="#000000"></path>
<path d="M93.0700078,30.3634803 L95.3200078,30.3634803 L95.3200078,32.7991391 L93.0700078,32.7991391 L93.0700078,30.3634803 L93.0700078,30.3634803 Z" id="path76" fill="#000000"></path>
<path d="M90.8376703,86.9789341 L93.0876844,86.9789341 L93.0876844,89.4145777 L90.8376703,89.4145777 L90.8376703,86.9789341 L90.8376703,86.9789341 Z" id="path78" fill="#000000"></path>
<path d="M90.8376703,52.4573096 L93.0876844,52.4573096 L93.0876844,54.8929684 L90.8376703,54.8929684 L90.8376703,52.4573096 L90.8376703,52.4573096 Z" id="path80" fill="#000000"></path>
<path d="M53.5259062,7.92442892 L55.7759203,7.92442892 L55.7759203,10.3600877 L53.5259062,10.3600877 L53.5259062,7.92442892 L53.5259062,7.92442892 Z" id="path82" fill="#000000"></path>
<path d="M24.8245688,37.2677991 L27.0745688,37.2677991 L27.0745688,39.7034579 L24.8245688,39.7034579 L24.8245688,37.2677991 L24.8245688,37.2677991 Z" id="path84" fill="#000000"></path>
<path d="M90.8376703,86.9789341 L93.0876844,86.9789341 L93.0876844,89.4145777 L90.8376703,89.4145777 L90.8376703,86.9789341 L90.8376703,86.9789341 Z" id="path86" fill="#000000"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 8.6 KiB

49
5-animation/1-bezier/bezier-vase.svg Normal file
View file

@ -0,0 +1,49 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="110px" height="170px" viewBox="0 0 110 170" 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">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>bezier-vase.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="bezier-vase.svg" sketch:type="MSArtboardGroup">
<g id="figure4-15" sketch:type="MSLayerGroup" transform="translate(5.000000, 1.000000)">
<path d="M32.0099502,161.208955 C12.5074627,121.606965 12.5074627,82.0049751 32.0099502,42.4029851 C38.5107794,29.2023217 38.5107794,16.0016584 32.0099502,2.80099502 L71.0149254,2.80099502 C64.5140962,16.0016584 64.5140962,29.2023217 71.0149254,42.4029851 C90.5174129,82.0049751 90.5174129,121.606965 71.0149254,161.208955 L32.0099502,161.208955 Z" id="Shape" stroke="#A0522D" stroke-width="2" sketch:type="MSShapeGroup"></path>
<path d="M32.0099502,2.80099502 L41.761194,22.60199 L2.75621891,101.80597 L32.0099502,161.208955" id="Shape" stroke="#000000" stroke-width="0.5" stroke-dasharray="2" sketch:type="MSShapeGroup"></path>
<path d="M71.0149254,2.80099502 L61.2636816,22.60199 L100.268657,101.80597 L71.0149254,161.208955" id="Shape" stroke="#000000" stroke-width="0.5" stroke-dasharray="2" sketch:type="MSShapeGroup"></path>
<g id="dot-link" transform="translate(49.562189, 0.820896)" stroke="#000000" fill="#FFFFFF" sketch:type="MSShapeGroup">
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
</g>
<g id="dot-link" transform="translate(30.059701, 0.820896)" stroke="#000000" fill="#FFFFFF" sketch:type="MSShapeGroup">
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
</g>
<g id="dot-link" transform="translate(39.810945, 20.621891)" stroke="#000000" fill="#FFFFFF" sketch:type="MSShapeGroup">
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
</g>
<g id="dot-link" transform="translate(30.059701, 40.422886)" stroke="#000000" fill="#FFFFFF" sketch:type="MSShapeGroup">
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
</g>
<g id="dot-link" transform="translate(0.805970, 99.825871)" stroke="#000000" fill="#FFFFFF" sketch:type="MSShapeGroup">
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
</g>
<g id="dot-link" transform="translate(30.059701, 159.228856)" stroke="#000000" fill="#FFFFFF" sketch:type="MSShapeGroup">
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
</g>
<g id="dot-link" transform="translate(69.064677, 0.820896)" stroke="#000000" fill="#FFFFFF" sketch:type="MSShapeGroup">
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
</g>
<g id="dot-link" transform="translate(59.313433, 20.621891)" stroke="#000000" fill="#FFFFFF" sketch:type="MSShapeGroup">
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
</g>
<g id="dot-link" transform="translate(69.064677, 40.422886)" stroke="#000000" fill="#FFFFFF" sketch:type="MSShapeGroup">
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
</g>
<g id="dot-link" transform="translate(98.318408, 99.825871)" stroke="#000000" fill="#FFFFFF" sketch:type="MSShapeGroup">
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
</g>
<g id="dot-link" transform="translate(69.064677, 159.228856)" stroke="#000000" fill="#FFFFFF" sketch:type="MSShapeGroup">
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
5-animation/1-bezier/bezier2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 596 B

20
5-animation/1-bezier/bezier2.svg Normal file
View file

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" 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">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>bezier2.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="bezier2.svg" sketch:type="MSArtboardGroup">
<path d="M24.1700721,143.347957 L124.314002,43.5051082" id="Path-6" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="24" cy="144" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="124" cy="44" r="4"></circle>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="120.100962" y="65">2</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
5-animation/1-bezier/bezier3-draw1.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.1 KiB

37
5-animation/1-bezier/bezier3-draw1.svg Normal file
View file

@ -0,0 +1,37 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="340px" height="350px" viewBox="0 0 340 350" 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">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>bezier3-draw1.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="bezier3-draw1.svg" sketch:type="MSArtboardGroup">
<path d="M37.2817473,314.327897 L171.238321,46.8198382 L306.203643,315.314199" id="Path-8" stroke="#E8C48E" sketch:type="MSShapeGroup"></path>
<path d="M37.7384781,314.327897 C136.049771,116.766237 225.925337,156.466387 305.894562,315.818178" id="Path-7" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="37" cy="316" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="33" y="337">1</tspan>
</text>
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="306" cy="316" r="4"></circle>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="302" y="337">3</tspan>
</text>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="171" cy="47" r="4"></circle>
<circle id="Oval-4" fill="#CB1E31" sketch:type="MSShapeGroup" cx="104" cy="215" r="4"></circle>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="167" y="39">2</tspan>
</text>
<text id="0.25" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="100" y="238">0.25</tspan>
</text>
<text id="t-=-0.25" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="12.5" y="254.848633">t = 0.25</tspan>
</text>
<text id="0.25" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<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>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 7 KiB

BIN
5-animation/1-bezier/bezier3-draw2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 5.6 KiB

38
5-animation/1-bezier/bezier3-draw2.svg Normal file
View file

@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="340px" height="350px" viewBox="0 0 340 350" 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">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>bezier3-draw2.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="bezier3-draw2.svg" sketch:type="MSArtboardGroup">
<g id="Group" sketch:type="MSLayerGroup" transform="translate(33.000000, 24.000000)">
<path d="M4.28174735,290.327897 L138.238321,22.8198382 L273.203643,291.314199" id="Path-8" stroke="#E8C48E" sketch:type="MSShapeGroup"></path>
<path d="M4.73847812,290.327897 C103.049771,92.7662372 192.925337,132.466387 272.894562,291.818178" id="Path-7" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="4" cy="292" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="0" y="313">1</tspan>
</text>
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="273" cy="292" r="4"></circle>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="269" y="313">3</tspan>
</text>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="138" cy="23" r="4"></circle>
<circle id="Oval-4" fill="#CB1E31" sketch:type="MSShapeGroup" cx="138" cy="157" r="4"></circle>
<path d="M71.5,157 L205,157" id="Line" stroke="#62C0DC" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="134" y="15">2</tspan>
</text>
<text id="0.5" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="128" y="181">0.5</tspan>
</text>
<text id="t-=-0.5" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="17.5" y="163">t = 0.5</tspan>
</text>
<text id="0.5" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="216" y="163">0.5</tspan>
</text>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
5-animation/1-bezier/bezier3-e.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.1 KiB

25
5-animation/1-bezier/bezier3-e.svg Normal file
View file

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" 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">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>bezier3-e.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="bezier3-e.svg" sketch:type="MSArtboardGroup">
<polygon id="Triangle-1" stroke="#E8C48E" sketch:type="MSShapeGroup" points="74.5 43 125 144 24 144 "></polygon>
<path d="M24.2788462,143.124399 C74.499953,42.9398992 114.209434,125.40565 124.100962,143.645433" id="Path-4" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="24" cy="144" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="124" cy="144" r="4"></circle>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="120" y="165">3</tspan>
</text>
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="74" cy="44" r="4"></circle>
<text id="-4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="70.1899038" y="36">3</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

BIN
5-animation/1-bezier/bezier3.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.3 KiB

24
5-animation/1-bezier/bezier3.svg Normal file
View file

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" 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">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>bezier3.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="bezier3.svg" sketch:type="MSArtboardGroup">
<path d="M24.2788462,143.124399 C74.499953,42.9398992 114.209434,125.40565 124.100962,143.645433" id="Path-4" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="24" cy="144" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="124" cy="144" r="4"></circle>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="120" y="165">3</tspan>
</text>
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="74" cy="44" r="4"></circle>
<text id="-4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="70.1899038" y="36">3</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
5-animation/1-bezier/bezier4-e.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.9 KiB

29
5-animation/1-bezier/bezier4-e.svg Normal file
View file

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" 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">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>bezier4-e.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="bezier4-e.svg" sketch:type="MSArtboardGroup">
<path d="M72.8229507,144 L23.0033514,144 L73.7058523,43 L123.525452,43 L72.8229507,144 Z" id="Rectangle-1" stroke="#E8C48E" sketch:type="MSShapeGroup"></path>
<path d="M23.6882043,143.904835 C73.7030381,143.904854 74.3912999,43.4905636 124.154864,43.4905689" id="Path-1" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="24" cy="144" r="4"></circle>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="124" cy="43" r="4"></circle>
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="73" cy="43" r="4"></circle>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="73" cy="143" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="69" y="165">2</tspan>
</text>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="69" y="35">3</tspan>
</text>
<text id="4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="121" y="35">4</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
5-animation/1-bezier/bezier4.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.3 KiB

28
5-animation/1-bezier/bezier4.svg Normal file
View file

@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" 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">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>bezier4.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="bezier4.svg" sketch:type="MSArtboardGroup">
<path d="M23.6882043,143.904835 C73.7030381,143.904854 74.3912999,43.4905636 124.154864,43.4905689" id="Path-1" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="24" cy="144" r="4"></circle>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="124" cy="43" r="4"></circle>
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="73" cy="43" r="4"></circle>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="73" cy="143" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="69" y="165">2</tspan>
</text>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="69" y="35">3</tspan>
</text>
<text id="4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="121" y="35">4</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
5-animation/1-bezier/car.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.3 KiB

BIN
5-animation/1-bezier/letter_m.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 5.3 KiB

BIN
5-animation/1-bezier/pause.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

BIN
5-animation/1-bezier/vase.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.9 KiB

34
5-animation/2-css-transitions/1-animate-logo-css/solution.md
View file

@ -1,28 +1,16 @@
# Алгоритм
Анимируйте одновременно свойства `left/top` и `width/height`.
Чтобы в процессе анимации таблица сохраняла геометрию -- создайте на месте `IMG` временный `DIV` фиксированного размера и переместите `IMG` внутрь него. После анимации можно вернуть как было.
Для начала анимации - добавьте класс изображению:
CSS-код для анимации одновременно `width` и `height`:
```css ```css
.growing { /* исходный класс */
/* все свойства анимируются 3 секунды */ #flyjet {
-webkit-transition: all 3s; transition: all 3s;
-moz-transition: all 3s; }
-o-transition: all 3s;
-ms-transition: all 3s; /* JS добавляет .growing *.
#flyjet.growing {
width: 400px;
height: 240px;
} }
``` ```
При этом, чтобы анимация началась, может понадобиться отложить установку класса и новых свойств через `setTimeout(.., 0)`. Небольшая тонкость с окончанием анимации. Соответствующее событие `transitionend` сработает два раза -- по одному для каждого свойства. Поэтому, если не предпринять дополнительных шагов, сообщение из обработчика может быть выведено 2 раза.
Для отлова конца анимации используйте событие `on<browser>TransitionEnd`. Оно сработает несколько раз, для каждого свойства, поэтому чтобы обработчик не вывел "OK" много раз -- можно обрабатывать окончание только при одном `event.propertyName`.
# Похожая задача
Аналогичная задача, решённая средствами JS: [](/task/animate-logo).
# Решение
[edit src="solution" task/]

94
5-animation/2-css-transitions/1-animate-logo-css/solution.view/index.html
View file

@ -2,38 +2,15 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<style>img { display: block; cursor: pointer; }</style> <style>img { cursor: pointer; }</style>
<style> <style>
/** #flyjet {
* до анимации: .flyjet width: 40px;
* в начале анимации .flyjet .growing-init height: 24px;
* в процессе анимации .flyjet .growing-init .growing transition: all 3s;
* в конце анимации .flyjet
*/
.flyjet {
width: 400px;
height: 240px;
} }
.growing-init { #flyjet.growing {
position: absolute;
height: 0;
width: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
/* все свойства анимируются 3 секунды */
-webkit-transition: all 3s;
-moz-transition: all 3s;
-o-transition: all 3s;
-ms-transition: all 3s;
}
.growing {
width: 400px; width: 400px;
height: 240px; height: 240px;
} }
@ -41,62 +18,21 @@
</head> </head>
<body> <body>
Кликните картинку для анимации. Расположение элементов при анимации не должно меняться! <img id="flyjet" src="https://js.cx/clipart/flyjet.jpg">
<table>
<tr>
<td>Догнать</td>
<td><img onclick="growIn(this)" src="https://js.cx/clipart/flyjet.jpg" class="flyjet">
</td>
<td>..и перегнать!</td>
</tr>
</table>
<b>В процессе анимации повторные клики на изображение игнорировать.</b>
<script> <script>
function growIn(img) { flyjet.onclick = function() {
if (img.classList.contains('growing-init')) return;
console.log("growIn!");
var height = img.offsetHeight; var ended = false;
var width = img.offsetWidth;
// переместить изображение в placeholder постоянного размера flyjet.addEventListener('transitionend', function() {
var placeholder = document.createElement('div'); if (!ended) {
placeholder.style.position = 'relative'; ended = true;
placeholder.style.width = width + 'px'; alert('Готово!');
placeholder.style.height = height + 'px';
img.parentNode.replaceChild(placeholder, img);
placeholder.appendChild(img);
img.classList.add('growing-init');
// откладываем на следующий фрейм, чтобы началась анимация
// иначе изменение свойств IMG не будет замечено
requestAnimationFrame(function() {
// Firefox иногда не стартует анимацию,
// если не отложить classList.add ещё на один кадр (tested: FF30-)
requestAnimationFrame(function() {
img.classList.add('growing');
img.addEventListener('transitionend', done);
});
});
function done(e) {
// сработать только первый раз
img.removeEventListener('transitionend', done);
placeholder.parentNode.replaceChild(img, placeholder);
img.classList.remove('growing');
img.classList.remove('growing-init');
alert('ok');
} }
});
flyjet.classList.add('growing');
} }
</script> </script>

92
5-animation/2-css-transitions/1-animate-logo-css/source.view/animate.js
View file

@ -1,92 +0,0 @@
/**
Docs: http://learn.javascript.ru/tutorial/lib
*/
function animate(opts) {
var start = new Date;
var delta = opts.delta || linear;
var timer = setInterval(function() {
var progress = (new Date - start) / opts.duration;
if (progress > 1) progress = 1;
opts.step( delta(progress) );
if (progress == 1) {
clearInterval(timer);
opts.complete && opts.complete();
}
}, opts.delay || 13);
return timer;
}
/**
Анимация стиля opts.prop у элемента opts.elem
от opts.from до opts.to продолжительностью opts.duration
в конце opts.complete
Например: animateProp({ elem: ..., prop: 'height', start:0, end: 100, duration: 1000 })
*/
function animateProp(opts) {
var start = opts.start, end = opts.end, prop = opts.prop;
opts.step = function(delta) {
var value = Math.round(start + (end - start)*delta);
opts.elem.style[prop] = value + 'px';
}
return animate(opts);
}
// ------------------ Delta ------------------
function elastic(progress) {
return Math.pow(2, 10 * (progress-1)) * Math.cos(20*Math.PI*1.5/3*progress);
}
function linear(progress) {
return progress;
}
function quad(progress) {
return Math.pow(progress, 2);
}
function quint(progress) {
return Math.pow(progress, 5);
}
function circ(progress) {
return 1 - Math.sin(Math.acos(progress));
}
function back(progress) {
return Math.pow(progress, 2) * ((1.5 + 1) * progress - 1.5);
}
function bounce(progress) {
for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
if (progress >= (7 - 4 * a) / 11) {
return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
}
}
}
function makeEaseInOut(delta) {
return function(progress) {
if (progress < .5)
return delta(2*progress) / 2;
else
return (2 - delta(2*(1-progress))) / 2;
}
}
function makeEaseOut(delta) {
return function(progress) {
return 1 - delta(1 - progress);
}
}

29
5-animation/2-css-transitions/1-animate-logo-css/source.view/index.html
View file

@ -2,30 +2,19 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<script src="animate.js"></script> <style>img { cursor: pointer; }</style>
<style>img { display: block; cursor: pointer; }</style> <style>
#flyjet {
width: 40px; /* -> 400px */
height: 24px; /* -> 240px */
}
</style>
</head> </head>
<body> <body>
Кликните картинку для анимации. Расположение элементов при анимации не должно меняться! <img id="flyjet" src="https://js.cx/clipart/flyjet.jpg">
<table>
<tr>
<td>Догнать</td>
<td><img onclick="growIn(this)" src="https://js.cx/clipart/flyjet.jpg" width="400" height="240">
</td>
<td>..и перегнать!</td>
</tr>
</table>
<b>В процессе анимации повторные нажатия на изображение игнорируются.</b>
<script>
function growIn(img) {
/* ваш код */
}
</script>
</body> </body>
</html> </html>

12
5-animation/2-css-transitions/1-animate-logo-css/task.md
View file

@ -1,12 +1,16 @@
# Анимировать лого (CSS) # Анимировать самолёт (CSS)
[importance 5] [importance 5]
Реализуйте анимацию, как в демке ниже (клик на картинку): Реализуйте анимацию, как в демке ниже (клик на картинку):
[iframe src="solution" height=350]
Продолжительность анимации: 3 секунды. [iframe src="solution" height=300]
Для анимации использовать CSS, по окончании вывести "ок". <ul>
<li>Изображение растёт при клике с 40x24px до 400x240px .</li>
<li>Продолжительность анимации: 3 секунды.</li>
<li>По окончании вывести "Готово!".</li>
<li>Если в процессе анимации были дополнительные клики -- они не должны ничего "сломать".</li>
</ul>

31
5-animation/2-css-transitions/2-animate-logo-bezier-css/bezier-up.svg Normal file
View file

@ -0,0 +1,31 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" 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">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>bezier-up</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="bezier-up" sketch:type="MSArtboardGroup">
<path d="M12.5,60.5 L135.5,60.5" id="Line-3" stroke="#979797" stroke-linecap="square" stroke-dasharray="3,2,3,3" opacity="0.7" sketch:type="MSShapeGroup"></path>
<path d="M24.5,160.5 L49.5,13.5" id="Line" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M124.5,60.5 L99.5,9.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M23.6666667,160.666667 C48.6666667,10.6666667 98.6666667,10.6666667 123.666667,60.6666667" id="bezier-path" stroke="#CB1E00" stroke-width="2" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="24" cy="161" r="4"></circle>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="124" cy="60" r="4"></circle>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="49" cy="11" r="4"></circle>
<circle id="Oval-5" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="99" cy="11" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="20" y="182">1</tspan>
</text>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="33" y="16">2</tspan>
</text>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="106" y="16">3</tspan>
</text>
<text id="4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="127" y="52">4</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB

7
5-animation/2-css-transitions/2-animate-logo-bezier-css/solution.md Normal file
View file

@ -0,0 +1,7 @@
Для такой анимации необходимо подобрать правильную кривую Безье.
Чтобы она выпрыгивала вверх, обе опорные точки можно вынести по `y>1`, например: `cubic-bezier(0.25, 1.5, 0.75, 1.5)` (промежуточные опорные точки имеют `y=1.5`).
Её график:
<img src="bezier-up.svg">

32
5-animation/2-css-transitions/2-animate-logo-bezier-css/solution.view/index.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>img { display: block; cursor: pointer; }</style>
<style>
#flyjet {
width: 40px;
height: 24px;
transition: all 3s cubic-bezier(0.25, 1.5, 0.75, 1.5);
}
#flyjet.growing {
width: 400px;
height: 240px;
}
</style>
</head>
<body>
<img id="flyjet" src="https://js.cx/clipart/flyjet.jpg">
<script>
flyjet.onclick = function() {
flyjet.classList.add('growing');
}
</script>
</body>
</html>

10
5-animation/2-css-transitions/2-animate-logo-bezier-css/task.md Normal file
View file

@ -0,0 +1,10 @@
# Анимировать самолёт с перелётом (CSS)
[importance 5]
Модифицируйте решение предыдущей задачи [](/task/animate-logo-css), чтобы в процессе анимации изображение выросло больше своего стандартного размера 400x240px ("выпрыгнуло"), а затем вернулось к нему.
Должно получиться как здесь (клик на картинку)
[iframe src="solution" height=350]
В качестве исходного документа возьмите решение предыдущей задачи.

455
5-animation/2-css-transitions/article.md
View file

@ -1,120 +1,213 @@
# CSS-transitions # CSS-анимации
Все современные браузеры, кроме IE9- поддерживают <a href="http://www.w3.org/TR/css3-transitions/">CSS transitions</a>, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript. Все современные браузеры, кроме IE9- поддерживают <a href="http://www.w3.org/TR/css3-transitions/">CSS transitions</a> и <a href="http://www.w3.org/TR/css3-animations/">CSS animations</a>, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.
Однако, как мы увидим далее, для более тонкого контроля анимации JavaScript вовсе не будет лишним.
[cut] [cut]
## Анимация свойства [#css-transition] ## CSS transitions [#css-transition]
Идея проста. Вы указываете, что некоторое свойство будет анимироваться при помощи специальных CSS-правил. Далее, при изменении этого свойства, браузер сам обработает анимацию. Идея проста. Мы указываем, что некоторое свойство будет анимироваться при помощи специальных CSS-правил. Далее, при изменении этого свойства, браузер сам обработает анимацию.
Например, CSS, представленный ниже, 2 секунды анимирует свойство `background-color`. Например, CSS, представленный ниже, 3 секунды анимирует свойство `background-color`.
```css ```css
.animated { .animated {
transition-property: background-color; transition-property: background-color;
transition-duration: 2s; transition-duration: 3s;
} }
``` ```
Теперь любое изменение фонового цвета будет анимироваться в течение 2-х секунд. Теперь любое изменение фонового цвета будет анимироваться в течение 3х секунд.
У свойства `"transition"` есть и короткая запись: При клике на эту кнопку происходит анимация её фона:
```css
.animated {
transition: background-color 2s;
}
```
## Полный синтаксис
Свойства для CSS-анимаций:
<dl>
<dt>`transition-property`</dt>
<dd>Список свойств, которые будут анимироваться. Анимировать можно не все свойства, но [многие](http://www.w3.org/TR/css3-transitions/#animatable-properties-). Значение `all` означает "анимировать все свойства".</dd>
<dt>`transition-duration`</dt>
<dd>Продолжительность анимации. Если указано одно значение -- оно применится ко всем свойствам, можно указать несколько значений для разных `transition-property`.</dd>
<dt>`transition-timing-function`</dt>
<dd>Кривая Безье по 4-м точкам, используемая в качестве временной функциии. Их мы изучим [чуть позже](/bezier)</dd>
<dt>`transition-delay`</dt>
<dd>Указывает задержку от изменения свойства до начала CSS-анимации.</dd>
</dl>
Свойство **`transition`** может содержать их все, в порядке: `property duration timing-function delay, ...`.
## Пример
Анимируем одновременно цвет и размер шрифта:
```html ```html
<!--+ run --> <!--+ run autorun height=60 -->
<button id="color">Кликни меня</button>
<style> <style>
.growing { #color {
transition: font-size 3s, color 2s; transition-property: background-color;
transition-duration: 3s;
} }
</style> </style>
<button class="growing" onclick="this.style.fontSize='36px';this.style.color='red'">Кликни меня</button>
<script>
color.onclick = function() {
this.style.backgroundColor = 'red';
}
</script>
``` ```
## Временнáя функция Есть всего 5 свойств, задающих анимацию:
<ul>
<li>`transition-property`</li>
<li>`transition-duration`</li>
<li>`transition-timing-function`</li>
<li>`transition-delay`</li>
</ul>
В качестве временной функции можно выбрать любую [кривую Безье](/bezier), удовлетворяющую условиям: Далее мы изучим их все, пока лишь заметим, что общее свойство `transition` может перечислять их все, в порядке: `property duration timing-function delay`, а также задавать анимацию нескольких свойств сразу.
Например, при клике на эту кнопку анимируются одновременно цвет и размер шрифта:
```html
<!--+ run height=80 autorun -->
<button id="growing">Кликни меня</button>
<style>
#growing {
*!*
transition: font-size 3s, color 2s;
*/!*
}
</style>
<script>
growing.onclick = function() {
this.style.fontSize='36px';
this.style.color='red';
}
</script>
```
Далее мы рассмотрим свойства анимации по отдельности.
## transition-property
Список свойств, которые будут анимироваться, например: `left`, `margin-left`, `height`, `color`.
Анимировать можно не все свойства, но [многие](http://www.w3.org/TR/css3-transitions/#animatable-properties-). Значение `all` означает "анимировать все свойства".
## transition-duration
Продолжительность анимации, задаётся в формате [CSS time](http://www.w3.org/TR/css3-values/#time), то есть в секундах `s` или `ms`.
## transition-delay
Задержка до анимации. Например, если `transition-delay: 1s`, то анимация начнётся через 1 секунду после смены свойства.
Возможны отрицательные значения, при этом анимация начнётся с середины.
Например, вот анимация цифр от `0` до `9`:
[codetabs src="digits"]
Она осуществляется сменой `margin-left` у элемента с цифрами, примерно так:
```css
#stripe.animate {
margin-left: -174px;
transition-property: margin-left;
transition-duration: 9s;
}
```
В примере выше JavaScript просто добавляет элементу класс -- и анимация стартует:
```js
digit.classList.add('animate');
```
Можно стартовать её "с середины", с нужной цифры, например соответствующей текущей секунде, при помощи отрицательного `transition-delay`.
В примере ниже при клике на цифру она начнёт двигаться с текущей секунды:
[codetabs src="digits-negative-delay"]
В JavaScript это делается дополнительной строкой:
```js
stripe.onclick = function() {
var sec = new Date().getSeconds() % 10;
*!*
// например, значение -3s начнёт анимацию с 3й секунды
stripe.style.transitionDelay = '-' + sec + 's';
*/!*
stripe.classList.add('animate');
};
```
## transition-timing-function
Временнáя функция, которая задаёт, как процесс анимации будет распределён во времени, например начнётся ли анимация медленно, чтобы потом ускориться или наоборот.
Самое сложное, но при небольшом изучении -- вполне очевидное свойство.
У него есть два основных вида значения: кривая Безье и по шагам. Начнём с первого.
### Кривая Безье
В качестве временной функции можно выбрать любую [кривую Безье](/bezier) с 4 опорными точками, удовлетворяющую условиям:
<ol> <ol>
<li>Начальная точка `(0,0)`.</li> <li>Начальная точка `(0,0)`.</li>
<li>Конечная точка `(1,1)`.</li> <li>Конечная точка `(1,1)`.</li>
<li>Для промежуточных точек значения `x` должны быть в интервале `0..1`.</li> <li>Для промежуточных точек значения `x` должны быть в интервале `0..1`, `y` -- любыми.</li>
</ol> </ol>
Синтаксис для задания кривой Безье в CSS: `cubic-bezier(x2, y2, x3, y3)`. В нём указываются координаты второй и третьей точек, так как первая и последняя фиксированы. Синтаксис для задания кривой Безье в CSS: `cubic-bezier(x2, y2, x3, y3)`. В нём указываются координаты только двух точек: второй и третьей, так как первая и последняя фиксированы.
Например, торможение можно описать кривой Безье: `cubic-bezier(0.0, 0.5, 0.5 ,1.0)`. Она указывает, как быстро развивается процесс анимации во времени.
<ul>i>
<li>По оси `x` идёт время: `0` -- начальный момент, `1` -- конец времени `transition-duration`.</li>
<li>По оси `y` -- завершённость процесса: `0` -- начальное значение анимируемого свойства, `1` -- конечное.
Самый простой вариант -- это когда процесс развивается равномерно, "линейно" по времени. Это можно задать кривой Безье `cubic-bezier(0, 0, 1, 1)`.
График этой "кривой" таков:
<img src="bezier-linear.svg">
...Как видно, это просто прямая. По мере того, как проходит время `x`, завершённость анимации `y` равномерно приближается от `0` к `1`.
Поезд в примере ниже с постоянной скоростью "едет" слева направо, используя такую временную функцию:
[codetabs src="train-linear"]
CSS для анимации:
```css
.train {
left: 0;
transition: left 5s cubic-bezier(0, 0, 1, 1);
/* JavaScript ставит значение left: 450px */
}
```
Как нам показать, что поезд тормозит?
Для этого используем кривую Безье: `cubic-bezier(0.0, 0.5, 0.5 ,1.0)`.
График этой кривой: График этой кривой:
<img src="train-curve.png"> <img src="train-curve.svg">
Как видно, процесс вначале развивается быстро -- кривая резко идёт вверх, а затем всё медленнее, медленнее.
Вы можете увидеть эту временную функцию в действии, кликнув на поезд: Вы можете увидеть эту временную функцию в действии, кликнув на поезд:
```html [codetabs src="train"]
<style>
CSS для анимации:
```css
.train { .train {
position: relative;
left: 0; left: 0;
-moz-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0); transition: left 5s cubic-bezier(0, .5, .5, 1);
-webkit-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0); /* JavaScript ставит значение left: 450px */
-ms-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
-o-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
} }
</style>
<img class="train" width="177" height="160" src="/files/tutorial/browser/animation/train.gif" onclick="this.style.left='450px'">
``` ```
<style> Существует несколько стандартных обозначений кривых: `linear`, `ease`, `ease-in`, `ease-out` и `ease-in-out`.
.train {
position: relative;
cursor: pointer;
left: 0;
-moz-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
-webkit-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
-ms-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
-o-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
}
</style>
<img class="train" width="177" height="160" src="/files/tutorial/browser/animation/train.gif" onclick="this.style.left='450px'">
Значение `linear` -- это прямая, мы её уже видели.
Существуют и несколько стандартных кривых: `linear`, `ease`, `ease-in`, `ease-out` и `ease-in-out`. Остальные кривые являются короткой записью следующих `cubic-bezier`:
Значение `linear` -- это прямая, равномерное изменение. Оно используется по умолчанию.
Остальные кривые являются короткой записью следующих `cubic-bezier`. В таблице ниже показано соответствие:
<table> <table>
<tr> <tr>
<th>`ease`</th> <th>`ease`<sup>*</sup></th>
<th>`ease-in`</th> <th>`ease-in`</th>
<th>`ease-out`</th> <th>`ease-out`</th>
<th>`ease-in-out`</th> <th>`ease-in-out`</th>
@ -126,71 +219,147 @@
<td>`(0.42, 0, 0.58, 1.0)`</td> <td>`(0.42, 0, 0.58, 1.0)`</td>
</tr> </tr>
<tr> <tr>
<td><img src="ease.png"></td> <td><img src="ease.svg"></td>
<td><img src="ease-in.png"></td> <td><img src="ease-in.svg"></td>
<td><img src="ease-out.png"></td> <td><img src="ease-out.svg"></td>
<td><img src="ease-in-out.png"></td> <td><img src="ease-in-out.svg"></td>
</tr> </tr>
</table> </table>
Наиболее близкий стандартный вариант для примера с поездом -- `ease-out`: * - По умолчанию, если никакой временной функции не указано, -- используется `ease`.
Значени
**Кривая Безье может заставить анимацию "выпрыгивать" за пределы диапазона.**
Допустимо указывать для кривой Безье как отрицательные `y`, так и сколь угодно большие. При этом кривая Безье будет также по `y` выскакивать за пределы диапазона `0..1`, представляющего собой начало-конец значения.
В примере ниже CSS-код анимации таков:
```css ```css
.train { .train {
-moz-transition: left 5s ease-out; left: 100px;
... transition: left 5s cubic-bezier(.5, -1, .5, 2);
/* JavaScript поменяет left на 400px */
} }
``` ```
## CSS-преобразования Свойство `left` должно меняться от `100px` до `400px`.
Браузеры, которые поддерживают CSS-анимацию, поддерживают и [CSS-преобразования](https://developer.mozilla.org/en/CSS/Using_CSS_transforms). Однако, если кликнуть на поезд, то мы увидим, что:
<ul>
<li>Он едет сначала назад, то есть `left` становится меньше `100px`.</li>
<li>Затем вперёд, причём выезжает за назначенные `400px`.</li>
<li>А затем опять назад -- до `400px`.</li>
</ul>
С их помощью можно сделать много красивых эффектов. Например, вращение: [codetabs src="train-over"]
```js Почему так происходит -- отлично видно, если взглянуть на кривую Безье с указанными опорными точками:
//+ run
document.body.style.MozTransition = "all 5s"; <img src="bezier-train-over.svg">
document.body.style.MozTransform = "rotate(360deg)";
document.body.style.WebkitTransition = "all 5s";
document.body.style.WebkitTransform = "rotate(360deg)";
document.body.style.OTransition = "all 5s";
document.body.style.OTransform = "rotate(360deg)";
document.body.style.MsTransition = "all 5s";
document.body.style.MsTransform = "rotate(360deg)";
document.body.style.Transition = "all 5s"; Мы вынесли координату `y` для второй опорной точки на 1 ниже нуля, а для третьей опорной точки -- на 1 выше единицы, поэтому и кривая вышла за границы "обычного" квадрата. Её значения по `y` вышли из стандартного диапазона `0..1`.
document.body.style.Transform = "rotate(360deg)";
Как мы помним, значению `y = 0` соответствует "нулевое" положение анимации, а `y = 1` -- конечное. Получается, что значения `y<0` двинули поезд назад, меньше исходного `left`, а значения `y>1` -- больше итогового `left`.
Это, конечно, "мягкий" вариант. Если поставить значения `y` порядка `-99`, `99`, то поезд будет куда более сильно выпрыгивать за диапазон.
Итак, кривая Безье позволяет задавать "плавное"" течение анимации. Подобрать кривую Безье вручную можно на сайте [](http://cubic-bezier.com/).
### Шаги steps
Временная функция `steps(количество шагов[, start/end])` позволяет разбить анимацию на чёткое количество шагов.
Проще всего это увидеть на примере. Выше мы видели плавную анимацию цифр от `0` до `9` при помощи смены `margin-left` у элемента, содержащего `0123456789`.
Чтобы цифры сдвигались не плавно, а шли чётко и раздельно, одна за другой -- мы разобьём анимацию на 9 шагов:
```css
#stripe.animate {
margin-left: -174px;
transition: margin-left 9s *!*steps(9, start)*/!*;
}
``` ```
Самое замечательное -- все эти эффекты используют графический ускоритель и почти не нагружают процессор. В действии `step(9, start)`:
Все браузеры, кроме IE9- поддерживают это, ну а в IE может быть что-то через JavaScript или вообще без анимации. [codetabs src="step"]
Первый аргумент `steps` -- количество шагов, то есть изменение `margin-left` разделить на 9 частей, получается примерно по `19px`. На то же количество частей делится и временной интервал, то есть по `1s`.
`start` -- означает, что при начале анимации нужно сразу применить первое изменение. Это проявляется тем, что при нажатии на цифру она меняется на `1` (первое изменение `margin-left`) мгновенно, а затем в начале каждой следующей секунды.
То есть, процесс развивается так:
<ul>
<li>`0s` -- `-19px` (первое изменение в начале 1й секунды, сразу при нажатии)</li>
<li>`1s` -- `-38px`</li>
<li>...</li>
<li>`8s` -- `-174px`</li>
<li>(на протяжении последней секунды видно окончательное значение).</li>
</ul>
Альтернативное значение `end` означало бы, что изменения нужно применять не в начале, а в конце каждой секунды, то есть так:
<ul>
<li>`0s` -- `0`</li>
<li>`1s` -- `-19px` (первое изменение в конце 1й секунды)</li>
<li>`2s` -- `-38px`</li>
<li>...</li>
<li>`9s` -- `-174px`</li>
</ul>
В действии `step(9, end)`:
[codetabs src="step-end"]
Также есть сокращённые значения:
<ul>
<li>`step-start` -- то же, что `steps(1, start)`, то есть завершить анимацию в 1 шаг сразу.</li>
<li>`step-end` -- то же, что `steps(1, end)`, то есть завершить анимацию в 1 шаг по истечении `transition-duration`.</li>
</ul>
Такие значения востребованы редко, так как это даже и не анимация почти, но тоже бывают полезны.
## Событие transitionend ## Событие transitionend
На конец CSS-анимации можно повесить обработчик. Его стандартное имя: `transitionend`, но браузерные префиксы требуются и тут. На конец CSS-анимации можно повесить обработчик на событие `transitionend`.
Кликните на лодочку: Это широко используется, чтобы после анимации сделать какое-то действие или объединить несколько анимаций в одну.
Например, лодочка в примере ниже при клике начинает плавать туда-обратно, с каждым разом уплывая всё дальше вправо:
[iframe src="boat" height=300 edit link] [iframe src="boat" height=300 edit link]
Её анимация осуществляется функцией `go`, которая перезапускается по окончании (с переворотом через CSS). Её анимация осуществляется функцией `go`, которая перезапускается по окончании, с переворотом через CSS:
```js ```js
... boat.onclick = function() {
//...
var times = 1;
function go() {
if (times % 2) {
// плывём вправо
boat.classList.remove('back');
boat.style.marginLeft = 100 * times + 200 + 'px';
} else {
// плывём влево
boat.classList.add('back');
boat.style.marginLeft = 100 * times - 200 + 'px';
}
}
go(); go();
elem.addEventListener('transitionend', go); /* на будущее */ boat.addEventListener('transitionend', function() {
elem.addEventListener('webkitTransitionEnd', go); times++;
elem.addEventListener('mozTransitionEnd', go); go();
elem.addEventListener('oTransitionEnd', go); });
elem.addEventListener('msTransitionEnd', go); };
...
``` ```
Объект события `transitionend` также содержит свойства: Объект события `transitionend` содержит специфические свойства:
<dl> <dl>
<dt>`propertyName`</dt> <dt>`propertyName`</dt>
<dd>Свойство, анимация которого завершилась.</dd> <dd>Свойство, анимация которого завершилась.</dd>
@ -200,17 +369,69 @@ document.body.style.Transform = "rotate(360deg)";
Свойство `propertyName` может быть полезно при одновременной анимации нескольких свойств. Каждое свойство даст своё событие, и можно решить, что с ним делать дальше. Свойство `propertyName` может быть полезно при одновременной анимации нескольких свойств. Каждое свойство даст своё событие, и можно решить, что с ним делать дальше.
## Ограничения и достоинства CSS-анимаций
## CSS animations
Более сложные анимации делаются объединением простых при помощи CSS-правила `@keyframes`.
В нём задаётся "имя" анимации и правила: что, откуда и куда анимировать. Затем при помощи свойства `animation: имя параметры` эта анимация подключается к элементу, задаётся время анимации и дополнительные параметры, как её применять.
Например:
```html
<!--+ run height=60 -->
<div class="progress"></div>
<style>
/* Chrome, Opera, Safari */
@-webkit-keyframes MY-ANIMATION-NAME {
from { left:0px; }
to { left:300px; }
}
/* Other browsers, except IE9- */
@keyframes MY-ANIMATION-NAME {
from { left:0px; }
to { left:300px; }
}
.progress {
position: relative;
animation: MY-ANIMATION-NAME 3s infinite alternate;
-webkit-animation: MY-ANIMATION-NAME 3s infinite alternate;
border: 2px solid green;
width: 50px;
height: 20px;
background: lime;
}
</style>
```
Этот стандарт пока в черновике, поэтому в Chrome, Safari, Opera нужен префикс `-webkit`.
Статей про CSS animations достаточно много, посмотрите, например:
<ul>
<li>[](http://css.yoksel.ru/css-animation/).</li>
</ul>
## Итого
CSS-анимации позволяют плавно или не очень менять одно или несколько свойств.
Альтернатива им -- плавное изменение значений свойств через JavaScript, мы рассмотрим подробности далее.
Ограничения и достоинства CSS-анимаций по сравнению с JavaScript:
[compare] [compare]
-Основное ограничение -- это то, что временная функция может быть задана только кривой Безье. Более сложные анимации, состоящие из нескольких кривых, реализуются при помощи [CSS animations](http://dev.w3.org/csswg/css3-animations/#animation-name-property) (стандарт пока не готов). -Временная функция может быть задана кривой Безье или через шаги. Более сложные анимации, состоящие из нескольких кривых, реализуются их комбинацией при помощи [CSS animations](http://www.w3.org/TR/css3-animations/), но JavaScript-функции всегда гибче.
-CSS-анимации касаются только свойств, а в JavaScript можно делать всё, что угодно. -CSS-анимации касаются только свойств, а в JavaScript можно делать всё, что угодно, удалять элементы, создавать новые.
-Отсутствует поддержка в IE9- -Отсутствует поддержка в IE9-
+Простые вещи делаются просто. Особенно удобно, если от отсутствия эффекта в IE проблем не возникнет. +Простые вещи делаются просто.
+Гораздо "легче" для процессора, чем анимации JavaScript. Лучше используется графический ускоритель. Это очень важно для мобильных устройств. +"Легче" для процессора, чем анимации JavaScript, лучше используется графический ускоритель. Это очень важно для мобильных устройств.
[/compare] [/compare]
[head] Подавляющее большинство анимаций делается через CSS.
<link type="text/css" rel="stylesheet" href="/files/tutorial/browser/animation/animate.css" />
<script src="/files/tutorial/browser/animation/step.js"></script> При этом JavaScript запускает их начало -- как правило, добавлением класса, в котором задано новое свойство, и может отследить окончание через событие `transitionend`.
[/head]

20
5-animation/2-css-transitions/bezier-linear.svg Normal file
View file

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" 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">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>bezier2.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="bezier2.svg" sketch:type="MSArtboardGroup">
<path d="M24.1700721,143.347957 L124.314002,43.5051082" id="Path-6" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="24" cy="144" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="124" cy="44" r="4"></circle>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="120.100962" y="65">2</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

45
5-animation/2-css-transitions/bezier-train-over.svg Normal file
View file

@ -0,0 +1,45 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="225px" height="331px" viewBox="0 0 225 331" 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">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>bezier-train-over.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="bezier-train-over.svg" sketch:type="MSArtboardGroup">
<g id="Group" sketch:type="MSLayerGroup" transform="translate(0.000000, 76.000000)">
<rect id="Rectangle-233" stroke="#979797" stroke-dasharray="3,2,3,2" sketch:type="MSShapeGroup" x="34" y="13" width="150" height="150"></rect>
<text id="(1,1)" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="bold" fill="#838383">
<tspan x="189" y="9">(1,1)</tspan>
</text>
<text id="(0,0)" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="bold" fill="#838383">
<tspan x="0" y="155">(0,0)</tspan>
</text>
<text id="(0,1)" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="bold" fill="#838383">
<tspan x="0" y="9">(0,1)</tspan>
</text>
<text id="(1,0)" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="bold" fill="#838383">
<tspan x="189" y="155">(1,0)</tspan>
</text>
</g>
<path d="M34.5,239.5 L107.5,312.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M34,239 C109,314 109,14 184,89" id="bezier-path" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="34" cy="239" r="4"></circle>
<text id="-2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="30" y="261">1</tspan>
</text>
<circle id="Oval-6" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="109" cy="314" r="4"></circle>
<text id="-3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="92" y="320">2</tspan>
</text>
<path d="M110.5,15.5 L183.5,88.5" id="Line" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<circle id="Oval-5" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="184" cy="89" r="4"></circle>
<text id="-5" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="188" y="107">4</tspan>
</text>
<circle id="Oval-7" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="109" cy="14" r="4"></circle>
<text id="-4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="92" y="21">3</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.5 KiB

50
5-animation/2-css-transitions/boat.view/index.html
View file

@ -2,56 +2,36 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<style> <link rel="stylesheet" href="style.css">
.bouncing-boat {
margin-left: 0;
cursor: pointer;
-webkit-transition: margin-left 3s ease-in-out;
-moz-transition: margin-left 3s ease-in-out;
-o-transition: margin-left 3s ease-in-out;
-ms-transition: margin-left 3s ease-in-out;
}
/* переворот картинки через CSS */
.flip-horizontal {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-ms-transform: scaleX(-1);
filter: fliph; /* IE9- */
}
</style>
</head> </head>
<body> <body>
<img src="https://js.cx/clipart/boat.png" class="bouncing-boat" onclick="bounceBoat(this)"> <img src="https://js.cx/clipart/boat.png" id="boat">
<script> <script>
function bounceBoat(elem) { boat.onclick = function() {
elem.onclick = null; // следующий клик не испортит анимацию this.onclick = null; // только первый клик сработает
var times = 1;
function go() { function go() {
var marginLeft = parseInt(elem.style.marginLeft) || 0; if (times % 2) {
boat.classList.remove('back');
if (marginLeft == 0) { boat.style.marginLeft = 100 * times + 200 + 'px';
elem.className = 'bouncing-boat';
} else { } else {
elem.className = 'bouncing-boat flip-horizontal'; boat.classList.add('back');
boat.style.marginLeft = 100 * times - 200 + 'px';
} }
elem.style.marginLeft = (marginLeft ? 0 : 400) + 'px';
} }
go(); go();
elem.addEventListener('transitionend', go); /* на будущее */ boat.addEventListener('transitionend', function() {
elem.addEventListener('webkitTransitionEnd', go); times++;
elem.addEventListener('mozTransitionEnd', go); go();
elem.addEventListener('oTransitionEnd', go); });
elem.addEventListener('msTransitionEnd', go);
} }
</script> </script>

13
5-animation/2-css-transitions/boat.view/style.css Normal file
View file

@ -0,0 +1,13 @@
#boat {
margin-left: 0;
cursor: pointer;
transition: margin-left 3s ease-in-out;
}
/* переворот картинки через CSS */
.back {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: fliph; /* IE9- */
}

13
5-animation/2-css-transitions/digits-negative-delay.view/index.html Normal file
View file

@ -0,0 +1,13 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="digit"><span id="stripe">0123456789</span></div>
<script src="script.js"></script>
</body>
</html>

5
5-animation/2-css-transitions/digits-negative-delay.view/script.js Normal file
View file

@ -0,0 +1,5 @@
stripe.onclick = function() {
var sec = new Date().getSeconds() % 10;
stripe.style.transitionDelay = '-' + sec + 's';
stripe.classList.add('animate');
};

13
5-animation/2-css-transitions/digits-negative-delay.view/style.css Normal file
View file

@ -0,0 +1,13 @@
#digit {
width: .5em;
overflow: hidden;
font: 32px "Courier New", monospace;
}
#stripe.animate {
margin-left: -174px;
transition-property: margin-left;
transition-duration: 9s;
transition-timing-function: linear;
}

13
5-animation/2-css-transitions/digits.view/index.html Normal file
View file

@ -0,0 +1,13 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="digit"><span id="stripe">0123456789</span></div>
<script src="script.js"></script>
</body>
</html>

3
5-animation/2-css-transitions/digits.view/script.js Normal file
View file

@ -0,0 +1,3 @@
stripe.onclick = function() {
stripe.classList.add('animate');
};

13
5-animation/2-css-transitions/digits.view/style.css Normal file
View file

@ -0,0 +1,13 @@
#digit {
width: .5em;
overflow: hidden;
font: 32px "Courier New", monospace;
}
#stripe.animate {
margin-left: -174px;
transition-property: margin-left;
transition-duration: 9s;
transition-timing-function: linear;
}

BIN
5-animation/2-css-transitions/ease-in-out.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.4 KiB

30
5-animation/2-css-transitions/ease-in-out.svg Normal file
View file

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" 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">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>ease-in-out.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="ease-in-out.svg" sketch:type="MSArtboardGroup">
<path d="M23.6882043,143.904835 C66.0081124,143.904815 81.7292657,43.4905742 124.154864,43.4905689" id="Path-1" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<path d="M24.5,143.5 L66.7965736,143.5" id="Line" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M83.5,43.5 L125.796574,43.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="24" cy="144" r="4"></circle>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="124" cy="43" r="4"></circle>
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="82" cy="43" r="4"></circle>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="66" cy="143" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="62" y="165">2</tspan>
</text>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="78" y="35">3</tspan>
</text>
<text id="4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="121" y="35">4</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
5-animation/2-css-transitions/ease-in.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.5 KiB

28
5-animation/2-css-transitions/ease-in.svg Normal file
View file

@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" 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">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>ease-in</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="ease-in" sketch:type="MSArtboardGroup">
<path d="M23.6882043,143.904835 C66.0081124,143.904815 124.154864,43.4905689 124.154864,43.4905689" id="Path-1" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<path d="M24.5,143.5 L66.7965736,143.5" id="Line" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="24" cy="144" r="4"></circle>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="124" cy="43" r="4"></circle>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="66" cy="143" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="62" y="165">2</tspan>
</text>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="114" y="35">3</tspan>
</text>
<text id="4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="127" y="35">4</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
5-animation/2-css-transitions/ease-out.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.5 KiB

28
5-animation/2-css-transitions/ease-out.svg Normal file
View file

@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" 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">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>ease-out</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="ease-out" sketch:type="MSArtboardGroup">
<path d="M23.6882043,143.904835 C23.6882043,143.904835 81.8846154,43.4905689 124.154864,43.4905689" id="Path-1" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<path d="M83.5,43.5 L123.799999,43.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="24" cy="144" r="4"></circle>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="124" cy="43" r="4"></circle>
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="82" cy="43" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="13" y="165">1</tspan>
</text>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="27" y="165">2</tspan>
</text>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="79" y="35">3</tspan>
</text>
<text id="4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="120" y="35">4</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
5-animation/2-css-transitions/ease.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.5 KiB

30
5-animation/2-css-transitions/ease.svg Normal file
View file

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" 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">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>ease</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="ease" sketch:type="MSArtboardGroup">
<path d="M23.6882043,143.904835 C48.7884621,134.014426 48.7884621,43.4905636 124.154864,43.4905689" id="Path-1" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<path d="M24.5,143.5 L48.5,134.5" id="Line" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M50.5,43.5 L123.800003,43.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="24" cy="144" r="4"></circle>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="124" cy="43" r="4"></circle>
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="49" cy="43" r="4"></circle>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="49" cy="134" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="45" y="156">2</tspan>
</text>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="45" y="35">3</tspan>
</text>
<text id="4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="121" y="35">4</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

19
5-animation/2-css-transitions/step-end.view/index.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="digit"><span id="stripe">0123456789</span></div>
<script>
digit.onclick = function() {
stripe.classList.add('animate');
}
</script>
</body>
</html>

13
5-animation/2-css-transitions/step-end.view/style.css Normal file
View file

@ -0,0 +1,13 @@
#digit {
width: .5em;
overflow: hidden;
font: 32px "Courier New", monospace;
}
#stripe.animate {
margin-left: -174px;
transition-property: margin-left;
transition-duration: 9s;
transition-timing-function: steps(9, end);
}

19
5-animation/2-css-transitions/step.view/index.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="digit"><span id="stripe">0123456789</span></div>
<script>
digit.onclick = function() {
stripe.classList.add('animate');
}
</script>
</body>
</html>

13
5-animation/2-css-transitions/step.view/style.css Normal file
View file

@ -0,0 +1,13 @@
#digit {
width: .5em;
overflow: hidden;
font: 32px "Courier New", monospace;
}
#stripe.animate {
margin-left: -174px;
transition-property: margin-left;
transition-duration: 9s;
transition-timing-function: steps(9, start);
}

BIN
5-animation/2-css-transitions/train-curve.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.5 KiB

30
5-animation/2-css-transitions/train-curve.svg Normal file
View file

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" 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">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>train-curve.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="train-curve.svg" sketch:type="MSArtboardGroup">
<path d="M26.1366543,142.907525 C26.1365899,93.4999868 76.5010648,43.244154 126.495114,43.2441555" id="Path-13" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<path d="M25.5,143.5 L25.5,93.3402552" id="Line" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="26" cy="144" r="4"></circle>
<text id="-2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="22" y="165">1</tspan>
</text>
<circle id="Oval-6" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="26" cy="94" r="4"></circle>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="22" y="87">2</tspan>
</text>
<path d="M75.5,43.5 L126.135956,43.5" id="Line" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<circle id="Oval-5" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="126" cy="44" r="4"></circle>
<text id="4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="122" y="36">4</tspan>
</text>
<circle id="Oval-7" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="76" cy="44" r="4"></circle>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="72" y="36">3</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

12
5-animation/2-css-transitions/train-linear.view/index.html Normal file
View file

@ -0,0 +1,12 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<img class="train" src="https://js.cx/clipart/train.gif" onclick="this.style.left='450px'">
</body>
</html>

9
5-animation/2-css-transitions/train-linear.view/style.css Normal file
View file

@ -0,0 +1,9 @@
.train {
position: relative;
cursor: pointer;
width: 177px;
height: 160px;
left: 0;
transition: left 5s cubic-bezier(0, 0, 1, 1);
}

12
5-animation/2-css-transitions/train-over.view/index.html Normal file
View file

@ -0,0 +1,12 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<img class="train" src="https://js.cx/clipart/train.gif" onclick="this.style.left='400px'">
</body>
</html>

9
5-animation/2-css-transitions/train-over.view/style.css Normal file
View file

@ -0,0 +1,9 @@
.train {
position: relative;
cursor: pointer;
width: 177px;
height: 160px;
left: 100px;
transition: left 5s cubic-bezier(.5, -1, .5, 2);
}

12
5-animation/2-css-transitions/train.view/index.html Normal file
View file

@ -0,0 +1,12 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<img class="train" src="https://js.cx/clipart/train.gif" onclick="this.style.left='450px'">
</body>
</html>

9
5-animation/2-css-transitions/train.view/style.css Normal file
View file

@ -0,0 +1,9 @@
.train {
position: relative;
cursor: pointer;
width: 177px;
height: 160px;
left: 0px;
transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
}

19
5-animation/3-js-animation/3-animate-ball/solution.md → 5-animation/3-js-animation/1-animate-ball/solution.md
View file

@ -7,21 +7,14 @@
Следующий код даст нам нужный результат: Следующий код даст нам нужный результат:
```js ```js
var img = document.getElementById('ball'); var to = field.clientHeight - ball.clientHeight;
var field = document.getElementById('field');
img.onclick = function() {
var from = 0;
var to = field.clientHeight - img.clientHeight;
animate({ animate({
delay: 20, duration: 2000,
duration: 1000, timing: makeEaseOut(bounce),
*!* draw: function(progress) {
delta: makeEaseOut(bounce), ball.style.top = to*progress + 'px'
step: function(delta) {
img.style.top = to*delta + 'px'
} }
*/!*
}); });
}
``` ```

50
5-animation/3-js-animation/1-animate-ball/solution.view/index.html Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE HTML>
<html>
<head>
<script src="https://js.cx/libs/animate.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="field">
<img src="https://js.cx/clipart/ball.svg" width="40" height="40" id="ball">
</div>
<script>
function makeEaseOut(timing) {
return function(timeFraction) {
return 1 - timing(1 - timeFraction);
}
}
function bounce(timeFraction) {
for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
if (timeFraction >= (7 - 4 * a) / 11) {
return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
}
}
}
ball.onclick = function() {
var to = field.clientHeight - ball.clientHeight;
animate({
duration: 2000,
timing: makeEaseOut(bounce),
draw: function(progress) {
ball.style.top = to*progress + 'px'
}
});
};
</script>
</body>
</html>

10
5-animation/3-js-animation/1-animate-ball/solution.view/style.css Normal file
View file

@ -0,0 +1,10 @@
#field {
height: 200px;
border-bottom: 3px black groove;
position: relative;
}
#ball {
position: absolute;
cursor: pointer;
}

10
5-animation/3-js-animation/4-animate-ball-hops/source.view/index.html → 5-animation/3-js-animation/1-animate-ball/source.view/index.html
View file

@ -1,13 +1,8 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<script src="animate.js"></script> <script src="https://js.cx/libs/animate.js"></script>
<style> <link rel="stylesheet" href="style.css">
#field {
height: 200px;
border-bottom: 1px solid black;
}
</style>
</head> </head>
<body> <body>
@ -17,6 +12,5 @@
</div> </div>
</body> </body>
</html> </html>

Some files were not shown because too many files have changed in this diff Show more