renovations

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

@@ -1 +1,38 @@
-<svg width="392" height="192" viewBox="0 0 392 192" xmlns="http://www.w3.org/2000/svg"><title>variable-change.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M77 89.196h112.558v42.95c0 .373-.08.862-.28 1.294-.2.433-16.573 35.56-16.573 35.56v-54.36l16.854-25.444L208 61H95.44L77 89.196zM77 118V90l-15 28" id="Shape" fill="#E8C48F"/><path d="M70.91 52.395l54.505 58.45-18.326 17.087-54.506-58.448 18.326-17.09z" stroke="#8A704D" stroke-width="2" fill="#FFF9EB"/><text transform="matrix(.682 .731 -.731 .682 52 52)" font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="10.393" y="46.282">&amp;quot;World!&amp;quot;</tspan></text><path d="M149.937 46.212l75.142-27.345 8.57 23.56-75.14 27.344-8.574-23.557z" stroke="#8A704D" stroke-width="2.002" fill="#FFF9EB"/><text transform="matrix(.94 -.342 .342 .94 102.5 -95.134)" font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="10.393" y="46.282">&amp;quot;Hello!&amp;quot;</tspan></text><path d="M60 120v54.73c0 3.42 1.484 5.27 4.387 5.27h100.086c3.122 0 5.527-2.548 5.527-3.476V120H60z" id="Shape" fill="#E8C48F"/><text font-family="Open Sans" font-size="18" font-weight="526" fill="#fff"><tspan x="77" y="157">Message</tspan></text><path d="M56.836 56.667s-8.13-12.98-14.09-18.693l-1.554 5.345c-10.97-3.19-22.604-3.89-34.04-1.94L9.14 53.01c9.66-1.65 19.49-1.056 28.76 1.638-.52 1.78-1.037 3.562-1.555 5.344 6.116-2.202 20.49-3.327 20.49-3.327m230.788-27.58s-10.052-11.54-16.827-16.245l-.698 5.518c-11.325-1.432-22.917-.306-33.896 3.41 1.26 3.72 2.518 7.443 3.778 11.166 9.276-3.14 19.07-4.09 28.64-2.88l-.7 5.52c5.692-3.13 19.703-6.488 19.703-6.488" fill="#E8C48F"/><path d="M348.983 11h-14.967c-.56 0-1.016.626-1.016 1.395V17h17v-4.605c0-.77-.457-1.395-1.017-1.395z"/><path d="M382.193 14.36h-26.39v-3.275c0-3.356-2.814-6.085-6.275-6.085H334.47c-3.46 0-6.274 2.73-6.274 6.085v3.275h-26.39c-2.1 0-3.806 1.652-3.806 3.69v.26c0 2.038 1.705 3.69 3.807 3.69h80.386c2.102 0 3.807-1.652 3.807-3.69v-.26c0-2.038-1.706-3.69-3.807-3.69zM351 17h-17v-4.605c0-.77.457-1.395 1.016-1.395h14.968c.56 0 1.016.626 1.016 1.395V17zm21.955 8.045h-66.91c-3.89 0-7.045-.68-7.045 3.266l5.282 78.384c0 3.943 3.155 7.307 7.045 7.307h56.347c3.89 0 7.044-3.363 7.044-7.306L380 28.31c0-3.946-3.155-3.265-7.045-3.265zM324.757 104c-1.283.038-2.353-.8-2.396-1.88L320 41.027c-.04-1.078.965-1.985 2.243-2.025 1.283-.04 2.353.802 2.396 1.88l2.36 61.096c.04 1.076-.965 1.984-2.244 2.023zM341 102.05c0 1.076-.672 1.95-1.5 1.95s-1.5-.876-1.5-1.95v-61.1c0-1.077.672-1.95 1.5-1.95s1.5.873 1.5 1.95v61.1zm18.64.07c-.043 1.08-1.114 1.918-2.397 1.88-1.28-.04-2.283-.948-2.242-2.025l2.36-61.095c.044-1.078 1.114-1.92 2.396-1.88 1.28.043 2.285.948 2.244 2.026l-2.36 61.095z" fill="#E8C48F"/></g></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="392px" height="192px" viewBox="0 0 392 192" 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>variable-change.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="variable-change.svg" sketch:type="MSArtboardGroup">
+            <g id="noun_1211_cc" sketch:type="MSLayerGroup" transform="translate(52.000000, -5.000000)">
+                <path d="M25,94.1960457 L137.557785,94.1960457 L137.557785,137.145664 C137.557785,137.518573 137.479295,138.008386 137.279367,138.440486 C137.07944,138.872587 120.704625,174 120.704625,174 L120.704625,119.63967 L137.559266,94.1960457 L156,66 L43.4407339,66 L25,94.1960457 L25,94.1960457 Z" 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)">
+                    <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" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
+                        <tspan x="10.392998" y="46.2823729">"World!"</tspan>
+                    </text>
+                </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)">
+                    <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" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
+                        <tspan x="10.392998" y="46.2823729">"Hello!"</tspan>
+                    </text>
+                </g>
+                <path d="M8,125 L8,179.729971 C8,183.150501 9.4836395,185 12.387122,185 L112.473443,185 C115.59502,185 118,182.4521 118,181.524372 L118,125 L8,125 L8,125 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
+            </g>
+            <text id="Message" sketch:type="MSTextLayer" font-family="Open Sans" font-size="18" font-weight="526" fill="#FFFFFF">
+                <tspan x="77" y="157">Message</tspan>
+            </text>
+            <path d="M58.1116321,51.8083441 C58.1116321,51.8083441 47.657459,40.6232618 40.718887,36.1553077 C40.5505125,38.0030849 40.3826205,39.8498971 40.2142461,41.6967094 C28.8419738,40.6618577 17.2921606,42.1936311 6.44527455,46.2920298 C7.83472576,49.9697335 9.22417698,53.6469547 10.6136282,57.324176 C19.7782168,53.8616442 29.5366994,52.5677178 39.1451405,53.4419142 C38.9767661,55.2896913 38.8083916,57.1365036 38.6404996,58.9837982 C44.221462,55.6553872 58.1116321,51.8083441 58.1116321,51.8083441" id="Fill-54" fill="#E8C48F" sketch:type="MSShapeGroup" transform="translate(32.278453, 47.569553) rotate(11.000000) translate(-32.278453, -47.569553) "></path>
+            <path d="M287.796688,28.1860236 C287.796688,28.1860236 277.342515,17.0009413 270.403943,12.5329872 C270.235568,14.3807644 270.067676,16.2275766 269.899302,18.0743889 C258.527029,17.0395372 246.977216,18.5713106 236.13033,22.6697093 C237.519781,26.347413 238.909232,30.0246342 240.298684,33.7018555 C249.463272,30.2393237 259.221755,28.9453973 268.830196,29.8195937 C268.661822,31.6673708 268.493447,33.5141831 268.325555,35.3614778 C273.906517,32.0330667 287.796688,28.1860236 287.796688,28.1860236" id="Fill-54" fill="#E8C48F" sketch:type="MSShapeGroup" transform="translate(261.963509, 23.947232) rotate(2.000000) translate(-261.963509, -23.947232) "></path>
+            <g id="noun_48910_cc" sketch:type="MSLayerGroup" transform="translate(298.000000, 5.000000)">
+                <path d="M50.9827143,6 L36.0161055,6 C35.4567164,6 35,6.62621359 35,7.39482201 L35,12 L52,12 L52,7.39482201 C52,6.62621359 51.5432836,6 50.9827143,6 L50.9827143,6 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+                <path d="M84.1925988,9.36030059 L57.803165,9.36030059 L57.803165,6.08482838 C57.803165,2.72879291 54.9894635,0 51.5275421,0 L36.4712707,0 C33.0105365,0 30.1956478,2.72879291 30.1956478,6.08482838 L30.1956478,9.36030059 L3.80740121,9.36030059 C1.70484195,9.36030059 0,11.0118475 0,13.0500982 L0,13.3102024 C0,15.348453 1.70484195,17 3.80740121,17 L84.1925988,17 C86.295158,17 88,15.348453 88,13.3102024 L88,13.0500982 C88,11.0118475 86.2939708,9.36030059 84.1925988,9.36030059 L84.1925988,9.36030059 Z M53,12 L36,12 L36,7.39482201 C36,6.62621359 36.4567164,6 37.0161055,6 L51.9838945,6 C52.5444637,6 53,6.62621359 53,7.39482201 L53,12 L53,12 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
+                <path d="M74.9552359,20.0447289 L8.04358113,20.0447289 C4.15387761,20.0447289 1,19.3642794 1,23.3113665 L6.28209435,101.692668 C6.28209435,105.636155 9.43715496,109 13.3268585,109 L69.6743245,109 C73.564028,109 76.7179057,105.636155 76.7179057,101.692668 L82,23.3113665 C81.998817,19.3642794 78.8449394,20.0447289 74.9552359,20.0447289 L74.9552359,20.0447289 Z M26.7566501,98.9987039 C25.4744903,99.0375373 24.4044574,98.1989795 24.361495,97.1213538 L22.0012467,36.0255616 C21.9596269,34.947936 22.9652161,34.0414198 24.2433483,34.0013729 C25.5255081,33.961326 26.595541,34.8023109 26.6385035,35.8799365 L28.9987517,96.9757287 C29.0403715,98.0521408 28.0361248,98.9598706 26.7566501,98.9987039 L26.7566501,98.9987039 Z M43,97.0485689 C43,98.1255551 42.328125,99 41.5,99 C40.671875,99 40,98.1243423 40,97.0485689 L40,35.9514311 C40,34.8732321 40.671875,34 41.5,34 C42.328125,34 43,34.8732321 43,35.9514311 L43,97.0485689 L43,97.0485689 Z M61.6385051,97.1213889 C61.5968852,98.1989944 60.5255097,99.0375366 59.2433499,98.9987039 C57.9638752,98.9598713 56.9596285,98.0521585 57.0012483,96.974553 L59.3614965,35.8799014 C59.4031164,34.8022959 60.4731493,33.9613267 61.7553091,34.0013729 C63.0347839,34.0426325 64.0403731,34.9479183 63.9987533,36.0255238 L61.6385051,97.1213889 L61.6385051,97.1213889 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -1 +1,27 @@
-<svg width="166" height="145" viewBox="0 0 166 145" xmlns="http://www.w3.org/2000/svg"><title>variable.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M30 40.196h112.558v42.95c0 .373-.08.862-.28 1.294-.2.433-16.573 35.56-16.573 35.56V65.64l16.854-25.444L161 12H48.44L30 40.196zM30 69V41L15 69" fill="#E8C48F"/><path d="M46.91 3.395l54.505 58.45L83.09 78.93 28.584 20.484 46.91 3.394z" stroke="#8A704D" stroke-width="2" fill="#FFF9EB"/><text transform="matrix(.682 .731 -.731 .682 28 3)" font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="10.393" y="46.282">&amp;quot;Hello!&amp;quot;</tspan></text><path d="M13 71v54.73c0 3.42 1.484 5.27 4.387 5.27h100.086c3.122 0 5.527-2.548 5.527-3.476V71H13z" fill="#E8C48F"/><text font-family="Open Sans" font-size="18" font-weight="526" fill="#fff" transform="translate(13 3)"><tspan x="17" y="105">Message</tspan></text></g></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="166px" height="145px" viewBox="0 0 166 145" 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>variable.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="variable.svg" sketch:type="MSArtboardGroup">
+            <g id="noun_1211_cc-+-Message" sketch:type="MSLayerGroup" transform="translate(13.000000, 3.000000)">
+                <g id="noun_1211_cc">
+                    <path d="M17,37.1960457 L129.557785,37.1960457 L129.557785,80.1456641 C129.557785,80.5185728 129.479295,81.0083855 129.279367,81.4404861 C129.07944,81.8725868 112.704625,117 112.704625,117 L112.704625,62.6396695 L129.559266,37.1960457 L148,9 L35.4407339,9 L17,37.1960457 L17,37.1960457 Z" 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)">
+                        <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" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
+                            <tspan x="10.392998" y="46.2823729">"Hello!"</tspan>
+                        </text>
+                    </g>
+                    <path d="M0,68 L0,122.729971 C0,126.150501 1.4836395,128 4.38712201,128 L104.473443,128 C107.59502,128 110,125.4521 110,124.524372 L110,68 L0,68 L0,68 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
+                </g>
+                <text id="Message" sketch:type="MSTextLayer" font-family="Open Sans" font-size="18" font-weight="526" fill="#FFFFFF">
+                    <tspan x="17" y="105">Message</tspan>
+                </text>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -1 +1,65 @@
-<svg width="420" height="279" viewBox="0 0 420 279" xmlns="http://www.w3.org/2000/svg"><title>family-no-family.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><g><path d="M256.5 233.5h-59" id="Line" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path id="Line-decoration-1" d="M197.5 233.5l10.8 3v-6l-10.8 3z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" d="M167 24h120v50H167z"/><text font-family="Consolas" font-size="14" fill="#8A704D"><tspan x="201" y="17">window</tspan></text><text font-family="Consolas" font-size="14" fill="#8A704D"><tspan x="202" y="43">Корень</tspan></text><path stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" d="M186 122h80v28h-80z"/><text font-family="Consolas" font-size="14" fill="#8A704D"><tspan x="203" y="139">Object</tspan></text><path stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" d="M68 190h120v50H68z"/><text font-family="Consolas" font-size="14" fill="#8A704D"><tspan x="103" y="208">Object</tspan></text><text font-family="Consolas" font-size="14" fill="#8A704D"><tspan x="99" y="170">father</tspan></text><text font-family="Consolas" font-size="14" fill="#8A704D"><tspan x="211" y="191">wife</tspan></text><text font-family="Consolas" font-size="12" fill="#8A704D"><tspan x="83" y="228">name: &amp;quot;Василий&amp;quot;</tspan></text><path stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" d="M277 190h120v50H277z"/><text font-family="Consolas" font-size="12" fill="#8A704D"><tspan x="294" y="228">name: &amp;quot;Мария&amp;quot;</tspan></text><text font-family="Consolas" font-size="14" fill="#8A704D"><tspan x="306" y="170">mother</tspan></text><text font-family="Consolas" font-size="14" fill="#8A704D"><tspan x="308" y="208">Object</tspan></text><path d="M178.5 155.5l-46 32" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M132.53 187.48l10.578-3.705-3.426-4.926-7.153 8.63z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M197.5 199.5h61" id="Line" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path id="Line-decoration-1" d="M258.5 199.5l-10.8-3v6l10.8-3z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><text font-family="Consolas" font-size="14" fill="#8A704D"><tspan x="200" y="224">husband</tspan></text><path d="M272.5 155.5l47 32" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M318.79 187.016l-7.24-8.558c-1.18 1.736-2.194 3.224-3.376 4.96 3.715 1.26 6.9 2.34 10.616 3.598z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path stroke="#D0011B" stroke-width="2" d="M47 111h366v152H47z"/><text font-family="Consolas" font-size="14" fill="#8A704D"><tspan x="181" y="66">family: null</tspan></text><g><path d="M25.503 111.75h-5.006c-.187 0-.34.154-.34.342v1.125h5.686v-1.125c0-.188-.152-.34-.34-.34z" id="Shape"/><path d="M36.364 113.217H27.59v-1.125c0-1.154-.936-2.092-2.087-2.092h-5.006c-1.15 0-2.087.938-2.087 2.092v1.125H9.637c-.7 0-1.266.568-1.266 1.27v.088c0 .7.567 1.268 1.267 1.268h26.727c.7 0 1.266-.567 1.266-1.268v-.09c0-.7-.568-1.268-1.266-1.268zm-10.52 0h-5.687v-1.125c0-.188.153-.34.34-.34h5.006c.188 0 .34.152.34.34v1.125zM34.054 116.28H11.727c-1.297 0-2.35-.223-2.35 1.078l1.763 25.838c0 1.3 1.052 2.41 2.35 2.41h18.802c1.298 0 2.35-1.11 2.35-2.41l1.763-25.838c0-1.3-1.053-1.077-2.35-1.077zm-16.417 25.913c-.377.012-.69-.26-.704-.612l-.694-19.916c-.013-.35.282-.647.658-.66.377-.013.692.26.704.613l.694 19.916c.013.35-.283.647-.66.66zm6.044-.63c0 .352-.305.637-.68.637-.378 0-.683-.286-.683-.637v-19.93c0-.35.305-.635.682-.635.375 0 .68.285.68.636v19.93zm5.385.018c-.012.352-.327.626-.704.613-.375-.013-.67-.308-.658-.66l.694-19.916c.012-.352.326-.626.703-.613.376.014.67.31.66.66l-.695 19.917z" fill="#D0021B"/></g></g></g></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="420px" height="279px" viewBox="0 0 420 279" 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>family-no-family.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="family-no-family.svg" sketch:type="MSArtboardGroup">
+            <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-linecap="square" fill="#EE6B47"></path>
+            <rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="167" y="24" width="120" height="50"></rect>
+            <text id="window" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
+                <tspan x="201" y="17">window</tspan>
+            </text>
+            <text id="Корень" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
+                <tspan x="202" y="43">Корень</tspan>
+            </text>
+            <rect id="Rectangle-2" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup" x="186" y="122" width="80" height="28"></rect>
+            <text id="Object" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
+                <tspan x="203" y="139">Object</tspan>
+            </text>
+            <rect id="Rectangle-3" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup" x="68" y="190" width="120" height="50"></rect>
+            <text id="Object-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
+                <tspan x="103" y="208">Object</tspan>
+            </text>
+            <text id="father" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
+                <tspan x="99" y="170">father</tspan>
+            </text>
+            <text id="wife" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
+                <tspan x="211" y="191">wife</tspan>
+            </text>
+            <text id="name:-&quot;Василий&quot;" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" fill="#8A704D">
+                <tspan x="83" y="228">name: "Василий"</tspan>
+            </text>
+            <rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup" x="277" y="190" width="120" height="50"></rect>
+            <text id="name:-&quot;Мария&quot;" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" fill="#8A704D">
+                <tspan x="294" y="228">name: "Мария"</tspan>
+            </text>
+            <text id="mother" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
+                <tspan x="306" y="170">mother</tspan>
+            </text>
+            <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>
+            </text>
+            <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-linecap="square" fill="#EE6B47"></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-linecap="square" fill="#EE6B47"></path>
+            <text id="husband" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
+                <tspan x="200" y="224">husband</tspan>
+            </text>
+            <path d="M272.5,155.5 L319.5,187.5" id="Line" stroke="#EE6B47" stroke-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-linecap="square" fill="#EE6B47"></path>
+            <rect id="Rectangle-5" stroke="#D0011B" stroke-width="2" sketch:type="MSShapeGroup" x="47" y="111" width="366" height="152"></rect>
+            <text id="family:-null" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
+                <tspan x="181" y="66">family: null</tspan>
+            </text>
+            <g id="noun_48910_cc" sketch:type="MSLayerGroup" transform="translate(8.000000, 110.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="M28.3638158,3.21745055 L19.5896053,3.21745055 L19.5896053,2.09156044 C19.5896053,0.937978022 18.6540789,4.4408921e-16 17.5030263,4.4408921e-16 L12.4969737,4.4408921e-16 C11.3463158,4.4408921e-16 10.4103947,0.937978022 10.4103947,2.09156044 L10.4103947,3.21745055 L1.63657895,3.21745055 C0.9375,3.21745055 0.370657895,3.78514286 0.370657895,4.48575824 L0.370657895,4.57516484 C0.370657895,5.27578022 0.9375,5.84347253 1.63657895,5.84347253 L28.3638158,5.84347253 C29.0628947,5.84347253 29.6297368,5.27578022 29.6297368,4.57516484 L29.6297368,4.48575824 C29.6297368,3.78514286 29.0625,3.21745055 28.3638158,3.21745055 L28.3638158,3.21745055 Z M17.8432895,3.21745055 L12.1571053,3.21745055 L12.1571053,2.09156044 C12.1571053,1.90364835 12.3098684,1.75054945 12.4969737,1.75054945 L17.5034211,1.75054945 C17.6909211,1.75054945 17.8432895,1.90364835 17.8432895,2.09156044 L17.8432895,3.21745055 L17.8432895,3.21745055 Z" id="Shape" fill="#D0021B" sketch:type="MSShapeGroup"></path>
+                <path d="M26.0542105,6.28101099 L3.7275,6.28101099 C2.42960526,6.28101099 1.37723684,6.0567033 1.37723684,7.35784615 L3.13973684,33.195956 C3.13973684,34.4959121 4.1925,35.6047912 5.49039474,35.6047912 L24.2921053,35.6047912 C25.59,35.6047912 26.6423684,34.4959121 26.6423684,33.195956 L28.4048684,7.35784615 C28.4044737,6.0567033 27.3521053,6.28101099 26.0542105,6.28101099 L26.0542105,6.28101099 Z M9.63710526,32.1927033 C9.26013158,32.2053626 8.94552632,31.932 8.93289474,31.5807033 L8.23894737,11.664 C8.22671053,11.3127033 8.52236842,11.0171868 8.89815789,11.0041319 C9.27513158,10.9910769 9.58973684,11.2652308 9.60236842,11.6165275 L10.2963158,31.5332308 C10.3085526,31.8841319 10.0132895,32.180044 9.63710526,32.1927033 L9.63710526,32.1927033 Z M15.6809211,31.5632967 C15.6809211,31.9145934 15.3753947,32.1998242 14.9988158,32.1998242 C14.6222368,32.1998242 14.3167105,31.9141978 14.3167105,31.5632967 L14.3167105,11.6343297 C14.3167105,11.2826374 14.6222368,10.9978022 14.9988158,10.9978022 C15.3753947,10.9978022 15.6809211,11.2826374 15.6809211,11.6343297 L15.6809211,31.5632967 L15.6809211,31.5632967 Z M21.0651316,31.5810989 C21.0528947,31.9323956 20.7378947,32.2057582 20.3609211,32.1930989 C19.9847368,32.1804396 19.6894737,31.8845275 19.7017105,31.5332308 L20.3956579,11.6165275 C20.4078947,11.2652308 20.7225,10.9910769 21.0994737,11.0041319 C21.4756579,11.0175824 21.7713158,11.3127033 21.7590789,11.664 L21.0651316,31.5810989 L21.0651316,31.5810989 Z" id="Shape" fill="#D0021B" sketch:type="MSShapeGroup"></path>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -1 +1,41 @@
-<svg width="570" height="183" viewBox="0 0 570 183" xmlns="http://www.w3.org/2000/svg"><title>setinterval-interval.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><g><path d="M10.5 109h550" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"/><path id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#fff" d="M109 88h90v40h-90z"/><text font-family="Consolas" font-size="14" fill="#8A704D"><tspan x="131" y="112">func(1)</tspan></text><path d="M128.582 34.342l-9.67-2.904 7.58-16.164-20.022 20.822L116.193 39l-5.907 15.89 18.296-20.548zm-20.387 1.316l15.107-15.726-5.697 12.11 9.252 2.74L112.9 50.615l4.548-12.22-9.253-2.738z" id="Shape" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M109 142.5v-70" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"/><path id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#fff" d="M252 88h90v40h-90z"/><text font-family="Consolas" font-size="14" fill="#8A704D"><tspan x="274" y="112">func(2)</tspan></text><path d="M271.582 34.342l-9.67-2.904 7.58-16.164-20.022 20.822L259.193 39l-5.907 15.89 18.296-20.548zm-20.387 1.316l15.107-15.726-5.697 12.11 9.252 2.74L255.9 50.615l4.548-12.22-9.253-2.738z" id="Shape" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M252 142.5v-70" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"/><path stroke="#BCA68E" stroke-width="2" fill="#fff" d="M386 88h90v40h-90z"/><text font-family="Consolas" font-size="14" fill="#8A704D"><tspan x="408" y="112">func(3)</tspan></text><path d="M405.582 34.342l-9.67-2.904 7.58-16.164-20.022 20.822L393.193 39l-5.907 15.89 18.296-20.548zm-20.387 1.316l15.107-15.726-5.697 12.11 9.252 2.74L389.9 50.615l4.548-12.22-9.253-2.738z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M386 142.5v-70" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"/><text font-family="Consolas" font-size="18" fill="#8A704D"><tspan x="93" y="170">100</tspan></text><text font-family="Consolas" font-size="18" fill="#8A704D"><tspan x="237" y="170">200</tspan></text><text font-family="Consolas" font-size="18" fill="#8A704D"><tspan x="372" y="170">300</tspan></text><path d="M199.5 109.5h50" stroke="#EE6B47" stroke-width="3" stroke-linecap="square"/><path d="M342.5 109.5h41" stroke="#EE6B47" stroke-width="3" stroke-linecap="square"/></g></g></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="570px" height="183px" viewBox="0 0 570 183" 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>setinterval-interval.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="setinterval-interval.svg" sketch:type="MSArtboardGroup">
+            <path d="M10.5,109 L560.5,109" 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="109" y="88" width="90" height="40"></rect>
+            <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>
+            </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-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>
+            <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">
+                <tspan x="274" y="112">func(2)</tspan>
+            </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-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>
+            <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">
+                <tspan x="408" y="112">func(3)</tspan>
+            </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-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>
+            <text id="100" sketch:type="MSTextLayer" font-family="Consolas" font-size="18" font-weight="normal" fill="#8A704D">
+                <tspan x="93" y="170">100</tspan>
+            </text>
+            <text id="200" sketch:type="MSTextLayer" font-family="Consolas" font-size="18" font-weight="normal" fill="#8A704D">
+                <tspan x="237" y="170">200</tspan>
+            </text>
+            <text id="300" sketch:type="MSTextLayer" font-family="Consolas" font-size="18" font-weight="normal" fill="#8A704D">
+                <tspan x="372" y="170">300</tspan>
+            </text>
+            <path d="M199.5,109.5 L249.5,109.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+            <path d="M342.5,109.5 L383.5,109.5" id="Line-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>

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

@@ -1 +1,48 @@
-<svg width="574" height="204" viewBox="0 0 574 204" xmlns="http://www.w3.org/2000/svg"><title>settimeout-interval.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><g><path d="M11.5 108h550" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"/><path id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#fff" d="M60 87h90v40H60z"/><text font-family="Consolas" font-size="14" fill="#8A704D"><tspan x="82" y="111">func(1)</tspan></text><path d="M79.582 33.342l-9.67-2.904 7.58-16.164L57.47 35.096 67.193 38l-5.907 15.89 18.296-20.548zm-20.387 1.316l15.107-15.726-5.697 12.11 9.252 2.74L63.9 49.615l4.548-12.22-9.253-2.738z" id="Shape" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M60 141.5v-70" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"/><path id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#fff" d="M253 87h90v40h-90z"/><text font-family="Consolas" font-size="14" fill="#8A704D"><tspan x="275" y="111">func(2)</tspan></text><path d="M272.582 33.342l-9.67-2.904 7.58-16.164-20.022 20.822L260.193 38l-5.907 15.89 18.296-20.548zm-20.387 1.316l15.107-15.726-5.697 12.11 9.252 2.74L256.9 49.615l4.548-12.22-9.253-2.738z" id="Shape" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M253 141.5v-70" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"/><path stroke="#BCA68E" stroke-width="2" fill="#fff" d="M446 87h90v40h-90z"/><text font-family="Consolas" font-size="14" fill="#8A704D"><tspan x="468" y="111">func(3)</tspan></text><path d="M465.582 33.342l-9.67-2.904 7.58-16.164-20.022 20.822L453.193 38l-5.907 15.89 18.296-20.548zm-20.387 1.316l15.107-15.726-5.697 12.11 9.252 2.74L449.9 49.615l4.548-12.22-9.253-2.738z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M446 141.5v-70" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"/><path d="M150.5 108.5h100" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square"/><path d="M343.5 108.5h100" stroke="#EE6B47" stroke-width="3" stroke-linecap="square"/><text id="100" font-family="Consolas" font-size="18" fill="#000"><tspan x="187" y="190">100</tspan></text><text font-family="Consolas" font-size="18" fill="#000"><tspan x="380" y="190">100</tspan></text><path d="M150.5 165.5h100" id="Line-3" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M250.5 165.5l-8-5" id="Line-5" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M158.5 170.5l-8-5" id="Line-6" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M242.5 170.5l8-5" id="Line" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M150.5 165.5l8-5" id="Line-4" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M344.5 165.5h100" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M444.5 165.5l-8-5" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M352.5 170.5l-8-5" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M436.5 170.5l8-5" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M344.5 165.5l8-5" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/></g></g></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="574px" height="204px" viewBox="0 0 574 204" 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>settimeout-interval.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="settimeout-interval.svg" sketch:type="MSArtboardGroup">
+            <path d="M11.5,108 L561.5,108" 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="60" y="87" width="90" height="40"></rect>
+            <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>
+            </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-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>
+            <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">
+                <tspan x="275" y="111">func(2)</tspan>
+            </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-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>
+            <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">
+                <tspan x="468" y="111">func(3)</tspan>
+            </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-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="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>
+            <text id="100" sketch:type="MSTextLayer" font-family="Consolas" font-size="18" font-weight="normal" fill="#000000">
+                <tspan x="187" y="190">100</tspan>
+            </text>
+            <text id="100" sketch:type="MSTextLayer" font-family="Consolas" font-size="18" font-weight="normal" fill="#000000">
+                <tspan x="380" y="190">100</tspan>
+            </text>
+            <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-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-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-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-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></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-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-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>
+</svg>

10-regular-expressions-javascript/2-regexp-methods/article.md

@@ -8,7 +8,7 @@
 
 [cut]
 
-## str.search(regexp)  
+## str.search(reg)  
 
 Этот метод мы уже видели. 
 
@@ -25,11 +25,11 @@ alert( str.search( *!*/лю/i*/!* ) ); // 0
 
 Нельзя заставить `search` искать дальше первого совпадения, такой синтаксис попросту не предусмотрен. Но есть другие методы, которые это умеют.
 
-## str.match(regexp) без флага g
+## str.match(reg) без флага g
 
 Метод `str.match` работает по-разному, в зависимости от наличия или отсутствия флага `g`, поэтому сначала мы разберём вариант, когда его нет.
 
-В этом случае `str.match(regexp)` находит только одно, первое совпадение.
+В этом случае `str.match(reg)` находит только одно, первое совпадение.
 
 Результат вызова -- это массив, состоящий из этого совпадения, с дополнительными свойствами `index` -- позиция, на которой оно обнаружено и `input` -- строка, в которой был поиск.
 
@@ -68,7 +68,7 @@ alert( result.input ); // javascript - это такой язык
 
 Позже мы ещё вернёмся к скобочным выражениям, они особенно удобны для поиска с заменой.
 
-## str.match(regexp) с флагом g
+## str.match(reg) с флагом g
 
 При наличии флага `g`, вызов `match` возвращает обычный массив из всех совпадений.
 
@@ -116,7 +116,7 @@ alert( str.match( /лю/gi ).length ) // ошибка! нет свойства l
 ```
 [/warn]
 
-## str.split(regexp|substr, limit)  
+## str.split(reg|substr, limit)  
 
 Разбивает строку в массив по разделителю -- регулярному выражению `regexp` или подстроке `substr`. 
 
@@ -136,7 +136,7 @@ alert( '12-34-56'.split('-') ) // [12, 34, 56]
 alert( '12-34-56'.split(/-/) ) // [12, 34, 56]
 ```
 
-## str.replace(regexp, newStr|function)   
+## str.replace(reg, str|func)   
 
 Швейцарский нож для работы со строками, поиска и замены любого уровня сложности.
 
@@ -158,6 +158,7 @@ alert( '12-34-56'.replace("-", ":") )  // 12:34-56
 alert( '12-34-56'.replace( *!*/-/g*/!*, ":" ) )  // 12:34:56
 ```
 
+
 В строке для замены можно использовать специальные символы:
 
 <table>
@@ -271,7 +272,7 @@ alert( str.replace( /(Василий) (Пупкин)/ , replacer) ) // Пупк
 
 Метод `test` проверяет, есть ли хоть одно совпадение в строке `str`. Возвращает `true/false`.
 
-Работает, по сути, так же, как и проверка `str.search(regexp) != -1`, например:
+Работает, по сути, так же, как и проверка `str.search(reg) != -1`, например:
 
 ```js
 //+ run
@@ -306,7 +307,7 @@ alert( str.search(*!*/javascript/i*/!*) != -1 ) // false
 Он ведёт себя по-разному, в зависимости от того, есть ли у регэкспа флаг `g`.
 
 <ul>
-<li>Если флага `g` нет, то `regexp.exec(str)` ищет и возвращает первое совпадение, является полным аналогом вызова `str.match(regexp)`.</li>
+<li>Если флага `g` нет, то `regexp.exec(str)` ищет и возвращает первое совпадение, является полным аналогом вызова `str.match(reg)`.</li>
 <li>Если флаг `g` есть, то вызов `regexp.exec` возвращает первое совпадение и *запоминает* его позицию в свойстве `regexp.lastIndex`. Последующий поиск он начнёт уже с этой позиции. Если совпадений не найдено, то сбрасывает `regexp.lastIndex` в ноль.</li>
 </ul>
 
@@ -350,36 +351,38 @@ alert( regexp.exec(str).index ); // 49, поиск начат с 40й позиц
 
 Методы становятся гораздо понятнее, если разбить их использование по задачам, которые нужны в реальной жизни.
 
+<dl>
+<dt>Для поиска только одного совпадения:</dt>
+<dd>
 <ul>
-<li>Для поиска только одного совпадения:
+<li>Найти позицию первого совпадения -- `str.search(reg)`.</li>
-<dl>
+<li>Найти само совпадение -- `str.match(reg)`.</li>
-<dt>Найти позицию первого совпадения</dt>
+<li>Проверить, есть ли хоть одно совпадение -- `regexp.test(str)` или `str.search(reg) != -1`.</li>
-<dd>`str.search(regexp)`</dd>
+<li>Найти совпадение с нужной позиции -- `regexp.exec(str)`, начальную позицию поиска задать в `regexp.lastIndex`.</li>
-<dt>Найти само совпадение</dt>
-<dd>`str.match(regexp)`</dd>
-<dt>Проверить, есть ли хоть одно совпадение</dt>
-<dd>`regexp.test(str)`, также можно использовать `str.search(regexp) != -1`</dd>
-<dt>Найти совпадение с нужной позиции</dt>
-<dd>`regexp.exec(str)`, начальную позицию поиска задать в `regexp.lastIndex`</dd>
-</dl>
-</li>
-<li>Для поиска всех совпадений:
-<dl>
-<dt>Найти массив совпадений</dt>
-<dd>`str.match(regexp)`, с флагом `g`</dd>
-<dt>Получить все совпадения, с подробной информацией о каждом</dt>
-<dd>`regexp.exec(str)` с флагом `g`, в цикле</dd>
-</dl>
-</li>
-<li>Дополнительно:
-<dl>
-<dt>Для поиска-и-замены</dt>
-<dd>`str.replace(regexp, str|func)`</dd>
-<dt>Для разбивки строки на части</dt>
-<dd>`str.split(regexp)`</dd>
-</dl>
-</li>
 </ul>
+</dd>
+<dt>Для поиска всех совпадений:</dt>
+<dd>
+<ul>
+<li>Найти массив совпадений -- `str.match(reg)`, с флагом `g`.</li>
+<li>Получить все совпадения, с подробной информацией о каждом -- `regexp.exec(str)` с флагом `g`, в цикле.</li>
+</ul>
+</dd>
+</dt>
+<dt>Для поиска-и-замены:</dt>
+<dd>
+<ul>
+<li>Замена на другую строку или функцией -- `str.replace(reg, str|func)`</li>
+</ul>
+</dd>
+<dt>Для разбивки строки на части:</dt>
+<dd>
+<ul>
+<li>`str.split(str|reg)`</li>
+</ul>
+</dd>
+</dl>
 
-Теперь, зная общие методы, мы можем перейти к более подробному изучению синтаксиса регулярных выражений.
+Зная эти методы, мы уже можем использовать регулярные выражения.
 
+Конечно, для этого желательно хорошо понимать их синтаксис и возможности, так что переходим к ним дальше.

10-regular-expressions-javascript/3-regexp-character-classes/article.md

@@ -1,88 +1,95 @@
-# Символьные классы [todo]
+# Классы и спецсимволы
 
-Рассмотрим задачу -- есть телефонный номер `"+7(903)-123-45-67"`, и нам нужно найти в этой строке цифры, а остальные символы нас не интересуют.
+Рассмотрим практическую задачу -- есть телефонный номер `"+7(903)-123-45-67"`, и нам нужно найти в этой строке цифры. А остальные символы нас не интересуют.
+
+Для поиска символов определённого вида в регулярных выражениях предусмотрены "классы символов".
 
-**Для поиска символов определённого вида, в регулярных выражениях предусмотрены "классы символов".**
 [cut]
-Класс символов -- это, в первую очередь, специальное обозначение.
 
-Например, в данном случае нам нужен класс "произвольная цифра", он обозначается `\d`. 
+Класс символов -- это специальное обозначение, под которое подходит любой символ данного класса.
 
-Это обозначение вставляется в паттерн наравне с остальными символами. При поиске под него подходит любая цифра.
+Например, класс "любая цифра" обозначается `\d`. Это обозначение вставляется в паттерн наравне с остальными символами, и при поиске под него подходит любая цифра.
 
-Пример ниже ищет все цифры в строке:
+Регулярное выражение <code class="pattern">/\d/</code> ищет ровно одну цифру (первую):
 
 ```js
 //+ run
 var str = "+7(903)-123-45-67";
 
-var reg = /\d/g
+var reg = /\d/;
 
-alert( str.match(reg) ); // 7,9,0,3,1,2,3,4,5,6,7
+alert( str.match(reg) ); // 7
 ```
 
-Есть и другие классы. Самые полезные:
+...Ну а для поиска всех цифр достаточно добавить к нему флаг `g`:
+
+```js
+//+ run
+var str = "+7(903)-123-45-67";
+
+var reg = /\d/g;
+
+alert( str.match(reg) ); // массив цифр: 7,9,0,3,1,2,3,4,5,6,7
+```
+
+## Важнейшие классы
+
+Это был класс для цифр.
+
+Конечно же, есть и другие. Самые полезные классы:
 <dl>
 <dt>`\d` (от английского "digit" - "цифра")</dt>
 <dd>Цифра, символ от `0` до `9`.</dd>
 <dt>`\s` (от английского "space" - "пробел")</dt>
 <dd>Пробельный символ, включая табы, переводы строки и т.п.</dd>
 <dt>`\w` (от английского "word" -- "слово") </dt>
-<dd>Символ латинского алфавита или цифра или подчёркивание `'_'`</dd>
+<dd>Символ латинского алфавита или цифра или подчёркивание `'_'`. Не-английские буквы не являются `\w`.</dd>
 </dl>
 
-**Регулярное выражение обычно содержит одновременно и обычные символы и классы**:
+Регулярное выражение как правило содержит одновременно и обычные символы и классы.
 
-Например, найдём строку `CSS` с любой цифровой версией:
+Например, <code class="pattern">CSS\d</code> найдёт строку <code class="match">CSS</code>, с любой цифрой после неё.
+
+Пример ниже найдёт строку `CSS` с любой цифровой версией:
 
 ```js
 //+ run
-var str = "Стандарт CSS4 - наше будущее";
+var str = "Стандарт CSS4 - это здорово";
 var reg = /CSS\d/
 
-alert( str.match(reg) );
+alert( str.match(reg) ); // CSS4
 ```
 
-Несколько классов в одном регэкспе:
+Можно указать и несколько классов в одном регэкспе:
 
 ```js
 //+ run
-showMatch( "Я люблю HTML5!", /\s\w\w\w\w\d/ ); // 'HTML5'
+alert( "Я люблю HTML5!".match(/\s\w\w\w\w\d/) ); // 'HTML5'
 ```
 
 Совпадение (каждому классу в регэкспе соответствует один символ результата):
 
 <img src="love_html5.png">
 
-**Также существуют обратные символьные классы:**
+
+## Обратные классы
+
+Для каждого символьного класса существует "обратный ему", представленный такой же, но заглавной буквой.
+
+"Обратный" -- означает, что ему соответствуют все остальные символы, например:
 
 <dl>
 <dt>`\D`</dt>
-<dd>Не-цифра, любой символ кроме `\d`</dd>
+<dd>Не-цифра, то есть любой символ кроме `\d`, например буква.</dd>
 <dt>`\S`</dt>
-<dd>Не-пробел, любой символ кроме `\s`.</dd>
+<dd>Не-пробел, то есть любой символ кроме `\s`, например буква.</dd>
 <dt>`\W`</dt>
-<dd>Символ, не принадлежащий латиннице, а также не буква и не подчёркивание, алфавиту, т.е. любой кроме `\w`</dd>
+<dd>Любой символ, кроме `\w`, то есть не латинница, не подчёркивание, не цифра. В частности, русские буквы принадлежат этому классу.</dd>
 </dl>
 
-Например, мы хотим получить из телефона <code class="subject">+7(903)-123-45-67</code> только цифры.
+В начале этой главы мы видели, как получить из телефона <code class="subject">+7(903)-123-45-67</code> все цифры.
 
-Есть два способа сделать это. 
+Первый способ -- найти все цифры через `match(/\d/g)`, но есть и альтернативный -- найти все НЕцифры и удалить их из строки:
-
-<ol>
-<li>Первый -- найти все цифры и объединить их:
-Например:
-
-```js
-//+ run
-var str = "+7(903)-123-45-67";
-
-var digits = str.match( /\d/g ).join("");
-alert(digits); // 79031234567
-```
-
-</li>
-<li>Второй -- найти все НЕцифры и удалить их из строки:
 
 ```js
 //+ run
@@ -91,53 +98,59 @@ var str = "+7(903)-123-45-67";
 alert( str.replace(/\D/g, "") ); // 79031234567
 ```
 
-Второй способ короче, не правда ли?
+## Спецсимволы
-</li>
-</ol>
 
-**Регулярное выражение может также содержать стандартные спецсимволы строк, такие как `\n, \t` и другие.** 
+Регулярное выражение может также содержать стандартные спецсимволы строк, такие как перевод строки `\n`, табуляцию `\t` и другие.
 
-Они являются обычными символами. Отличить их от классов очень просто -- для классов зарезервированы другие буквы.
+Отличить их от классов очень просто -- для классов зарезервированы другие буквы. Так что никакого конфликта здесь нет.
+
+## Пробелы
 
-[warn header="Пробелы важны!"]
 Обычно мы не обращаем внимание на пробелы. Для нашего взгляда строки <code class="subject">1-5</code> и <code class="subject">1 - 5</code> почти идентичны.
 
-Но в регулярных выражениях **пробел - такой же символ, как и другие**.
+Но в регулярных выражениях пробел - такой же символ, как и другие.
 
-Поиск ниже не сработает, т.к. не учитывает пробелы вокруг дефиса:
+Поиск ниже не сработает, так как не учитывает пробелы вокруг дефиса:
 
 ```js
 //+ run
 alert(  "1 - 5".match (/\d-\d/) );  // null, нет совпадений!
 ```
 
-Поправим это, добавив в паттерн пробелы:
+Поправим это, добавив в регэксп пробелы:
 
 ```js
 //+ run
 alert(  "1 - 5".match (/\d - \d/) );  // работает, пробелы вокруг дефиса
 ```
 
-В регулярные выражения также не надо вставлять лишние пробелы. Все они имеют значение:
+В регулярные выражения также не надо вставлять лишние пробелы. Все символы имеют значение:
 
 ```js
 //+ run
 alert( "1-5".match( /\d - \d/ ) ); // null, так как в строке 1-5 нет пробелов
 ```
 
-[/warn]
+## Класс точка
 
 Особым классом символов является точка `"."`.
 
-**В регулярном выражении, точка <code class="pattern">"."</code> обозначает *любой символ*, кроме перевода строки**:
+В регулярном выражении, точка <code class="pattern">"."</code> обозначает *любой символ*, кроме перевода строки:
+
+```js
+//+ run
+alert( "Z".match(/./) ); // найдено Z
+```
+
+Посередине регулярного выражения:
 
 ```js
 //+ run
 var re = /CS.4/;
 
-alert( "Стандарт CSS4".match(re) ); // найдено "CSS4"
+alert( "CSS4".match(re) ); // найдено "CSS4"
-alert( "Сталь CS-4".match(re) ); // найдено "CS-4" 
+alert( "CS-4".match(re) ); // найдено "CS-4" 
-alert( "CS 4".match(re) ); // найдено "CS 4", пробел тоже символ
+alert( "CS 4".match(re) ); // найдено "CS 4" (пробел тоже символ)
 ```
 
 Обратим внимание -- точка означает именно "произвольный символ". 
@@ -146,7 +159,71 @@ alert( "CS 4".match(re) ); // найдено "CS 4", пробел тоже си
 
 ```js
 //+ run
- 
 alert( "CS4".match (/CS.4/) ); // нет совпадений, так как для точки нет символа
 ```
 
+## Экранирование специальных символов
+
+В регулярных выражениях есть и другие символы, имеющие особый смысл. 
+
+Они используются, чтобы расширить возможности поиска. 
+
+Вот их полный список: <code class="pattern">[ \ ^ $ . | ? * + ( )</code>.
+
+Не пытайтесь запомнить его -- когда мы разберёмся с каждым из них по отдельности, он запомнится сам собой.
+
+**Чтобы использовать специальный символ в качестве обычного, он должен быть *экранирован*.** 
+
+Или, другими словами, перед символом должен быть обратный слэш `'\'`. 
+
+Например, нам нужно найти точку <code class="pattern">'.'</code>. В регулярном выражении она означает "любой символ, кроме новой строки", поэтому чтобы найти именно сам символ "точка" -- её нужно экранировать: <code class="pattern">\.</code>.
+
+```js
+//+ run
+alert( "Глава 5.1".match( /\d\.\d/ ) );  // 5.1
+```
+
+Круглые скобки также являются специальными символами, так что для поиска именно скобки нужно использовать `\(`. Пример ниже ищет строку `"g()"`:
+
+```js
+//+ run
+alert( "function g()".match( /g\(\)/ ) );  // "g()"
+```
+
+Сам символ слэш `'/'`, хотя и не является специальными символом в регулярных выражениях, но открывает-закрывает регэксп в синтаксисе <code class="pattern">/...pattern.../</code>, поэтому его тоже нужно экранировать.
+
+Так выглядит поиск слэша `'/'`:
+
+```js
+//+ run
+alert( "/".match( /\// ) );  // '/'
+```
+
+Ну и, наконец, если нам нужно найти сам обратный слэш `\`, то его нужно просто задублировать.
+
+Так выглядит поиск обратного слэша `"\"`:
+
+```js
+//+ run
+alert( "1\2".match( /\\/ ) );  // '\'
+```
+
+## Итого
+
+Мы рассмотрели классы для поиска типов символов:
+
+<ul>
+<li>`\d` -- цифры.</li>
+<li>`\D` -- не-цифры.</li>
+<li>`\s` -- пробельные символы, переводы строки.</li>
+<li>`\S` -- всё, кроме `\s`.</li>
+<li>`\w` -- латинница, цифры, подчёркивание `'_'`.</li>
+<li>`'.'` -- точка обозначает любой символ, кроме перевода строки.</li>
+</ul>
+
+Кроме того, в регэкспах допустимы и обычные спец-символы строк, например `\n`.
+
+Если хочется поискать именно точку или какой-то другой "особый" символ, то его экранируют: <code class="pattern">\.</code>
+
+
+

10-regular-expressions-javascript/4-regexp-special-characters/article.md

@@ -1,46 +0,0 @@
-# Экранирование специальных символов
-
-В регулярных выражениях есть и другие символы, имеющие особый смысл. 
-
-Они используются, чтобы расширить возможности поиска. 
-
-Вот их полный список: <code class="pattern">[ \ ^ $ . | ? * + ( )</code>.
-
-Не пытайтесь запомнить его -- когда мы разберёмся с каждым из них по отдельности, он запомнится сам собой.
-
-**Чтобы использовать специальный символ в качестве обычного, он должен быть *экранирован*.** 
-
-Или, другими словами, перед символом должен быть обратный слэш `'\'`. 
-
-Например, нам нужно найти точку <code class="pattern">'.'</code>. В регулярном выражении она означает "любой символ, кроме новой строки", поэтому чтобы найти именно сам символ "точка" -- её нужно экранировать: <code class="pattern">\.</code>.
-
-```js
-//+ run
-alert( "Глава 5.1".match( /\d\.\d/ ) );  // 5.1
-```
-
-Круглые скобки также являются специальными символами, так что для поиска именно скобки нужно использовать `\(`. Пример ниже ищет строку `"g()"`:
-
-```js
-//+ run
-alert( "function g()".match( /g\(\)/ ) );  // "g()"
-```
-
-**Слэш `'/'`, хотя и не является специальными символом, но открывает-закрывает регэксп в синтаксисе <code class="pattern">/...pattern.../</code>. Поэтому его тоже нужно экранировать: <code><code>'\/'</code></code>**.
-
-Так выглядит поиск слэша `'/'`:
-
-```js
-//+ run
-alert( "/".match( /\// ) );  // '/'
-```
-
-Ну и, наконец, если нам нужно найти сам обратный слэш `\`, то его нужно просто задублировать.
-
-Так выглядит поиск обратного слэша `"\"`:
-
-```js
-//+ run
-alert( "1\2".match( /\\/ ) );  // '\'
-```
-

10-regular-expressions-javascript/5-regexp-character-sets-and-ranges/article.md

@@ -1,12 +1,14 @@
 # Наборы и диапазоны [...]
 
-Если в регулярном выражении нескольки символов или символьных классов заключены в квадратные скобки `[…]`, то это означает "искать любой символ из указанных в `[…]`".
+Если в регулярном выражении несколько символов или символьных классов заключены в квадратные скобки `[…]`, то это означает "искать любой символ из указанных в `[…]`".
+
+[cut]
+
+## Набор
 
 Например, <code class="pattern">[еао]</code> означает любой символ из этих трёх: `'а'`, `'е'`, или `'о'`.
-[cut]
-Можно использовать квадратные скобки вместе с обычными символами.
 
-Например:
+Такое обозначение называют *набором*. Наборы используются в регулярном выражении наравне с обычными символами:
 
 ```js
 //+ run
@@ -14,7 +16,7 @@
 alert( "Гоп-стоп".match( /[гт]оп/gi ) ); // "Гоп", "топ"
 ```
 
-Несмотря на то, что в квадратных скобках несколько символов, в совпадении должен присутствовать *ровно один* из них. 
+Обратим внимание: несмотря на то, что в наборе указано несколько символов, в совпадении должен присутствовать *ровно один* из них. 
 
 Поэтому в примере ниже нет результатов:
 
@@ -24,13 +26,22 @@ alert( "Гоп-стоп".match( /[гт]оп/gi ) ); // "Гоп", "топ"
 alert( "Вуаля".match( /В[уа]ля/ ) ); // совпадений нет
 ```
 
-Совпадение было бы, если бы после `"Ву"` шло сразу `"ля"`, например <code class="subject">Вуля</code> или если бы `"Ва"` сопровождалось `"ля"`, то есть <code class="subject">Валя</code>.
+Поиск подразумевает:
+<ul>
+<li><code class="pattern">В</code>,</li>
+<li>затем *одну* из букв набора <code class="pattern">[уа]</code>,</li>
+<li>а затем <code class="pattern">ля</code></li>
+</ul>
 
-**Квадратные скобки могут также содержать *диапазоны символов*.** 
+Таким образом, совпадение было бы для строки <code class="match">Вуля</code> или <code class="match">Валя</code>.
+
+## Диапазоны
+
+Квадратные скобки могут также содержать *диапазоны символов*.
 
 Например,  <code class="pattern">[a-z]</code> -- произвольный символ от `a` до `z`, <code class="pattern">[0-5]</code> -- цифра от `0` до `5`.
 
-В примере ниже мы будем искать `"x"`, после которого идёт два раза `[0-9A-F]` -- цифра или буква от A до F:
+В примере ниже мы будем искать `"x"`, после которого идёт два раза любая цифра или буква от A до F:
 
 ```js
 //+ run
@@ -38,7 +49,7 @@ alert( "Вуаля".match( /В[уа]ля/ ) ); // совпадений нет
 alert( "Exception 0xAF".match(/x[0-9A-F][0-9A-F]/g) );
 ```
 
-Обратим внимание, в слове <code class="subject">Exception</code> есть сочетание <code class="subject">xce</code>, но оно не подошло, потому что буквы в нём маленькие, а в диапазоне -- большие. 
+Обратим внимание, в слове <code class="subject">Exception</code> есть сочетание <code class="subject">xce</code>, но оно не подошло, потому что буквы в нём маленькие, а в диапазоне <code class="pattern">[0-9A-F]</code> -- большие. 
 
 Если хочется искать и его тоже, можно добавить в скобки диапазон `a-f`: <code class="pattern">[0-9A-Fa-f]</code>. Или же просто указать у всего регулярного выражения флаг `i`.
 
@@ -50,9 +61,9 @@ alert( "Exception 0xAF".match(/x[0-9A-F][0-9A-F]/g) );
 <li>**\s** -- то же самое, что <code class="pattern">[\t\n\v\f\r ]</code> плюс несколько юникодных пробельных символов.</li>
 </ul>
 
-**В квадратных скобках можно использовать и диапазоны и символьные классы -- вместе.**
+В квадратных скобках можно использовать и диапазоны и символьные классы -- вместе.
 
-Например, нам нужно найти слова в тексте. Если оно на английском -- это достаточно просто:
+Например, нам нужно найти все слова в тексте. Если они на английском -- это достаточно просто:
 
 ```js
 //+ run
@@ -72,7 +83,9 @@ alert( str.match( /\w+/g ) ); // null*!*
 
 Ничего не найдено! Это можно понять, ведь <code class="pattern">\w</code> -- это именно английская букво-цифра, как можно видеть из аналога <code class="pattern">[a-zA-Z0-9_]</code>.
 
-Чтобы находило слово на русском -- нужно использовать диапазон, например <code class="pattern">/[а-я]/</code>. А чтобы на обоих языках -- и то и другое вместе:
+Чтобы находило слово на русском -- нужно использовать диапазон, например <code class="pattern">/[а-я]/</code>. 
+
+А чтобы на обоих языках -- и то и другое вместе:
 
 ```js
 //+ run
@@ -81,7 +94,9 @@ var str = "Солнце (the sun) встаёт!";
 alert( str.match( /[\wа-я]+/gi ) ); // Солнце, the, sun, вста, т*!*
 ```
 
-...Присмотритесь внимательно к предыдущему примеру! Вы видите странность? Оно не находит букву <code class="match">ё</code>, более того -- считает её разрывом в слове. Причина  -- в кодировке юникод, она подробно раскрыта в главе [](/string). Буква `ё` лежит в стороне от основной кириллицы и её следует добавить в диапазон дополнительно, вот так:
+...Присмотритесь внимательно к предыдущему примеру! Вы видите странность? Оно не находит букву <code class="match">ё</code>, более того -- считает её разрывом в слове. Причина  -- в кодировке юникод, она подробно раскрыта в главе [](/string). 
+
+Буква `ё` лежит в стороне от основной кириллицы и её следует добавить в диапазон дополнительно, вот так:
 
 ```js
 //+ run
@@ -92,6 +107,8 @@ alert( str.match( /[\wа-яё]+/gi ) ); // Солнце, the, sun, встаёт*
 
 Теперь всё в порядке.
 
+## Диапазоны "кроме"
+
 **Кроме обычных, существуют также *исключающие* диапазоны: <code class="pattern">[^…]</code>.**
 
 Квадратные скобки, начинающиеся со знака каретки: <code class="pattern">[^…]</code> находят любой символ, *кроме указанных*.
@@ -99,9 +116,9 @@ alert( str.match( /[\wа-яё]+/gi ) ); // Солнце, the, sun, встаёт*
 Например:
 
 <ul>
-<li><code class="pattern">[^аеуо]</code> -- любой символ, кроме  `'a'`, `'e'`, `'y'`, `'o'`</li>
+<li><code class="pattern">[^аеуо]</code> -- любой символ, кроме  `'a'`, `'e'`, `'y'`, `'o'`.</li>
-<li><code class="pattern">[^0-9]</code> -- любая не-цифра, то же что `\D`</li>
+<li><code class="pattern">[^0-9]</code> -- любой символ, кроме цифры, то же что `\D`.</li>
-<li><code class="pattern">[^\s]</code> -- любой не-пробельный символ, как и  `\S`</li>
+<li><code class="pattern">[^\s]</code> -- любой не-пробельный символ, то же что `\S`.</li>
 </ul>
 
 Пример ниже ищет любые символы, кроме букв, цифр и пробелов:
@@ -111,28 +128,31 @@ alert( str.match( /[\wа-яё]+/gi ) ); // Солнце, the, sun, встаёт*
 alert( "alice15@gmail.com".match( /[^\d\sA-Z]/gi ) ); // "@", "."
 ```
 
-**В квадратных скобках большинство специальных символов можно использовать без экранирования.**
+## Не нужно экранирование
 
-Обычно, если мы хотим искать именно точку, а не любой символ, или именно `"\d"`, а не произвольную цифру, то мы используем экранирование: указываем `\.` или `\\d`.
+Обычно, если мы хотим искать именно точку, а не любой символ, или именно символ `\`, то мы используем экранирование: указываем `\.` или `\\`.
 
-Но квадратные скобки подразумевают поиск одного символа из нескольких или из диапазона. Использование некоторых специальных символов внутри них не имело бы смысла, и они воспринимаются как обычные символы.
+В квадратных скобках большинство специальных символов можно использовать без экранирования, если конечно ни не имеют какой-то особый смысл именно внутри квадратных скобок.
 
-Это касается символов:
+То есть, "как есть", без экранирования можно использовать символы:
 <ul>
-<li>точка <code class="pattern">'.'</code></li>
+<li>Точка <code class="pattern">'.'</code>.</li>
-<li>плюс <code class="pattern">'+'</code></li>
+<li>Плюс <code class="pattern">'+'</code>.</li>
-<li>круглые скобки <code class="pattern">'( )'</code></li>
+<li>Круглые скобки <code class="pattern">'( )'</code>.</li>
-<li>дефис <code class="pattern">'-'</code>, если он находится в начале или конце квадратных скобок, то есть не выделяет диапазон.</li>
+<li>Дефис <code class="pattern">'-'</code>, если он находится в начале или конце квадратных скобок, то есть не выделяет диапазон.</li>
-<li>символ каретки <code class="pattern">'^'</code>, если не находится в начале квадратных скобок, то есть кроме <code class="pattern">[\^..]</code>.</li>
+<li>Символ каретки <code class="pattern">'^'</code>, если не находится в начале квадратных скобок.</li>
-<li>а также открывающая квадратная скобка <code class="pattern">'['</code></li>
+<li>А также открывающая квадратная скобка <code class="pattern">'['</code>.</li>
 </ul>
 
 То есть, точка `"."` в квадратных скобках означает не "любой символ", а обычную точку.
 
-Например, регэксп <code class="pattern">[-().^+]</code> ищет один из символов `-().^`. В данном контексте эти символы не являются специальными.
+Регэксп <code class="pattern">[.,]</code> ищет один из символов "точка" или "запятая".
+
+В примере ниже регэксп <code class="pattern">[-().^+]</code> ищет один из символов `-().^`. Они не экранированы:
 
 ```js
 //+ run
+// Без экранирования
 var re = /[-().^+]/g;
 
 alert( "1 + 2 - 3".match(re) ); // найдёт +, -
@@ -142,6 +162,7 @@ alert( "1 + 2 - 3".match(re) ); // найдёт +, -
 
 ```js
 //+ run
+// Всё заэкранировали
 var re = /[\-\(\)\.\^\+]/g;
 
 alert( "1 + 2 - 3".match(re) ); // тоже работает: +, -

10-regular-expressions-javascript/6-regexp-numeric-quantifiers/article.md

@@ -1,47 +0,0 @@
-# Цифровые квантификаторы {n}
-
-Рассмотрим задачу -- взять телефон вида `+7(903)-123-45-67` и найти все числа в нём. То есть, нас интересует результат вида `7, 903, 123, 45, 67`.
-
-Нечто похожее мы уже делали ранее -- мы искали цифры. Для этого было достаточно класса `\d`. Но здесь нужно искать *числа* -- последовательности из 1 или более цифр.
-
-**Количество повторений символа можно указать с помощью числа в фигурных скобках: `{n}`.** 
-
-<dl>
-<dt>Точное количество: `{5}`</dt>
-<dd>Паттерн <code class="pattern">\d{5}</code> обозначает 5 цифр, как и <code class="pattern>\d\d\d\d\d</code>.
-
-Следующий пример находит пятизначное число.
-
-```js
-//+ run
-alert( "Мне 12345 лет".match (/\d{5}/) );  //  "12345"
-```
-
-</dd>
-<dt>Количество от-до: `{3,5}`</dt>
-<dd>Для того, чтобы найти, например, числа размером от трёх до пяти знаков, нужно указать границы в фигурных скобках: `\d{3,5}`
-
-```js
-//+ run
-alert( "Мне не 12, а 1234 года".match( /\d{3,5}/ ) );  // "1234"
-```
-
-Последнее значение можно и не указывать. Тогда выражение `\d{3,}` найдет числа, длиной от трех знаков:
-
-```js
-//+ run
-alert( "Мне не 12, а 345678 лет".match( /\d{3,5}/ ) );  // "345678"
-```
-
-</dd>
-</dl>
-
-В случае с телефоном нам нужны числа - одна или более цифр подряд. Этой задаче соответствует регулярное выражение <code class="pattern">\d{1,}</code>:
-
-```js
-//+ run
-var str = "+7(903)-123-45-67";
-
-alert( str.match( /\d{1,}/g ) ); // 7,903,123,45,67
-```
-

10-regular-expressions-javascript/7-regexp-quantifiers/article.md

@@ -1,8 +1,60 @@
-# Квантификаторы +, * и ?
+# Квантификаторы +, *, ? и {n}
+
+Рассмотрим ту же задачу, что и ранее -- взять телефон вида `+7(903)-123-45-67` и найти все числа в нём. Но теперь нас интересуют не цифры по отдельности, а именно числа, то есть результат вида `7, 903, 123, 45, 67`.
+
+Для поиска цифр по отдельности нам было достаточно класса `\d`. Но здесь нужно искать *числа* -- последовательности из 1 или более цифр.
+
+## Количество {n}
+
+Количество повторений символа можно указать с помощью числа в фигурных скобках: `{n}`.
+
+Такое указание называют *квантификатором* (от англ. quantifier).
+
+У него есть несколько подформ записи:
+
+<dl>
+<dt>Точное количество: `{5}`</dt>
+<dd>Регэксп <code class="pattern">\d{5}</code> обозначает ровно 5 цифр, в точности как <code class="pattern">\d\d\d\d\d</code>.
+
+Следующий пример находит пятизначное число.
+
+```js
+//+ run
+alert( "Мне 12345 лет".match (/\d{5}/) );  //  "12345"
+```
+
+</dd>
+<dt>Количество от-до: `{3,5}`</dt>
+<dd>Для того, чтобы найти, например, числа размером от трёх до пяти знаков, нужно указать границы в фигурных скобках: <code class="pattern">\d{3,5}</code>
+
+```js
+//+ run
+alert( "Мне не 12, а 1234 года".match( /\d{3,5}/ ) );  // "1234"
+```
+
+Последнее значение можно и не указывать. Тогда выражение <code class="pattern">\d{3,}</code> найдет числа, длиной от трех цифр:
+
+```js
+//+ run
+alert( "Мне не 12, а 345678 лет".match( /\d{3,5}/ ) );  // "345678"
+```
+</dd>
+</dl>
+
+В случае с телефоном нам нужны числа -- одна или более цифр подряд. Этой задаче соответствует регулярное выражение <code class="pattern">\d{1,}</code>:
+
+```js
+//+ run
+var str = "+7(903)-123-45-67";
+
+alert( str.match( /\d{1,}/g ) ); // 7,903,123,45,67
+```
+
+
+## Короткие обозначения
 
 Для самые часто востребованных квантификаторов есть специальные короткие обозначения.
 
-[cut]
 <dl>
 <dt>`+`</dt>
 <dd>Означает "один или более", то же что `{1,}`. 
@@ -20,11 +72,13 @@ alert( str.match( /\d+/g ) ); // 7,903,123,45,67
 <dt>`?`</dt>
 <dd>Означает "ноль или один", то же что и `{0,1}`. По сути, делает символ необязательным.
 
-Например, <code class="pattern">ou?r</code> найдёт <code class="match">or</code> в слове <code class="subject">color</code> и <code class="match">our</code> в его британском варианте написания <code class="subject">colour</code>.
+Например, регэксп <code class="pattern">ou?r</code> найдёт <code class="match">o</code>, после которого, возможно, следует <code class="match">u</code>, а затем <code class="match">r</code>.
+
+Этот регэксп найдёт <code class="match">or</code> в слове <code class="subject">color</code> и <code class="match">our</code> в <code class="subject">colour</code>:
 
 ```js
 //+ run
-var str = "Можно писать color или colour";
+var str = "Можно писать color или colour (британский вариант)";
 
 alert( str.match( /colou?r/g ) ); // color, colour
 ```
@@ -50,19 +104,22 @@ alert( "100 10 1".match( /\d0+/g ) ); // 100, 10
 </dd>
 </dl>
 
-Эти квантификаторы -- одни из важнейших "строительных блоков" для сложных регулярных выражений, поэтому мы рассмотрим ещё примеры.
+## Ещё примеры
+
+Эти квантификаторы принадлежат к числу самых важных "строительных блоков" для сложных регулярных выражений, поэтому мы рассмотрим ещё примеры.
 
 <dl>
-<dt>Десятичная дробь (число с точкой внутри): <code class="pattern">\d+\.\d+</code></dt>
+<dt>Регэксп "десятичная дробь" (число с точкой внутри): <code class="pattern">\d+\.\d+</code></dt>
 <dd>
 
+В действии:
 ```js
 //+ run
 alert( "0 1 12.345 7890".match( /\d+\.\d+/g ) ); // 123.45
 ```
 
 </dd>
-<dt>Открывающий HTML-тег без атрибутов, такой как `<span>` или `<p>`: <code class="pattern">/&lt;[a-z]+&gt;/i</code></dt>
+<dt>Регэксп "открывающий HTML-тег без атрибутов", такой как `<span>` или `<p>`: <code class="pattern">/&lt;[a-z]+&gt;/i</code></dt>
 <dd>Пример:
 
 ```js
@@ -72,7 +129,7 @@ alert( "<BODY> ... </BODY>".match ( /<[a-z]+>/gi ) ); // <BODY>
 
 Это регулярное выражение ищет символ <code class="pattern">'&lt;'</code>, за которым идут одна или более букв английского алфавита, и затем <code class="pattern">'&gt;'</code>. 
 </dd>
-<dt>Открывающий HTML-тег без атрибутов (лучше): <code class="pattern">/&lt;[a-z][a-z0-9]*&gt;/i</code></dt>
+<dt>Регэксп "открывающий HTML-тег без атрибутов" (лучше): <code class="pattern">/&lt;[a-z][a-z0-9]*&gt;/i</code></dt>
 <dd>
 Здесь регулярное выражение расширено: в соответствие со стандартом, HTML-тег может иметь символ на любой позиции, кроме первой, например `<h1>`.
 
@@ -82,7 +139,7 @@ alert( "<h1>Привет!</h1>".match( /<[a-z][a-z0-9]*>/gi ) );  // <h1>
 ```
 
 </dd>
-<dt>Открывающий или закрывающий HTML-тег без атрибутов: <code class="pattern">/&lt;\/?[a-z][a-z0-9]*&gt;/i</code></dt>
+<dt>Регэксп "открывающий или закрывающий HTML-тег без атрибутов": <code class="pattern">/&lt;\/?[a-z][a-z0-9]*&gt;/i</code></dt>
 <dd>В предыдущий паттерн добавили необязательный слэш <code class="pattern">/?</code> перед тегом. Его понадобилось заэкранировать, чтобы JavaScript не принял его за конец шаблона.
 
 ```js
@@ -95,13 +152,11 @@ alert( "<h1>Привет!</h1>".match( /<\/?[a-z][a-z0-9]*>/gi ) );  // <h1>, </
 
 
 [smart header="Точнее -- значит сложнее"]
-Здесь мы видим классическую ситуацию, которая повторяется из раза в раз.
+В этих примерах мы видим общее правило, которое повторяется из раза в раз: чем точнее регулярное выражение, тем оно длиннее и сложнее.
-
-Чем точнее регулярное выражение, тем оно длиннее и сложнее.
 
 Например, для HTML-тегов, скорее всего, подошло бы и более короткое регулярное выражение <code class="pattern">&lt;\w+&gt;</code>.
 
-Так как класс `\w` означает "любая цифра или английская буква или _`, то под такой шаблон подойдут и не теги, например <code class="match">&lt;_&gt;</code>, однако он гораздо проще, чем <code class="pattern">&lt;[a-z][a-z0-9]*&gt;</code>. 
+Так как класс `\w` означает "любая цифра или английская буква или `'_'`, то под такой регэксп подойдут и не теги, например <code class="match">&lt;_&gt;</code>. Однако он гораздо проще, чем более точный регэксп <code class="pattern">&lt;[a-z][a-z0-9]*&gt;</code>. 
 
 Подойдёт ли нам <code class="pattern">&lt;\w+&gt;</code> или нужно использовать именно <code class="pattern">&lt;[a-z][a-z0-9]*&gt;</code>?
 

10-regular-expressions-javascript/8-regexp-greedy-and-lazy/article.md

@@ -1,13 +1,18 @@
-# Жадный и ленивый режимы
+# Жадные и ленивые квантификаторы [todo]
 
-Теперь время залезть "под капот" регулярных выражений и посмотреть, как происходит поиск.
+Квантификаторы -- с виду очень простая, но на самом деле очень хитрая штука.
+
+Необходимо очень хорошо понимать, как именно происходит поиск, если конечно мы хотим искать что-либо сложнее чем <code class="pattern">/\d+/</code>.
 
-Это понимание необходимо для того, чтобы искать что-либо сложнее чем <code class="pattern">/\d+/</code>.
 [cut]
 
-Для примера рассмотрим задачу, которая часто возникает в типографике -- заменить кавычки вида `"..."` на "кавычки-лапки": `«...»`.
+Для примера рассмотрим задачу, которая часто возникает в типографике -- заменить в тексте кавычки вида `"..."` (их называют "английские кавычки") на "кавычки-ёлочки": `«...»`.
 
-Шаблон, который мы будем использовать для поиска подстрок в кавычках, будет выглядеть так:
+Для этого нужно сначала найти все слова в таких кавычках.
+
+Соотверствующее регулярное выражение может выглядеть так: <code class="pattern">/".+"/g</code>, то есть мы ищем кавычку, после которой один или более произвольный символ, и в конце опять кавычка.
+
+Однако, если попробовать применить его на практике, даже на таком простом случае...
 
 ```js
 //+ run
@@ -15,38 +20,48 @@ var reg = /".+"/g;
 
 var str = 'a "witch" and her "broom" is one';
 
-alert( str.match(reg) );
+alert( str.match(reg) ); // "witch" and her "broom"
 ```
 
-Запустите этот пример... 
+...Мы увидим, что оно работает совсем не так, как задумано!
 
-Упс! Он не работает! Вместо того, чтобы найти два совпадения <code class="match">"witch"</code> и <code class="match">"broom"</code>, он находит одно: <code class="match">"witch" and her "broom"</code>.
+Вместо того, чтобы найти два совпадения <code class="match">"witch"</code> и <code class="match">"broom"</code>, оно находит одно: <code class="match">"witch" and her "broom"</code>.
 
 Это как раз тот случай, когда *жадность* -- причина всех зол.
 
-## Алгоритм поиска
+## Жадный поиск
 
-Движок регулярных выражений пытается проверить строку на соответствие шаблону, начиная с самой первой, нулевой позиции. Если не получается, он идёт вперёд и пытается найти с 1й позиции и так далее.
+Чтобы найти совпадение, движок регулярных выражений обычно использует следующий алгоритм:
 
-Чтобы сделать происходящее максимально наглядным и понятным, проследим, что именно он делает для паттерна <code class="pattern">".+"</code>.
+<ul>
+<li>Для каждой позиции в поисковой строке
+<ul>
+<li>Проверить совпадение на данной позиции
+<ul><li>Посимвольно, с учётом классов и квантификаторов сопоставив с ней регулярное выражение.</li></ul>
+</li>
+</ul>
+</li>
+</ul>
+
+Это общие слова, гораздо понятнее будет, если мы проследим, что именно он делает для регэкспа <code class="pattern">".+"</code>.
 
 <ol>
 <li>Первый символ шаблона -- это кавычка <code class="pattern">"</code>. 
 
-Движок регулярных выражений пытается найти её на 0й позиции, но там совсем другой символ, поэтому на 0й позиции соответствия явно нет.
+Движок регулярных выражений пытается сопоставить её на 0й позиции в строке, но символ `a`, поэтому на 0й позиции соответствия явно нет.
 
 Далее он переходит 1ю, 2ю позицию в исходной строке и, наконец, обнаруживает кавычку на 3й позиции:
-<img src="witch_greedy1.png">
+<img src="witch_greedy1.svg">
 </li>
 <li>Кавычка найдена, далее движок проверяет, есть ли соответствие для остальной части паттерна. 
 
 В данном случае следующий символ паттерна -- `.` (точка). Она обозначает "любой символ", так что следующая буква строки <code class="match">'w'</code> вполне подходит:
-<img src="witch_greedy2.png">
+<img src="witch_greedy2.svg">
 </li>
 <li>Далее "любой символ" повторяется, так как стоит квантификатор <code class="pattern">.+</code>. Движок регулярных выражений берёт один символ за другим, до тех пор, пока у него это получается. 
 
 В данном случае это означает "до конца строки":
-<img src="witch_greedy3.png">
+<img src="witch_greedy3.svg">
 </li>
 <li>Итак, текст закончился, движок регулярных выражений больше не может найти "любой символ", он закончил строить соответствие для <code class="pattern">.+</code> и очень рад по этому поводу.
 

10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy1.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="463px" height="117px" viewBox="0 0 463 117" 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>witch_greedy1.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="witch_greedy1.svg" sketch:type="MSArtboardGroup">
+            <text id="a-&quot;witch&quot;-and-her-&quot;b" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal" fill="#8A704D">
+                <tspan x="20" y="82">a "witch" and her "broom" is one</tspan>
+            </text>
+            <text id="--&quot;-----------------" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal">
+                <tspan x="20" y="47" fill="#CB1E31">  " </tspan>
+                <tspan x="72.78125" y="47" fill="#B8BAC1"> </tspan>
+                <tspan x="85.9765625" y="47" fill="#CB1E31">                       </tspan>
+            </text>
+            <rect id="Rectangle-1" stroke="#E8C48E" sketch:type="MSShapeGroup" x="45" y="20" width="15" height="77"></rect>
+        </g>
+    </g>
+</svg>

10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy2.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="463px" height="117px" viewBox="0 0 463 117" 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>witch_greedy2.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="witch_greedy2.svg" sketch:type="MSArtboardGroup">
+            <text id="a-&quot;witch&quot;-and-her-&quot;b" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal" fill="#8A704D">
+                <tspan x="20" y="82">a "witch" and her "broom" is one</tspan>
+            </text>
+            <text id="--&quot;.----------------" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal">
+                <tspan x="20" y="47" fill="#CB1E31">  ".</tspan>
+                <tspan x="72.78125" y="47" fill="#B8BAC1"> </tspan>
+                <tspan x="85.9765625" y="47" fill="#CB1E31">                       </tspan>
+            </text>
+            <rect id="Rectangle-1" stroke="#E8C48E" sketch:type="MSShapeGroup" x="45" y="20" width="29" height="77"></rect>
+        </g>
+    </g>
+</svg>

10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy3.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="463px" height="117px" viewBox="0 0 463 117" 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>witch_greedy3.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="witch_greedy3.svg" sketch:type="MSArtboardGroup">
+            <text id="a-&quot;witch&quot;-and-her-&quot;b" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal" fill="#8A704D">
+                <tspan x="20" y="82">a "witch" and her "broom" is one</tspan>
+            </text>
+            <text id="--&quot;................." sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal">
+                <tspan x="20" y="47" fill="#CB1E31">  "......................</tspan>
+                <tspan x="349.882812" y="47" fill="#D7343F">.......</tspan>
+                <tspan x="442.25" y="47" fill="#CB1E31">       </tspan>
+            </text>
+            <rect id="Rectangle-1" stroke="#E8C48E" sketch:type="MSShapeGroup" x="45" y="20" width="402" height="77"></rect>
+        </g>
+    </g>
+</svg>

10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy4.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="463px" height="117px" viewBox="0 0 463 117" 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>witch_greedy4.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="witch_greedy4.svg" sketch:type="MSArtboardGroup">
+            <text id="a-&quot;witch&quot;-and-her-&quot;b" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal" fill="#8A704D">
+                <tspan x="20" y="82">a "witch" and her "broom" is one</tspan>
+            </text>
+            <text id="--&quot;................." sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal">
+                <tspan x="20" y="47" fill="#CB1E31">  "......................</tspan>
+                <tspan x="349.882812" y="47" fill="#D7343F">......</tspan>
+                <tspan x="429.054688" y="47" fill="#B9BAC1">"</tspan>
+                <tspan x="442.25" y="47" fill="#CB1E31">       </tspan>
+            </text>
+            <rect id="Rectangle-1" stroke="#E8C48E" sketch:type="MSShapeGroup" x="45" y="20" width="384" height="77"></rect>
+        </g>
+    </g>
+</svg>

10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy5.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="463px" height="117px" viewBox="0 0 463 117" 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>witch_greedy5.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="witch_greedy5.svg" sketch:type="MSArtboardGroup">
+            <text id="a-&quot;witch&quot;-and-her-&quot;b" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal" fill="#8A704D">
+                <tspan x="20" y="82">a "witch" and her "broom" is one</tspan>
+            </text>
+            <text id="--&quot;................." sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal">
+                <tspan x="20" y="47" fill="#CB1E31">  "......................</tspan>
+                <tspan x="349.882812" y="47" fill="#D7343F">.....</tspan>
+                <tspan x="415.859375" y="47" fill="#B9BAC1">".</tspan>
+                <tspan x="442.25" y="47" fill="#CB1E31">       </tspan>
+            </text>
+            <rect id="Rectangle-1" stroke="#E8C48E" sketch:type="MSShapeGroup" x="45" y="20" width="371" height="77"></rect>
+        </g>
+    </g>
+</svg>

10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy6.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="463px" height="117px" viewBox="0 0 463 117" 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>witch_greedy6.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="witch_greedy6.svg" sketch:type="MSArtboardGroup">
+            <text id="a-&quot;witch&quot;-and-her-&quot;b" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal" fill="#8A704D">
+                <tspan x="20" y="82">a "witch" and her "broom" is one</tspan>
+            </text>
+            <text id="--&quot;................." sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal">
+                <tspan x="20" y="47" fill="#CB1E31">  "....................."</tspan>
+                <tspan x="349.882812" y="47" fill="#B9BAC1">.......</tspan>
+                <tspan x="442.25" y="47" fill="#CB1E31">       </tspan>
+            </text>
+            <rect id="Rectangle-1" stroke="#E8C48E" sketch:type="MSShapeGroup" x="45" y="20" width="306" height="77"></rect>
+        </g>
+    </g>
+</svg>

10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy3.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="463px" height="117px" viewBox="0 0 463 117" 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>witch_lazy3.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="witch_lazy3.svg" sketch:type="MSArtboardGroup">
+            <text id="a-&quot;witch&quot;-and-her-&quot;b" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal" fill="#8A704D">
+                <tspan x="20" y="82">a "witch" and her "broom" is one</tspan>
+            </text>
+            <text id="--&quot;.&quot;---------------" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal">
+                <tspan x="20" y="47" fill="#CB1E31">  ".</tspan>
+                <tspan x="72.78125" y="47" fill="#B8BAC1">"</tspan>
+                <tspan x="85.9765625" y="47" fill="#CB1E31">                       </tspan>
+            </text>
+            <rect id="Rectangle-1" stroke="#E8C48E" sketch:type="MSShapeGroup" x="45" y="20" width="29" height="77"></rect>
+        </g>
+    </g>
+</svg>

10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy4.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="463px" height="117px" viewBox="0 0 463 117" 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>witch_lazy4.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="witch_lazy4.svg" sketch:type="MSArtboardGroup">
+            <text id="a-&quot;witch&quot;-and-her-&quot;b" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal" fill="#8A704D">
+                <tspan x="20" y="82">a "witch" and her "broom" is one</tspan>
+            </text>
+            <text id="--&quot;..&quot;--------------" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal">
+                <tspan x="20" y="47" fill="#CB1E31">  "..</tspan>
+                <tspan x="85.9765625" y="47" fill="#B8BAC1">"</tspan>
+                <tspan x="99.171875" y="47" fill="#CB1E31">                       </tspan>
+            </text>
+            <rect id="Rectangle-1" stroke="#E8C48E" sketch:type="MSShapeGroup" x="45" y="20" width="41" height="77"></rect>
+        </g>
+    </g>
+</svg>

10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy6.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="463px" height="117px" viewBox="0 0 463 117" 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>witch_lazy6.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="witch_lazy6.svg" sketch:type="MSArtboardGroup">
+            <text id="a-&quot;witch&quot;-and-her-&quot;b" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal" fill="#8A704D">
+                <tspan x="20" y="82">a "witch" and her "broom" is one</tspan>
+            </text>
+            <text id="--&quot;.....&quot;---------&quot;." sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal" fill="#CB1E31">
+                <tspan x="20" y="47">  "....."         "....."       </tspan>
+            </text>
+            <rect id="Rectangle-1" stroke="#E8C48E" sketch:type="MSShapeGroup" x="45" y="20" width="95" height="77"></rect>
+            <rect id="Rectangle-2" stroke="#E8C48E" sketch:type="MSShapeGroup" x="256" y="20" width="95" height="77"></rect>
+        </g>
+    </g>
+</svg>

12-css-for-js/10-box-sizing/border-box.svg

@@ -1 +1,40 @@
-<svg width="550" height="399" viewBox="0 0 550 399" xmlns="http://www.w3.org/2000/svg"><title>border-box.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><text font-family="Times" font-size="18" fill="#5A4739"><tspan x="306.752" y="96">Содержимое</tspan></text><text font-family="Times" font-size="18" fill="#5A4739"><tspan x="306.752" y="301">Содержимое</tspan></text><path d="M218 38h274v107H218V38zm14 12h247v83H232V50zm-39 193h324v107H193V243zm14 12h297v83H207v-83z" fill="#999647"/><path d="M223 43h264v97H223V43zm20 20h224v57H243V63zm-45 185h314v97H198v-97zm20 20h274v57H218v-57z" fill="#E8C48E"/><path d="M217 20.5v344.07M493 20.5v344.07" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#EE6C49"><tspan x="317.014" y="24">border-box</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#EE6B47"><tspan x="313.165" y="229">content-box</tspan></text><ellipse stroke="#EE6B47" stroke-width="2" cx="87" cy="183.5" rx="76" ry="43.5"/><path d="M157 203l29 18" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"/><path d="M185.888 220.93c-2.658-2.885-4.936-5.36-7.594-8.244l-3.164 5.098 10.758 3.146zM159 165l32-19" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"/><path d="M190.815 146.11l-10.818 2.934 3.063 5.16 7.755-8.094z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"/><text font-family="Consolas" font-size="16" font-weight="bold"><tspan x="32" y="176.642" fill="#999647">border: 5px;</tspan><tspan x="32" y="195.642" fill="#E8C48E">padding: 20px;</tspan></text></g></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="550px" height="399px" viewBox="0 0 550 399" 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>border-box.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="border-box.svg" sketch:type="MSArtboardGroup">
+            <text id="Содержимое" sketch:type="MSTextLayer" font-family="Times" font-size="18" font-weight="normal" sketch:alignment="middle" fill="#5A4739">
+                <tspan x="306.752441" y="96">Содержимое</tspan>
+            </text>
+            <text id="Содержимое" sketch:type="MSTextLayer" font-family="Times" font-size="18" font-weight="normal" sketch:alignment="middle" fill="#5A4739">
+                <tspan x="306.752441" y="301">Содержимое</tspan>
+            </text>
+            <path d="M218,38 L492,38 L492,145 L218,145 L218,38 Z M232,50 L479,50 L479,133 L232,133 L232,50 Z" id="Path-2" fill="#999647" sketch:type="MSShapeGroup"></path>
+            <path d="M193,243 L517,243 L517,350 L193,350 L193,243 Z M207,255 L504,255 L504,338 L207,338 L207,255 Z" id="Path-2" fill="#999647" sketch:type="MSShapeGroup"></path>
+            <path d="M223,43 L487,43 L487,140 L223,140 L223,43 Z M243,63 L467,63 L467,120 L243,120 L243,63 Z" id="Rectangle-222" fill="#E8C48E" sketch:type="MSShapeGroup"></path>
+            <path d="M198,248 L512,248 L512,345 L198,345 L198,248 Z M218,268 L492,268 L492,325 L218,325 L218,268 Z" id="Rectangle-222" fill="#E8C48E" sketch:type="MSShapeGroup"></path>
+            <path d="M217,20.5 L217,364.570007" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
+            <path d="M493,20.5 L493,364.570007" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
+            <text id="border-box" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6C49">
+                <tspan x="317.013672" y="24">border-box</tspan>
+            </text>
+            <text id="content-box" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
+                <tspan x="313.165039" y="229">content-box</tspan>
+            </text>
+            <ellipse id="Oval-5" stroke="#EE6B47" stroke-width="2" sketch:type="MSShapeGroup" cx="87" cy="183.5" rx="76" ry="43.5"></ellipse>
+            <path d="M157,203 L186,221" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+            <path id="Line-3-decoration-1" d="M185.887766,220.930337 C183.229857,218.044784 180.951649,215.571452 178.29374,212.685898 C177.186278,214.470142 176.237025,215.999495 175.129563,217.783739 C178.894934,218.885048 182.122395,219.829028 185.887766,220.930337 C185.887766,220.930337 185.887766,220.930337 185.887766,220.930337 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
+            <path d="M159,165 L191,146" id="Line-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+            <path id="Line-4-decoration-1" d="M190.814626,146.110066 C187.028309,147.137055 183.782895,148.017331 179.996578,149.04432 C181.068709,150.850015 181.987679,152.397754 183.059811,154.203449 C185.773996,151.370765 188.10044,148.94275 190.814626,146.110066 C190.814626,146.110066 190.814626,146.110066 190.814626,146.110066 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
+            <text id="border:-5px;" sketch:type="MSTextLayer" font-family="Consolas" font-size="16" font-weight="bold">
+                <tspan x="32" y="176.64193" fill="#999647">border: 5px;</tspan>
+                <tspan x="137.5625" y="176.64193" fill="#8A704D"></tspan>
+                <tspan x="32" y="195.64193" fill="#E8C48E">padding: 20px;</tspan>
+                <tspan x="155.15625" y="195.64193" fill="#8A704D"></tspan>
+            </text>
+        </g>
+    </g>
+</svg>

4-ajax/5-xhr-crossdomain/xhr-another-domain.svg

@@ -1 +1,50 @@
-<svg width="610" height="411" viewBox="0 0 610 411" xmlns="http://www.w3.org/2000/svg"><title>xhr-another-domain.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" d="M3 15h130v66H3z"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="29" y="50">JavaScript</tspan></text><path stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" d="M228 15h130v66H228z"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="266" y="50">Браузер</tspan></text><path stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" d="M454 15h130v66H454z"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="495" y="50">Сервер</tspan></text><path d="M69 81v320M294 81v320M520 81v320" id="Line" stroke="#979797" stroke-linecap="square"/><path d="M70.5 139.5h220" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M279.7 142.5l10.8-3-10.8-3" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="153" y="132">send()</tspan></text><path d="M295.5 189.5h220" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M515.5 189.5l-10.8-3v6l10.8-3z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="370.165" y="181">HTTP-запрос</tspan><tspan x="349.822" y="201" font-size="12">с заголовком Origin</tspan></text><path d="M297.5 294.5h220" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"/><path d="M298.3 294.5l10.8-3v6l-10.8-3zM71.5 359.5h220" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"/><path d="M72.3 359.5l10.8-3v6l-10.8-3z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="371.514" y="287">HTTP-ответ</tspan><tspan x="274.748" y="307" font-size="12">Access-Control-Allow-Origin: * или Origin</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="80.087" y="351">если заголовок стоит onload</tspan><tspan x="133.968" y="371">иначе onerror</tspan></text></g></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="610px" height="411px" viewBox="0 0 610 411" 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>xhr-another-domain.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="xhr-another-domain.svg" sketch:type="MSArtboardGroup">
+            <rect id="Rectangle-227" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="3" y="15" width="130" height="66"></rect>
+            <text id="JavaScript" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="29" y="50">JavaScript</tspan>
+            </text>
+            <rect id="Rectangle-228" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="228" y="15" width="130" height="66"></rect>
+            <text id="Браузер" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="266" y="50">Браузер</tspan>
+            </text>
+            <rect id="Rectangle-229" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="454" y="15" width="130" height="66"></rect>
+            <text id="Сервер" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="495" y="50">Сервер</tspan>
+            </text>
+            <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="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-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-linecap="square" fill="#EE6B47"></path>
+            <text id="send()" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="153" y="132">send()</tspan>
+            </text>
+            <path d="M295.5,189.5 L515.5,189.5" id="Line" stroke="#EE6B47" stroke-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-linecap="square" fill="#EE6B47"></path>
+            <text id="HTTP-запрос" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" line-spacing="18" fill="#8A704D">
+                <tspan x="370.165039" y="181">HTTP-запрос</tspan>
+                <tspan x="349.822266" y="201" font-size="12">с заголовком Origin</tspan>
+            </text>
+            <path d="M297.5,294.5 L517.5,294.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
+            <path id="Line-2-decoration-1" d="M298.3,294.5 C302.08,293.45 305.32,292.55 309.1,291.5 C309.1,293.6 309.1,295.4 309.1,297.5 C305.32,296.45 302.08,295.55 298.3,294.5 C298.3,294.5 298.3,294.5 298.3,294.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
+            <path d="M71.5,359.5 L291.5,359.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
+            <path id="Line-3-decoration-1" d="M72.3,359.5 C76.08,358.45 79.32,357.55 83.1,356.5 C83.1,358.6 83.1,360.4 83.1,362.5 C79.32,361.45 76.08,360.55 72.3,359.5 C72.3,359.5 72.3,359.5 72.3,359.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
+            <text id="HTTP-ответ" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" line-spacing="18" fill="#8A704D">
+                <tspan x="371.513672" y="287">HTTP-ответ</tspan>
+                <tspan x="274.748047" y="307" font-size="12">Access-Control-Allow-Origin: * или Origin</tspan>
+                <tspan x="545.251953" y="307"> </tspan>
+            </text>
+            <text id="если-заголовок-стоит" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" line-spacing="18" fill="#8A704D">
+                <tspan x="80.0869141" y="351">если заголовок стоит onload</tspan>
+                <tspan x="133.967773" y="371">иначе onerror</tspan>
+            </text>
+        </g>
+    </g>
+</svg>

4-ajax/5-xhr-crossdomain/xhr-preflight.svg

@@ -1 +1,67 @@
-<svg width="610" height="633" viewBox="0 0 610 633" xmlns="http://www.w3.org/2000/svg"><title>xhr-preflight.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" d="M3 15h130v66H3z"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="29" y="50">JavaScript</tspan></text><path stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" d="M228 15h130v66H228z"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="266" y="50">Браузер</tspan></text><path stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" d="M467 15h130v66H467z"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="503" y="50">Сервер</tspan></text><path d="M69 82v520M294 82v520M533 82v520" id="Line" stroke="#979797" stroke-linecap="square"/><path d="M70.5 139.5h220" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M279.7 142.5l10.8-3-10.8-3" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="153" y="132">send()</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="387.56" y="171">OPTIONS</tspan><tspan x="394.707" y="191" font-size="12">Origin</tspan><tspan x="318.834" y="211" font-size="12">Access-Control-Request-Method</tspan><tspan x="315.535" y="231" font-size="12">Access-Control-Request-Headers</tspan></text><path d="M297.5 292.5h230" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M298.3 292.5l10.8-3v6l-10.8-3z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="392.408" y="285">200 OK</tspan><tspan x="326.432" y="305" font-size="12">Access-Control-Allow-Method</tspan><tspan x="323.133" y="325" font-size="12">Access-Control-Allow-Headers</tspan><tspan x="342.926" y="345" font-size="12">Access-Control-Max-Age</tspan></text><path d="M298.5 179.5h230" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M528.5 179.5l-10.8-3v6l10.8-3z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M297.5 501.5h230" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"/><path d="M298.3 501.5l10.8-3v6l-10.8-3zM71.5 553.5h220" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"/><path d="M72.3 553.5l10.8-3v6l-10.8-3z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="379.514" y="494">HTTP-ответ</tspan><tspan x="328.932" y="514" font-size="12">Access-Control-Allow-Origin</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="75.238" y="545">если сервер разрешил: onload</tspan><tspan x="132.968" y="565">иначе onerror</tspan></text><path d="M296.5 435.5h230" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><path d="M526.5 435.5l-10.8-3v6l10.8-3z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="339.527" y="427">Основной HTTP-запрос</tspan><tspan x="396.707" y="447" font-size="12">Origin</tspan></text></g></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="610px" height="633px" viewBox="0 0 610 633" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
+    <title>xhr-preflight.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="xhr-preflight.svg" sketch:type="MSArtboardGroup">
+            <rect id="Rectangle-227" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="3" y="15" width="130" height="66"></rect>
+            <text id="JavaScript" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="29" y="50">JavaScript</tspan>
+            </text>
+            <rect id="Rectangle-228" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="228" y="15" width="130" height="66"></rect>
+            <text id="Браузер" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="266" y="50">Браузер</tspan>
+            </text>
+            <rect id="Rectangle-229" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="467" y="15" width="130" height="66"></rect>
+            <text id="Сервер" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="503" y="50">Сервер</tspan>
+            </text>
+            <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="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-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-linecap="square" fill="#EE6B47"></path>
+            <text id="send()" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="153" y="132">send()</tspan>
+            </text>
+            <text id="OPTIONS" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" line-spacing="18" fill="#8A704D">
+                <tspan x="387.55957" y="171">OPTIONS</tspan>
+                <tspan x="394.707031" y="191" font-size="12">Origin</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>
+            </text>
+            <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-linecap="square" fill="#EE6B47"></path>
+            <text id="200-OK" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" line-spacing="18" fill="#8A704D">
+                <tspan x="392.408203" y="285">200 OK</tspan>
+                <tspan x="326.431641" y="305" font-size="12">Access-Control-Allow-Method</tspan>
+                <tspan x="323.132812" y="325" font-size="12">Access-Control-Allow-Headers</tspan>
+                <tspan x="342.925781" y="345" font-size="12">Access-Control-Max-Age</tspan>
+                <tspan x="488.074219" y="345"></tspan>
+            </text>
+            <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-linecap="square" fill="#EE6B47"></path>
+            <path d="M297.5,501.5 L527.5,501.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
+            <path id="Line-2-decoration-1" d="M298.3,501.5 C302.08,500.45 305.32,499.55 309.1,498.5 C309.1,500.6 309.1,502.4 309.1,504.5 C305.32,503.45 302.08,502.55 298.3,501.5 C298.3,501.5 298.3,501.5 298.3,501.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
+            <path d="M71.5,553.5 L291.5,553.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
+            <path id="Line-3-decoration-1" d="M72.3,553.5 C76.08,552.45 79.32,551.55 83.1,550.5 C83.1,552.6 83.1,554.4 83.1,556.5 C79.32,555.45 76.08,554.55 72.3,553.5 C72.3,553.5 72.3,553.5 72.3,553.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
+            <text id="HTTP-ответ" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" line-spacing="18" fill="#8A704D">
+                <tspan x="379.513672" y="494">HTTP-ответ</tspan>
+                <tspan x="328.931641" y="514" font-size="12">Access-Control-Allow-Origin</tspan>
+                <tspan x="507.068359" y="514"> </tspan>
+            </text>
+            <text id="если-сервер-разрешил" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" line-spacing="18" fill="#8A704D">
+                <tspan x="75.2382812" y="545">если сервер разрешил: onload</tspan>
+                <tspan x="132.967773" y="565">иначе onerror</tspan>
+            </text>
+            <path d="M296.5,435.5 L526.5,435.5" id="Line-5" stroke="#EE6B47" stroke-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-linecap="square" fill="#EE6B47"></path>
+            <text id="Основной-HTTP-запрос" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" line-spacing="18" fill="#8A704D">
+                <tspan x="339.527344" y="427">Основной HTTP-запрос</tspan>
+                <tspan x="396.707031" y="447" font-size="12">Origin</tspan>
+            </text>
+        </g>
+    </g>
+</svg>

5-animation/1-bezier/bezier-car.svg

@@ -1 +1,32 @@
-<svg width="260" height="130" viewBox="0 0 260 130" xmlns="http://www.w3.org/2000/svg"><title>bezier-car.svg</title><desc>Created with bin/sketchtool.</desc><g stroke="#000" fill="none" fill-rule="evenodd"><path d="M23.548 101.742C11.72 72.978 35.376 55.72 94.516 49.968c5.914-11.506 8.87-23.01 8.87-34.516 100.54-11.506 144.894 17.258 133.066 86.29H23.548z" stroke-width="2" fill="#C0C0C0"/><g id="crvpnt-link" transform="translate(20 12) translate(0 86.29)" fill="#D3D3D3"><ellipse id="crvpnt" cx="3.548" cy="3.452" rx="3.548" ry="3.452"/></g><g id="crvpnt-link" transform="translate(20 12) translate(70.968 34.516)" fill="#D3D3D3"><ellipse id="crvpnt" cx="3.548" cy="3.452" rx="3.548" ry="3.452"/></g><g transform="translate(20 12) translate(79.839)" fill="#D3D3D3"><ellipse cx="3.548" cy="3.452" rx="3.548" ry="3.452"/></g><ellipse cx="3.548" cy="3.452" rx="3.548" ry="3.452" transform="translate(20 12) translate(212.903 86.29)" fill="#D3D3D3"/><g transform="translate(20 12) translate(39.032 72.484)" stroke-width="5" fill="#D3D3D3"><ellipse cx="17.742" cy="17.258" rx="17.742" ry="17.258"/></g><ellipse cx="17.742" cy="17.258" rx="17.742" ry="17.258" transform="translate(20 12) translate(154.355 72.484)" stroke-width="5" fill="#D3D3D3"/></g></svg>
+<?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>

5-animation/1-bezier/bezier-letter.svg

@@ -1 +1,50 @@
-<svg width="166" height="173" viewBox="0 0 166 173" xmlns="http://www.w3.org/2000/svg"><title>bezier-letter.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M107.445 135.533c1.276 13.808 9.886 28.307 24.875 28.307 6.697 0 26.15-4.833 26.15-32.795v-19.332h-7.973v19.332c0 20.022-7.973 22.094-11.48 22.094-10.524 0-11.8-15.537-11.8-17.263V66.835c0-14.5 0-27.963-11.48-40.736C103.3 12.634 87.354 7.11 72.047 7.11c-26.15 0-48.155 16.225-48.155 39.01 0 10.356 6.378 16.225 14.67 16.225 8.93 0 14.67-6.904 14.67-15.88 0-4.143-1.595-15.535-16.265-15.88 8.61-12.083 24.237-15.88 34.442-15.88 15.624 0 33.802 13.463 33.802 44.188v12.773c-16.264 1.035-38.588 2.07-58.68 12.427-23.916 11.738-31.89 29.69-31.89 44.88 0 27.96 30.935 36.59 51.026 36.59 21.046 0 35.716-13.807 41.775-30.032z" fill="#B3B3B3"/><path d="M105.213 78.917v34.522c0 32.793-22.96 44.53-37.312 44.53-15.624 0-28.7-12.082-28.7-29.343 0-18.987 13.395-47.64 66.014-49.71z" fill="#fff"/><path d="M106.32 136.75h2.25v-2.435h-2.25v2.436zM131.195 165.058h2.25v-2.435h-2.25v2.435zM157.345 132.263h2.25v-2.436h-2.25v2.436zM157.345 112.93h2.25v-2.435h-2.25v2.436zM149.372 112.93h2.25v-2.435h-2.25v2.436zM149.372 132.263h2.25v-2.436h-2.25v2.436zM137.89 154.357h2.252v-2.436h-2.25v2.438zM126.092 137.096h2.25v-2.436h-2.25v2.436zM126.092 68.053h2.25v-2.436h-2.25v2.436zM114.612 27.317h2.25V24.88h-2.25v2.437zM70.922 8.33h2.25V5.894h-2.25V8.33zM22.767 47.34h2.25v-2.436h-2.25v2.436zM37.437 63.565h2.25V61.13h-2.25v2.435zM52.106 47.685h2.25V45.25h-2.25v2.435zM35.842 31.805h2.25V29.37h-2.25v2.435zM70.284 15.925h2.25V13.49h-2.25v2.435zM104.088 60.113h2.25v-2.436h-2.25v2.436zM104.088 72.886h2.25V70.45h-2.25v2.436zM45.41 85.313h2.25v-2.435h-2.25v2.435zM13.52 130.19h2.25v-2.434h-2.25v2.435zM64.544 166.784h2.25v-2.435h-2.25v2.433zM106.32 136.75h2.25v-2.435h-2.25v2.436zM104.088 80.135h2.25V77.7h-2.25v2.435zM104.088 114.657h2.25v-2.436h-2.25v2.438zM66.776 159.19h2.25v-2.436h-2.25v2.436zM38.075 129.846h2.25v-2.435h-2.25v2.437zM104.088 80.135h2.25V77.7h-2.25v2.435z" fill="#000"/></g></svg>
+<?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>

5-animation/1-bezier/bezier-vase.svg

@@ -1 +1,49 @@
-<svg width="110" height="170" viewBox="0 0 110 170" xmlns="http://www.w3.org/2000/svg"><title>bezier-vase.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M37.01 162.21c-19.503-39.603-19.503-79.205 0-118.807 6.5-13.2 6.5-26.4 0-39.602h39.005c-6.5 13.203-6.5 26.403 0 39.604 19.502 39.602 19.502 79.204 0 118.806H37.01z" stroke="#A0522D" stroke-width="2"/><path d="M37.01 3.8l9.75 19.802-39.004 79.204L37.01 162.21M76.015 3.8l-9.75 19.802 39.004 79.204-29.256 59.403" stroke="#000" stroke-width=".5" stroke-dasharray="2"/><g id="dot-link" transform="translate(5 1) translate(49.562 .821)" stroke="#000" fill="#fff"><ellipse id="dot" cx="1.95" cy="1.98" rx="1.95" ry="1.98"/></g><g id="dot-link" transform="translate(5 1) translate(30.06 .821)" stroke="#000" fill="#fff"><ellipse id="dot" cx="1.95" cy="1.98" rx="1.95" ry="1.98"/></g><g id="dot-link" transform="translate(5 1) translate(39.811 20.622)" stroke="#000" fill="#fff"><ellipse id="dot" cx="1.95" cy="1.98" rx="1.95" ry="1.98"/></g><g id="dot-link" transform="translate(5 1) translate(30.06 40.423)" stroke="#000" fill="#fff"><ellipse id="dot" cx="1.95" cy="1.98" rx="1.95" ry="1.98"/></g><g id="dot-link" transform="translate(5 1) translate(.806 99.826)" stroke="#000" fill="#fff"><ellipse id="dot" cx="1.95" cy="1.98" rx="1.95" ry="1.98"/></g><g id="dot-link" transform="translate(5 1) translate(30.06 159.229)" stroke="#000" fill="#fff"><ellipse id="dot" cx="1.95" cy="1.98" rx="1.95" ry="1.98"/></g><g id="dot-link" transform="translate(5 1) translate(69.065 .821)" stroke="#000" fill="#fff"><ellipse id="dot" cx="1.95" cy="1.98" rx="1.95" ry="1.98"/></g><g id="dot-link" transform="translate(5 1) translate(59.313 20.622)" stroke="#000" fill="#fff"><ellipse id="dot" cx="1.95" cy="1.98" rx="1.95" ry="1.98"/></g><g id="dot-link" transform="translate(5 1) translate(69.065 40.423)" stroke="#000" fill="#fff"><ellipse id="dot" cx="1.95" cy="1.98" rx="1.95" ry="1.98"/></g><g transform="translate(5 1) translate(98.318 99.826)" stroke="#000" fill="#fff"><ellipse cx="1.95" cy="1.98" rx="1.95" ry="1.98"/></g><ellipse cx="1.95" cy="1.98" rx="1.95" ry="1.98" transform="translate(5 1) translate(69.065 159.229)" stroke="#000" fill="#fff"/></g></svg>
+<?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>

5-animation/1-bezier/bezier2.svg

@@ -1 +1,20 @@
-<svg width="149" height="187" viewBox="0 0 149 187" xmlns="http://www.w3.org/2000/svg"><title>bezier2.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M24.17 143.348l100.144-99.843" stroke="#CB1E31" stroke-width="2"/><circle stroke="#E8C48E" fill="#fff" cx="24" cy="144" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="20" y="165">1</tspan></text><circle stroke="#E8C48E" fill="#fff" cx="124" cy="44" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="120.101" y="65">2</tspan></text></g></svg>
+<?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>

5-animation/1-bezier/bezier3-draw2.svg

@@ -1 +1,38 @@
-<svg width="340" height="350" viewBox="0 0 340 350" xmlns="http://www.w3.org/2000/svg"><title>bezier3-draw2.svg</title><desc>Created with bin/sketchtool.</desc><g transform="translate(33 24)" fill="none" fill-rule="evenodd"><path d="M4.282 290.328L138.238 22.82l134.966 268.494" stroke="#E8C48E"/><path d="M4.738 290.328c98.312-197.562 188.187-157.862 268.157 1.49" stroke="#CB1E31" stroke-width="2"/><circle stroke="#E8C48E" fill="#fff" cx="4" cy="292" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="0" y="313">1</tspan></text><circle stroke="#E8C48E" fill="#fff" cx="273" cy="292" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="269" y="313">3</tspan></text><circle stroke="#E8C48E" fill="#fff" cx="138" cy="23" r="4"/><circle fill="#CB1E31" cx="138" cy="157" r="4"/><path d="M71.5 157H205" stroke="#62C0DC" stroke-width="2" stroke-linecap="square"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="134" y="15">2</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="128" y="181">0.5</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="17.5" y="163">t = 0.5</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="216" y="163">0.5</tspan></text></g></svg>
+<?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>

5-animation/1-bezier/bezier3-e.svg

@@ -1 +1,25 @@
-<svg width="149" height="187" viewBox="0 0 149 187" xmlns="http://www.w3.org/2000/svg"><title>bezier3-e.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path stroke="#E8C48E" d="M74.5 43L125 144H24z"/><path d="M24.28 143.124c50.22-100.184 89.93-17.718 99.82.52" stroke="#CB1E31" stroke-width="2"/><circle stroke="#E8C48E" fill="#fff" cx="24" cy="144" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="20" y="165">1</tspan></text><circle stroke="#E8C48E" fill="#fff" cx="124" cy="144" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="120" y="165">3</tspan></text><circle stroke="#E8C48E" fill="#fff" cx="74" cy="44" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="70.19" y="36">3</tspan></text></g></svg>
+<?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>

5-animation/1-bezier/bezier3.svg

@@ -1 +1,24 @@
-<svg width="149" height="187" viewBox="0 0 149 187" xmlns="http://www.w3.org/2000/svg"><title>bezier3.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M24.28 143.124c50.22-100.184 89.93-17.718 99.82.52" stroke="#CB1E31" stroke-width="2"/><circle stroke="#E8C48E" fill="#fff" cx="24" cy="144" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="20" y="165">1</tspan></text><circle stroke="#E8C48E" fill="#fff" cx="124" cy="144" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="120" y="165">3</tspan></text><circle stroke="#E8C48E" fill="#fff" cx="74" cy="44" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="70.19" y="36">3</tspan></text></g></svg>
+<?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>

5-animation/1-bezier/bezier4-e.svg

@@ -1 +1,29 @@
-<svg width="149" height="187" viewBox="0 0 149 187" xmlns="http://www.w3.org/2000/svg"><title>bezier4-e.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M72.823 144h-49.82L73.706 43h49.82L72.822 144z" stroke="#E8C48E"/><path d="M23.688 143.905c50.015 0 50.703-100.414 100.467-100.414" stroke="#CB1E31" stroke-width="2"/><circle stroke="#E8C48E" fill="#fff" cx="24" cy="144" r="4"/><circle stroke="#E8C48E" fill="#fff" cx="124" cy="43" r="4"/><circle stroke="#E8C48E" fill="#fff" cx="73" cy="43" r="4"/><circle stroke="#E8C48E" fill="#fff" cx="73" cy="143" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="20" y="165">1</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="69" y="165">2</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="69" y="35">3</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="121" y="35">4</tspan></text></g></svg>
+<?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>

5-animation/1-bezier/bezier4.svg

@@ -1 +1,28 @@
-<svg width="149" height="187" viewBox="0 0 149 187" xmlns="http://www.w3.org/2000/svg"><title>bezier4.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M23.688 143.905c50.015 0 50.703-100.414 100.467-100.414" stroke="#CB1E31" stroke-width="2"/><circle stroke="#E8C48E" fill="#fff" cx="24" cy="144" r="4"/><circle stroke="#E8C48E" fill="#fff" cx="124" cy="43" r="4"/><circle stroke="#E8C48E" fill="#fff" cx="73" cy="43" r="4"/><circle stroke="#E8C48E" fill="#fff" cx="73" cy="143" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="20" y="165">1</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="69" y="165">2</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="69" y="35">3</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="121" y="35">4</tspan></text></g></svg>
+<?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>

5-animation/2-css-transitions/bezier-train-over.svg

@@ -1 +1,45 @@
-<svg width="225" height="331" viewBox="0 0 225 331" xmlns="http://www.w3.org/2000/svg"><title>bezier-train-over.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path stroke="#979797" stroke-dasharray="3,2,3,2" d="M34 89h150v150H34z"/><text font-family="Consolas" font-size="12" font-weight="bold" fill="#838383" transform="translate(0 76)"><tspan x="189" y="9">(1,1)</tspan></text><text font-family="Consolas" font-size="12" font-weight="bold" fill="#838383" transform="translate(0 76)"><tspan x="0" y="155">(0,0)</tspan></text><text font-family="Consolas" font-size="12" font-weight="bold" fill="#838383" transform="translate(0 76)"><tspan x="0" y="9">(0,1)</tspan></text><text font-family="Consolas" font-size="12" font-weight="bold" fill="#838383" transform="translate(0 76)"><tspan x="189" y="155">(1,0)</tspan></text><path d="M34.5 239.5l73 73" stroke="#E8C48E" stroke-linecap="square"/><path d="M34 239c75 75 75-225 150-150" stroke="#CB1E31" stroke-width="2"/><circle stroke="#E8C48E" fill="#fff" cx="34" cy="239" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="30" y="261">1</tspan></text><circle stroke="#E8C48E" fill="#fff" cx="109" cy="314" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="92" y="320">2</tspan></text><path d="M110.5 15.5l73 73" stroke="#E8C48E" stroke-linecap="square"/><circle stroke="#E8C48E" fill="#fff" cx="184" cy="89" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="188" y="107">4</tspan></text><circle stroke="#E8C48E" fill="#fff" cx="109" cy="14" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="92" y="21">3</tspan></text></g></svg>
+<?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>

5-animation/2-css-transitions/ease-in-out.svg

@@ -1 +1,30 @@
-<svg width="149" height="187" viewBox="0 0 149 187" xmlns="http://www.w3.org/2000/svg"><title>ease-in-out.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M23.688 143.905c42.32 0 58.04-100.414 100.467-100.414" stroke="#CB1E31" stroke-width="2"/><path d="M24.5 143.5h42.297M83.5 43.5h42.297" stroke="#E8C48E" stroke-linecap="square"/><circle stroke="#E8C48E" fill="#fff" cx="24" cy="144" r="4"/><circle stroke="#E8C48E" fill="#fff" cx="124" cy="43" r="4"/><circle stroke="#E8C48E" fill="#fff" cx="82" cy="43" r="4"/><circle stroke="#E8C48E" fill="#fff" cx="66" cy="143" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="20" y="165">1</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="62" y="165">2</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="78" y="35">3</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="121" y="35">4</tspan></text></g></svg>
+<?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>

5-animation/2-css-transitions/train-curve.svg

@@ -1 +1,30 @@
-<svg width="149" height="187" viewBox="0 0 149 187" xmlns="http://www.w3.org/2000/svg"><title>train-curve.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M26.137 142.908c0-49.408 50.364-99.664 100.358-99.664" stroke="#CB1E31" stroke-width="2"/><path d="M25.5 143.5V93.34" stroke="#E8C48E" stroke-linecap="square"/><circle stroke="#E8C48E" fill="#fff" cx="26" cy="144" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="22" y="165">1</tspan></text><circle stroke="#E8C48E" fill="#fff" cx="26" cy="94" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="22" y="87">2</tspan></text><path d="M75.5 43.5h50.636" stroke="#E8C48E" stroke-linecap="square"/><circle stroke="#E8C48E" fill="#fff" cx="126" cy="44" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="122" y="36">4</tspan></text><circle stroke="#E8C48E" fill="#fff" cx="76" cy="44" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="72" y="36">3</tspan></text></g></svg>
+<?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>

5-animation/3-js-animation/back.svg

@@ -1 +1,25 @@
-<svg width="234" height="240" viewBox="0 0 234 240" xmlns="http://www.w3.org/2000/svg"><title>back.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M34 209.5V22.16" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M34 22.5l-3 10.8h6l-3-10.8z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M24.5 194h184.01" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M208.5 194l-10.8-3v6l10.8-3z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M35.33 193.636s47.216 15.85 69.737 15.008c22.52-.842 61.26 6.27 103.4-186.198" stroke="#EE6B47" stroke-width="3"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="212">0</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="36">1</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="200" y="212">1</tspan></text></g></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="234px" height="240px" viewBox="0 0 234 240" 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>back.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="back.svg" sketch:type="MSArtboardGroup">
+            <path d="M34,209.5 L34,22.1600037" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+            <path id="Line-decoration-1" d="M34,22.5 C32.95,26.28 32.05,29.52 31,33.3 C33.1,33.3 34.9,33.3 37,33.3 C35.95,29.52 35.05,26.28 34,22.5 C34,22.5 34,22.5 34,22.5 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
+            <path d="M24.5,194 L208.509995,194" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+            <path id="Line-decoration-1" d="M208.5,194 C204.72,192.95 201.48,192.05 197.7,191 C197.7,193.1 197.7,194.9 197.7,197 C201.48,195.95 204.72,195.05 208.5,194 C208.5,194 208.5,194 208.5,194 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
+            <path d="M35.3289777,193.635841 C35.3289777,193.635841 82.5458318,209.484914 105.066994,208.643536 C127.588155,207.802158 166.326582,214.914724 208.465749,22.4456533" id="Path-747" stroke="#EE6B47" stroke-width="3" sketch:type="MSShapeGroup"></path>
+            <text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="17" y="212">0</tspan>
+            </text>
+            <text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="17" y="36">1</tspan>
+            </text>
+            <text id="-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="200" y="212">1</tspan>
+            </text>
+        </g>
+    </g>
+</svg>

5-animation/3-js-animation/bounce-inout.svg

@@ -1 +1,26 @@
-<svg width="234" height="240" viewBox="0 0 234 240" xmlns="http://www.w3.org/2000/svg"><title>bounce-inout.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M34 209.5V22.16" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M34 22.5l-3 10.8h6l-3-10.8z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M24.5 194h184.01" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M208.5 194l-10.8-3v6l10.8-3z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M35.33 193.636s5.903-6.54 16.903 0c3.208-9.976 18.818-15.53 28.536 0 8.262-26.015 36.23-83.184 63.41.916 3.883-17.966 30.856-183.91 64.285-172.106" stroke="#EE6B47" stroke-width="3" stroke-linejoin="bevel"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="212">0</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="36">1</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="200" y="212">1</tspan></text><path d="M35.484 192.777c17.973-6.6 33.865-22.65 61.654-174.28 4.913 13.936 14.875 44.583 29.92 45.5 15.047.917 29.503-32.95 33.164-43.662 6.397 7.86 4.89 11.09 14.736 11.09 9.847 0 15.39-9.552 16.623-10.805 2.207 1.977 10.598 3.784 15.38.83" stroke="#62C0DC" stroke-width="3" stroke-linejoin="bevel"/></g></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="234px" height="240px" viewBox="0 0 234 240" 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>bounce-inout.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="bounce-inout.svg" sketch:type="MSArtboardGroup">
+            <path d="M34,209.5 L34,22.1600037" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+            <path id="Line-decoration-1" d="M34,22.5 C32.95,26.28 32.05,29.52 31,33.3 C33.1,33.3 34.9,33.3 37,33.3 C35.95,29.52 35.05,26.28 34,22.5 C34,22.5 34,22.5 34,22.5 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
+            <path d="M24.5,194 L208.509995,194" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+            <path id="Line-decoration-1" d="M208.5,194 C204.72,192.95 201.48,192.05 197.7,191 C197.7,193.1 197.7,194.9 197.7,197 C201.48,195.95 204.72,195.05 208.5,194 C208.5,194 208.5,194 208.5,194 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
+            <path d="M35.3289777,193.635841 C35.3289777,193.635841 41.2333124,187.095281 52.2325098,193.635839 C55.4414764,183.659866 71.0514816,178.107189 80.7686063,193.635839 C89.032676,167.620814 117,110.452183 144.182478,194.552328 C148.063747,176.586161 175.037321,10.6423763 208.465749,22.4456533" id="Path-747" stroke="#EE6B47" stroke-width="3" stroke-linejoin="bevel" sketch:type="MSShapeGroup"></path>
+            <text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="17" y="212">0</tspan>
+            </text>
+            <text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="17" y="36">1</tspan>
+            </text>
+            <text id="-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="200" y="212">1</tspan>
+            </text>
+            <path d="M35.4840461,192.776816 C53.45735,186.177656 69.3490979,170.128038 97.137513,18.4980531 C102.051415,32.4334475 112.013077,63.0795933 127.058929,63.996791 C142.104781,64.9139886 156.560556,31.0473534 160.222221,20.3348259 C166.618848,28.1959597 165.111566,31.4251632 174.958382,31.425163 C184.805198,31.4251628 190.347191,21.8729943 191.581215,20.6199652 C193.7855,22.5969315 202.177314,24.4036062 206.959731,21.4508296" id="Path-770" stroke="#62C0DC" stroke-width="3" stroke-linejoin="bevel" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>

5-animation/3-js-animation/circ-ease.svg

@@ -1 +1,27 @@
-<svg width="234" height="240" viewBox="0 0 234 240" xmlns="http://www.w3.org/2000/svg"><title>circ-ease.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M34 209.5V22.16" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M34 22.5l-3 10.8h6l-3-10.8z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M24.5 194h184.01" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M208.5 194l-10.8-3v6l10.8-3z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M35.16 193.735c81.198 0 165.415-52.198 173.306-171.29" stroke="#EE6B47" stroke-width="3" stroke-linejoin="bevel"/><path d="M208.466 22.445c-81.198 0-165.415 52.198-173.306 171.29" stroke="#8DB173" stroke-width="3" stroke-linejoin="bevel"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="212">0</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="36">1</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="200" y="212">1</tspan></text><path d="M35.484 192.777c17.973-6.6 76.57 2.817 85.738-83.32 9.17-86.135 80.955-85.053 85.738-88.006" stroke="#62C0DC" stroke-width="3" stroke-linejoin="bevel"/></g></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="234px" height="240px" viewBox="0 0 234 240" 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>circ-ease.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="circ-ease.svg" sketch:type="MSArtboardGroup">
+            <path d="M34,209.5 L34,22.1600037" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+            <path id="Line-decoration-1" d="M34,22.5 C32.95,26.28 32.05,29.52 31,33.3 C33.1,33.3 34.9,33.3 37,33.3 C35.95,29.52 35.05,26.28 34,22.5 C34,22.5 34,22.5 34,22.5 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
+            <path d="M24.5,194 L208.509995,194" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+            <path id="Line-decoration-1" d="M208.5,194 C204.72,192.95 201.48,192.05 197.7,191 C197.7,193.1 197.7,194.9 197.7,197 C201.48,195.95 204.72,195.05 208.5,194 C208.5,194 208.5,194 208.5,194 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
+            <path d="M35.1598321,193.734972 C116.357678,193.734973 200.574538,141.537458 208.465749,22.4456533" id="Path-747" stroke="#EE6B47" stroke-width="3" stroke-linejoin="bevel" sketch:type="MSShapeGroup"></path>
+            <path d="M35.1598321,193.734972 C116.357678,193.734973 200.574538,141.537458 208.465749,22.4456533" id="Path-748" stroke="#8DB173" stroke-width="3" stroke-linejoin="bevel" sketch:type="MSShapeGroup" transform="translate(121.812790, 108.090312) scale(-1, -1) translate(-121.812790, -108.090312) "></path>
+            <text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="17" y="212">0</tspan>
+            </text>
+            <text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="17" y="36">1</tspan>
+            </text>
+            <text id="-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="200" y="212">1</tspan>
+            </text>
+            <path d="M35.4840461,192.776816 C53.45735,186.177656 112.052703,195.594079 121.221885,109.458253 C130.391067,23.3224269 202.177314,24.4036062 206.959731,21.4508296" id="Path-770" stroke="#62C0DC" stroke-width="3" stroke-linejoin="bevel" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>

5-animation/3-js-animation/circ.svg

@@ -1 +1,25 @@
-<svg width="234" height="240" viewBox="0 0 234 240" xmlns="http://www.w3.org/2000/svg"><title>circ.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M34 209.5V22.16" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M34 22.5l-3 10.8h6l-3-10.8z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M24.5 194h184.01" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M208.5 194l-10.8-3v6l10.8-3z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M35.33 193.636s154.545 3.372 173.136-171.19" stroke="#EE6B47" stroke-width="3"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="212">0</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="36">1</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="200" y="212">1</tspan></text></g></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="234px" height="240px" viewBox="0 0 234 240" 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>circ.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="circ.svg" sketch:type="MSArtboardGroup">
+            <path d="M34,209.5 L34,22.1600037" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+            <path id="Line-decoration-1" d="M34,22.5 C32.95,26.28 32.05,29.52 31,33.3 C33.1,33.3 34.9,33.3 37,33.3 C35.95,29.52 35.05,26.28 34,22.5 C34,22.5 34,22.5 34,22.5 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
+            <path d="M24.5,194 L208.509995,194" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+            <path id="Line-decoration-1" d="M208.5,194 C204.72,192.95 201.48,192.05 197.7,191 C197.7,193.1 197.7,194.9 197.7,197 C201.48,195.95 204.72,195.05 208.5,194 C208.5,194 208.5,194 208.5,194 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
+            <path d="M35.3289777,193.635841 C35.3289777,193.635841 189.874769,197.008001 208.465749,22.4456533" id="Path-747" stroke="#EE6B47" stroke-width="3" sketch:type="MSShapeGroup"></path>
+            <text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="17" y="212">0</tspan>
+            </text>
+            <text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="17" y="36">1</tspan>
+            </text>
+            <text id="-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="200" y="212">1</tspan>
+            </text>
+        </g>
+    </g>
+</svg>

5-animation/3-js-animation/elastic.svg

@@ -1 +1,25 @@
-<svg width="233" height="388" viewBox="0 0 233 388" xmlns="http://www.w3.org/2000/svg"><title>elastic.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M34 365V22.16" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M34 23l-3 10.8h6L34 23z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M24.5 194h184.01" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M208.5 194l-10.8-3v6l10.8-3z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M34.88 192.698c3.442 0 11.656-1.502 18.614.34 8.527 2.258 8.02-3.415 33.52 1.3 13.1 2.424 13.41-10.73 28.147.562 20.16 15.445 18.718-35.537 33.36-.222 3.42 8.25 6.88 22.6 10.134 19.61 2.91-2.677 5.195-19.38 14.577-64.113 4.61-21.984 15.004 146.122 19.118 130.36 9.62-36.844 11.21-241.394 14.99-258.44" stroke="#EE6B47" stroke-width="3"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="212">0</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="36">1</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="200" y="212">1</tspan></text></g></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="233px" height="388px" viewBox="0 0 233 388" 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>elastic.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="elastic.svg" sketch:type="MSArtboardGroup">
+            <path d="M34,365 L34,22.1600037" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+            <path id="Line-decoration-1" d="M34,23 C32.95,26.78 32.05,30.02 31,33.8 C33.1,33.8 34.9,33.8 37,33.8 C35.95,30.02 35.05,26.78 34,23 C34,23 34,23 34,23 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
+            <path d="M24.5,194 L208.509995,194" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+            <path id="Line-decoration-1" d="M208.5,194 C204.72,192.95 201.48,192.05 197.7,191 C197.7,193.1 197.7,194.9 197.7,197 C201.48,195.95 204.72,195.05 208.5,194 C208.5,194 208.5,194 208.5,194 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
+            <path d="M34.8792035,192.69782 C38.3217915,192.697818 46.5362784,191.195974 53.4936997,193.038137 C62.0206897,195.295885 61.5154635,189.622956 87.0139157,194.339254 C100.114357,196.762365 100.423927,183.608251 115.161483,194.900075 C135.318831,210.34451 133.877092,159.362737 148.519851,194.677907 C151.940119,202.926853 155.398942,217.279032 158.65332,214.286779 C161.563227,211.611251 163.848094,194.907207 173.23036,150.175435 C177.841468,128.191083 188.232669,296.296579 192.347319,280.535848 C201.966406,243.690946 203.555755,39.1411041 207.337233,22.0938619" id="Path-747" stroke="#EE6B47" stroke-width="3" sketch:type="MSShapeGroup"></path>
+            <text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="17" y="212">0</tspan>
+            </text>
+            <text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="17" y="36">1</tspan>
+            </text>
+            <text id="-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="200" y="212">1</tspan>
+            </text>
+        </g>
+    </g>
+</svg>

5-animation/3-js-animation/linear.svg

@@ -1 +1,25 @@
-<svg width="234" height="240" viewBox="0 0 234 240" xmlns="http://www.w3.org/2000/svg"><title>linear.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M34 209.5V22.16" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M34 22.5l-3 10.8h6l-3-10.8z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M24.5 194h184.01" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M208.5 194l-10.8-3v6l10.8-3z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M35.33 193.636L207.336 22.094" stroke="#EE6B47" stroke-width="3"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="212">0</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="36">1</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="200" y="212">1</tspan></text></g></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="234px" height="240px" viewBox="0 0 234 240" 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>linear.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="linear.svg" sketch:type="MSArtboardGroup">
+            <path d="M34,209.5 L34,22.1600037" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+            <path id="Line-decoration-1" d="M34,22.5 C32.95,26.28 32.05,29.52 31,33.3 C33.1,33.3 34.9,33.3 37,33.3 C35.95,29.52 35.05,26.28 34,22.5 C34,22.5 34,22.5 34,22.5 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
+            <path d="M24.5,194 L208.509995,194" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+            <path id="Line-decoration-1" d="M208.5,194 C204.72,192.95 201.48,192.05 197.7,191 C197.7,193.1 197.7,194.9 197.7,197 C201.48,195.95 204.72,195.05 208.5,194 C208.5,194 208.5,194 208.5,194 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
+            <path d="M35.3289777,193.635841 L207.337233,22.0938619" id="Path-747" stroke="#EE6B47" stroke-width="3" sketch:type="MSShapeGroup"></path>
+            <text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="17" y="212">0</tspan>
+            </text>
+            <text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="17" y="36">1</tspan>
+            </text>
+            <text id="-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="200" y="212">1</tspan>
+            </text>
+        </g>
+    </g>
+</svg>

5-animation/3-js-animation/quad.svg

@@ -1 +1,25 @@
-<svg width="234" height="240" viewBox="0 0 234 240" xmlns="http://www.w3.org/2000/svg"><title>quad.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M34 209.5V22.16" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M34 22.5l-3 10.8h6l-3-10.8z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M24.5 194h184.01" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M208.5 194l-10.8-3v6l10.8-3z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M35.33 193.636s78.473 15.205 172.007-171.542" stroke="#EE6B47" stroke-width="3"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="212">0</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="36">1</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="200" y="212">1</tspan></text></g></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="234px" height="240px" viewBox="0 0 234 240" 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>quad.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="quad.svg" sketch:type="MSArtboardGroup">
+            <path d="M34,209.5 L34,22.1600037" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+            <path id="Line-decoration-1" d="M34,22.5 C32.95,26.28 32.05,29.52 31,33.3 C33.1,33.3 34.9,33.3 37,33.3 C35.95,29.52 35.05,26.28 34,22.5 C34,22.5 34,22.5 34,22.5 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
+            <path d="M24.5,194 L208.509995,194" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+            <path id="Line-decoration-1" d="M208.5,194 C204.72,192.95 201.48,192.05 197.7,191 C197.7,193.1 197.7,194.9 197.7,197 C201.48,195.95 204.72,195.05 208.5,194 C208.5,194 208.5,194 208.5,194 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
+            <path d="M35.3289777,193.635841 C35.3289777,193.635841 113.802694,208.841146 207.337233,22.0938619" id="Path-747" stroke="#EE6B47" stroke-width="3" sketch:type="MSShapeGroup"></path>
+            <text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="17" y="212">0</tspan>
+            </text>
+            <text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="17" y="36">1</tspan>
+            </text>
+            <text id="-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="200" y="212">1</tspan>
+            </text>
+        </g>
+    </g>
+</svg>

5-animation/3-js-animation/quint.svg

@@ -1 +1,25 @@
-<svg width="234" height="240" viewBox="0 0 234 240" xmlns="http://www.w3.org/2000/svg"><title>quint.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M34 209.5V22.16" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M34 22.5l-3 10.8h6l-3-10.8z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M24.5 194h184.01" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M208.5 194l-10.8-3v6l10.8-3z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M35.33 193.636c114.13 3.248 136.032-9.36 172.007-171.542" stroke="#EE6B47" stroke-width="3"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="212">0</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="36">1</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="200" y="212">1</tspan></text></g></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="234px" height="240px" viewBox="0 0 234 240" 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>quint.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="quint.svg" sketch:type="MSArtboardGroup">
+            <path d="M34,209.5 L34,22.1600037" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+            <path id="Line-decoration-1" d="M34,22.5 C32.95,26.28 32.05,29.52 31,33.3 C33.1,33.3 34.9,33.3 37,33.3 C35.95,29.52 35.05,26.28 34,22.5 C34,22.5 34,22.5 34,22.5 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
+            <path d="M24.5,194 L208.509995,194" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+            <path id="Line-decoration-1" d="M208.5,194 C204.72,192.95 201.48,192.05 197.7,191 C197.7,193.1 197.7,194.9 197.7,197 C201.48,195.95 204.72,195.05 208.5,194 C208.5,194 208.5,194 208.5,194 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
+            <path d="M35.3289777,193.635841 C149.458906,196.88389 171.361738,184.274633 207.337233,22.0938619" id="Path-747" stroke="#EE6B47" stroke-width="3" sketch:type="MSShapeGroup"></path>
+            <text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="17" y="212">0</tspan>
+            </text>
+            <text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="17" y="36">1</tspan>
+            </text>
+            <text id="-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
+                <tspan x="200" y="212">1</tspan>
+            </text>
+        </g>
+    </g>
+</svg>