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

renovation

Browse source
This commit is contained in:
Ilya Kantor 2015-03-05 19:14:51 +03:00
parent 951cf3f2ec
commit 2022aafc13
72 changed files with 98 additions and 1411 deletions
Download patch file Download diff file Expand all files Collapse all files

94
1-js/1-getting-started/1-intro/limitations.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Before After
Before After

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

@ -1,38 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <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>
<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>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

Before After
Before After

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

@ -1,27 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <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>
<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>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 949 B

Before After
Before After

2
1-js/3-writing-js/1-debugging-chrome/statusbarButtonGlyphs.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Before After
Before After

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

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 82 KiB

After

Width:  |  Height:  |  Size: 75 KiB

Before After
Before After

33
1-js/3-writing-js/2-coding-style/figure-bracket-style.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 46 KiB

Before After
Before After

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

@ -1,65 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <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>
<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>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.8 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

Before After
Before After

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

@ -1,41 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <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>
<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>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

Before After
Before After

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

@ -1,48 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <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>
<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>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

Before After
Before After

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

@ -53,7 +53,7 @@ alert( str.indexOf(substr) ); // 2
Но это соответствие лишь кажущееся. Очень скоро мы усложним регулярные выражения, и тогда увидим, что они гораздо мощнее. Но это соответствие лишь кажущееся. Очень скоро мы усложним регулярные выражения, и тогда увидим, что они гораздо мощнее.
[smart header="Цветовые обозначения"] [smart header="Цветовые обозначения"]
Здесь и далее используется следующая цветовая схема: Здесь и далее в тексте используется следующая цветовая схема:
<ul> <ul>
<li>регэксп (регулярное выражение) - <code class="pattern">красный</code></li> <li>регэксп (регулярное выражение) - <code class="pattern">красный</code></li>
<li>строка - <code class="subject">синий</code></li> <li>строка - <code class="subject">синий</code></li>
@ -76,7 +76,7 @@ alert( str.indexOf(substr) ); // 2
<dd>Многострочный режим.</dd> <dd>Многострочный режим.</dd>
</dl> </dl>
Самый очевидный из этих флагов -- безусловно, `i`. Самый простой для понимания из этих флагов -- безусловно, `i`.
Пример его использования: Пример его использования:
@ -89,18 +89,16 @@ alert( str.search( *!*/ЛЮ/i*/!* ) ); // 2
``` ```
<ol> <ol>
<li>С регом `/ЛЮ/` вызов вернул `-1`, что означает "не найдено" (то же соглашение, что и `indexOf`),</li> <li>С регом <code class="pattern">/ЛЮ/</code> вызов вернул `-1`, что означает "не найдено" (как и в `indexOf`),</li>
<li>С регом `/ЛЮ/i` вызов нашёл совпадение на позиции 2, так как стоит флаг `i`, а значит "лю" тоже подходит.</li> <li>С регом <code class="pattern">/ЛЮ/i</code> вызов нашёл совпадение на позиции 2, так как стоит флаг `i`, а значит "лю" тоже подходит.</li>
</ol> </ol>
Следующий, пожалуй, самый важный флаг -- это `g`. Другие флаги мы рассмотрим в последующих главах.
Мы рассмотрим его в следующей секции, вместе с основными методами поиска по регулярным выражениям в JavaScript.
## Итого ## Итого
<ul> <ul>
<li>Регулярное выражение состоит из шаблона и необязательных флагов `g`, `i` и `m`.</li> <li>Регулярное выражение состоит из шаблона и необязательных флагов `g`, `i` и `m`.</li>
<li>Поиск по регулярному выражению <code class="pattern">/регэксп/</code> без флагов и спец. символов, которые мы изучим далее -- это то же самое, что и обычный поиск подстроки в строке.</li> <li>Поиск по регулярному выражению без флагов и спец. символов, которые мы изучим далее -- это то же самое, что и обычный поиск подстроки в строке. Но флаги и спец. символы, как мы увидим далее, могут сделать его гораздо мощнее.</li>
<li>Метод строки `str.search(regexp)` возвращает индекс, на котором найдено совпадение.</li> <li>Метод строки `str.search(regexp)` возвращает индекс, на котором найдено совпадение.</li>
</ul> </ul>

BIN
10-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/bad_backtrack_greedy1.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

Before After
Before After

BIN
10-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/bad_backtrack_greedy2.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Before After
Before After

BIN
10-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/bad_backtrack_greedy3.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Before After
Before After

BIN
10-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/bad_backtrack_greedy4.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

Before After
Before After

BIN
10-regular-expressions-javascript/11-regexp-infinite-backtracking-problem/bad_backtrack_greedy5.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Before After
Before After

BIN
10-regular-expressions-javascript/15-regexp-word-boundary/boundary2.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Before After
Before After

BIN
10-regular-expressions-javascript/15-regexp-word-boundary/boundary3.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

Before After
Before After

BIN
10-regular-expressions-javascript/15-regexp-word-boundary/boundary4.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Before After
Before After

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

@ -1,14 +1,14 @@
# Методы RegExp и String # Методы RegExp и String
В JavaScript методы для работы с регулярными выражениями есть в классе `RegExp`, а также встроены в обычные строки `String` Регулярные выражения в JavaScript являются объектами класса [RegExp](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp).
Всего этих методов немного, поэтому мы сначала рассмотрим их по отдельности, а затем -- рецепты по решению стандартных задач с ними. Кроме того, методы для поиска по регулярным выражениям встроены прямо в обычные строки `String`.
К сожалению, общая структура встроенных методов слегка запутана, поэтому мы сначала рассмотрим их по отдельности, а затем -- рецепты по решению стандартных задач с ними.
[cut] [cut]
## Методы строк ## str.search(regexp)
### str.search(regexp)
Этот метод мы уже видели. Этот метод мы уже видели.
@ -25,7 +25,7 @@ alert( str.search( *!*/лю/i*/!* ) ); // 0
Нельзя заставить `search` искать дальше первого совпадения, такой синтаксис попросту не предусмотрен. Но есть другие методы, которые это умеют. Нельзя заставить `search` искать дальше первого совпадения, такой синтаксис попросту не предусмотрен. Но есть другие методы, которые это умеют.
### str.match(regexp) без флага g, скобочные выражения ## str.match(regexp) без флага g
Метод `str.match` работает по-разному, в зависимости от наличия или отсутствия флага `g`, поэтому сначала мы разберём вариант, когда его нет. Метод `str.match` работает по-разному, в зависимости от наличия или отсутствия флага `g`, поэтому сначала мы разберём вариант, когда его нет.
@ -43,7 +43,7 @@ var result = str.match( *!*/ой/i*/!* );
alert( result[0] ); // ОЙ (совпадение) alert( result[0] ); // ОЙ (совпадение)
alert( result.index ); // 0 (позиция) alert( result.index ); // 0 (позиция)
alert( result.input ); // ОЙ-Ой-ой (поисковая строка) alert( result.input ); // ОЙ-Ой-ой (вся поисковая строка)
``` ```
У этого массива не всегда только один элемент. У этого массива не всегда только один элемент.
@ -60,12 +60,15 @@ var result = str.match( *!*/JAVA(SCRIPT)/i*/!* );
alert( result[0] ); // javascript (всё совпадение полностью) alert( result[0] ); // javascript (всё совпадение полностью)
alert( result[1] ); // script (часть совпадения, соответствующая скобкам) alert( result[1] ); // script (часть совпадения, соответствующая скобкам)
// также есть свойства result.index, result.input alert( result.index ); // 0
alert( result.input ); // javascript - это такой язык
``` ```
Благодаря флагу `i` поиск не обращает внимание на регистр буквы, поэтому находит <code class="match">javascript</code>. При этом часть строки, соответствующая <code class="pattern">SCRIPT</code>, выделена в отдельный элемент массива. Позже мы используем это для поиска с заменой. Благодаря флагу `i` поиск не обращает внимание на регистр буквы, поэтому находит <code class="match">javascript</code>. При этом часть строки, соответствующая <code class="pattern">SCRIPT</code>, выделена в отдельный элемент массива.
### str.match(regexp) с флагом g Позже мы ещё вернёмся к скобочным выражениям, они особенно удобны для поиска с заменой.
## str.match(regexp) с флагом g
При наличии флага `g`, вызов `match` возвращает обычный массив из всех совпадений. При наличии флага `g`, вызов `match` возвращает обычный массив из всех совпадений.
@ -97,8 +100,7 @@ alert( result.index ); // undefined
Из последнего примера видно, что элемент в массиве ровно один, и свойства `index` также нет. Такова особенность глобального поиска при помощи `match` -- он просто возвращает все совпадения. Из последнего примера видно, что элемент в массиве ровно один, и свойства `index` также нет. Такова особенность глобального поиска при помощи `match` -- он просто возвращает все совпадения.
Для расширенного глобального поиска, который позволит получить все позиции и, при желании, скобки, нужно использовать метод [:RegExp#exec], которые будет рассмотрен далее. Для расширенного глобального поиска, который позволит получить все позиции и, при желании, скобки, нужно использовать метод [RegExp#exec](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec), которые будет рассмотрен далее.
[warn header="В случае, если совпадений не было, `match` возвращает `null`"] [warn header="В случае, если совпадений не было, `match` возвращает `null`"]
Обратите внимание, это важно -- если `match` не нашёл совпадений, он возвращает не пустой массив, а именно `null`. Обратите внимание, это важно -- если `match` не нашёл совпадений, он возвращает не пустой массив, а именно `null`.
@ -109,12 +111,12 @@ alert( result.index ); // undefined
//+ run //+ run
var str = "Ой-йой-йой"; var str = "Ой-йой-йой";
// результат match не всегда массив!
alert( str.match( /лю/gi ).length ) // ошибка! нет свойства length у null alert( str.match( /лю/gi ).length ) // ошибка! нет свойства length у null
``` ```
[/warn] [/warn]
### str.split(regexp|substr, limit) ## str.split(regexp|substr, limit)
Разбивает строку в массив по разделителю -- регулярному выражению `regexp` или подстроке `substr`. Разбивает строку в массив по разделителю -- регулярному выражению `regexp` или подстроке `substr`.
@ -134,7 +136,7 @@ alert( '12-34-56'.split('-') ) // [12, 34, 56]
alert( '12-34-56'.split(/-/) ) // [12, 34, 56] alert( '12-34-56'.split(/-/) ) // [12, 34, 56]
``` ```
### str.replace(regexp, newSubStr|function) ## str.replace(regexp, newStr|function)
Швейцарский нож для работы со строками, поиска и замены любого уровня сложности. Швейцарский нож для работы со строками, поиска и замены любого уровня сложности.
@ -143,12 +145,12 @@ alert( '12-34-56'.split(/-/) ) // [12, 34, 56]
```js ```js
//+ run //+ run
// заменить дефис на двоеточие // заменить дефис на двоеточие
alert( '12-34-56'.replace("-", ":" ) ) // 12:34-56 alert( '12-34-56'.replace("-", ":") ) // 12:34-56
``` ```
При вызове со строкой замены `replace` всегда заменяет только первое совпадение. **При вызове со строкой замены `replace` всегда заменяет только первое совпадение.**
**Чтобы заменить *все* совпадения, нужно использовать для поиска не строку `"-"`, а регулярное выражение <code class="pattern">/-/g</code>, причём обязательно с флагом `g`:** Чтобы заменить *все* совпадения, нужно использовать для поиска не строку `"-"`, а регулярное выражение <code class="pattern">/-/g</code>, причём обязательно с флагом `g`:
```js ```js
//+ run //+ run
@ -218,19 +220,23 @@ alert( str.replace( /Василий Пупкин/ ,'Великий $&!') ) // В
var i = 0; var i = 0;
// заменить каждое вхождение "ой" на результат вызова функции // заменить каждое вхождение "ой" на результат вызова функции
alert( "ОЙ-Ой-ой".replace( /ой/gi, function() { return ++i; }) ); // 1-2-3 alert( "ОЙ-Ой-ой".replace( /ой/gi, function() {
return ++i;
}) ); // 1-2-3
``` ```
Эта функция также получает аргументы: В примере выше функция просто возвращала числа по очереди, но обычно она основывается на поисковых данных.
Эта функция получает следующие аргументы:
<ol> <ol>
<li>`str` -- найденное совпадение,</li> <li>`str` -- найденное совпадение,</li>
<li>`p1, p2, ..., pn` -- содержимое скобок</li> <li>`p1, p2, ..., pn` -- содержимое скобок (если есть),</li>
<li>`offset` -- позиция, на которой найдено совпадение</li> <li>`offset` -- позиция, на которой найдено совпадение,</li>
<li>`s` -- исходная строка</li> <li>`s` -- исходная строка.</li>
</ol> </ol>
Если скобок в регулярном выражении нет, то у функции всегда будет ровно 3 аргумента. Если скобок в регулярном выражении нет, то у функции всегда будет ровно 3 аргумента: `replacer(str, offset, s)`.
Используем это, чтобы вывести полную информацию о совпадениях: Используем это, чтобы вывести полную информацию о совпадениях:
@ -239,35 +245,31 @@ alert( "ОЙ-Ой-ой".replace( /ой/gi, function() { return ++i; }) ); // 1-2
// вывести и заменить все совпадения // вывести и заменить все совпадения
function replacer(str, offset, s) { function replacer(str, offset, s) {
alert("Найдено: " + str + " на позиции: " + offset + " в строке: " + s); alert("Найдено: " + str + " на позиции: " + offset + " в строке: " + s);
return ":" return str.toLowerCase();
} }
var result = "ОЙ-Ой-ой".replace( /ой/gi, replacer); var result = "ОЙ-Ой-ой".replace( /ой/gi, replacer);
alert('Результат: ' + result); alert('Результат: ' + result); // Результат: ой-ой-ой
``` ```
Со скобочными выражениями: С двумя скобочными выражениями -- аргументов уже 5:
```js ```js
//+ run //+ run
function replacer(str, name, surname, offset, s) { function replacer(str, name, surname, offset, s) {
return surname +", " + name; return surname + ", " + name;
} }
alert( str.replace( /(Василий) (Пупкин)/ , replacer) ) // Пупкин, Василий alert( str.replace( /(Василий) (Пупкин)/ , replacer) ) // Пупкин, Василий
``` ```
Функция для замены -- это самое мощное средство, какое только может быть. Она владеет всей информацией о совпадении и имеет доступ к замыканию, поэтому может всё. Функция -- это самый мощный инструмент для замены, какой только может быть. Она владеет всей информацией о совпадении и имеет доступ к замыканию, поэтому может всё.
## Методы объектов RegExp ## regexp.test(str)
Регэкспы являются объектами класса [:RegExp]. Теперь переходим к методам класса `RegExp`.
У них есть два основных метода. Метод `test` проверяет, есть ли хоть одно совпадение в строке `str`. Возвращает `true/false`.
### regexp.test(str)
Проверяет, есть ли хоть одно совпадение в строке `str`. Возвращает `true/false`.
Работает, по сути, так же, как и проверка `str.search(regexp) != -1`, например: Работает, по сути, так же, как и проверка `str.search(regexp) != -1`, например:
@ -275,6 +277,7 @@ alert( str.replace( /(Василий) (Пупкин)/ , replacer) ) // Пупк
//+ run //+ run
var str = "Люблю регэкспы я, но странною любовью"; var str = "Люблю регэкспы я, но странною любовью";
// эти две проверки идентичны
alert( *!*/лю/i*/!*.test(str) ) // true alert( *!*/лю/i*/!*.test(str) ) // true
alert( str.search(*!*/лю/i*/!*) != -1 ) // true alert( str.search(*!*/лю/i*/!*) != -1 ) // true
``` ```
@ -289,9 +292,16 @@ alert( *!*/javascript/i*/!*.test(str) ) // false
alert( str.search(*!*/javascript/i*/!*) != -1 ) // false alert( str.search(*!*/javascript/i*/!*) != -1 ) // false
``` ```
### regexp.exec(str) ## regexp.exec(str)
Этот метод -- самое мощное, что только есть для поиска с использованием регулярных выражений. Для поиска мы уже видели методы:
<ul>
<li>`search` -- ищет индекс</li>
<li>`match` -- если регэксп без флага `g` -- ищет совпадение с подрезультатами в скобках</li>
<li>`match` -- если регэксп с флагом `g` -- ищет все совпадения, но без скобочных групп.</li>
</ul>
Метод `regexp.exec` дополняет их. Он позволяет искать и все совпадения и скобочные группы в них.
Он ведёт себя по-разному, в зависимости от того, есть ли у регэкспа флаг `g`. Он ведёт себя по-разному, в зависимости от того, есть ли у регэкспа флаг `g`.
@ -300,7 +310,7 @@ alert( str.search(*!*/javascript/i*/!*) != -1 ) // false
<li>Если флаг `g` есть, то вызов `regexp.exec` возвращает первое совпадение и *запоминает* его позицию в свойстве `regexp.lastIndex`. Последующий поиск он начнёт уже с этой позиции. Если совпадений не найдено, то сбрасывает `regexp.lastIndex` в ноль.</li> <li>Если флаг `g` есть, то вызов `regexp.exec` возвращает первое совпадение и *запоминает* его позицию в свойстве `regexp.lastIndex`. Последующий поиск он начнёт уже с этой позиции. Если совпадений не найдено, то сбрасывает `regexp.lastIndex` в ноль.</li>
</ul> </ul>
Второй вариант запуска обычно используют в цикле: Это используют для поиска всех совпадений в цикле:
```js ```js
//+ run //+ run
@ -323,7 +333,7 @@ alert('Конечное значение lastIndex: ' + regexp.lastIndex);
Найденные результаты последовательно помещаются в `result`, причём находятся там в том же формате, что и `match` -- с учётом скобок, со свойствами `result.index` и `result.input`. Найденные результаты последовательно помещаются в `result`, причём находятся там в том же формате, что и `match` -- с учётом скобок, со свойствами `result.index` и `result.input`.
[smart header="Поиск с нужной позиции"] [smart header="Поиск с нужной позиции"]
Технически, можно заставить `regexp.exec` искать сразу с нужной позиции, если поставить `lastIndex` вручную: Можно заставить `regexp.exec` искать сразу с нужной позиции, если поставить `lastIndex` вручную:
```js ```js
//+ run //+ run
@ -334,7 +344,6 @@ regexp.lastIndex = 40;
alert( regexp.exec(str).index ); // 49, поиск начат с 40й позиции alert( regexp.exec(str).index ); // 49, поиск начат с 40й позиции
``` ```
[/smart] [/smart]
## Итого, рецепты ## Итого, рецепты
@ -372,5 +381,5 @@ alert( regexp.exec(str).index ); // 49, поиск начат с 40й позиц
</li> </li>
</ul> </ul>
Далее мы перейдём к более подробному изучению синтаксиса регулярных выражений. Теперь, зная общие методы, мы можем перейти к более подробному изучению синтаксиса регулярных выражений.

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

@ -1,4 +1,4 @@
# Символьные классы # Символьные классы [todo]
Рассмотрим задачу -- есть телефонный номер `"+7(903)-123-45-67"`, и нам нужно найти в этой строке цифры, а остальные символы нас не интересуют. Рассмотрим задачу -- есть телефонный номер `"+7(903)-123-45-67"`, и нам нужно найти в этой строке цифры, а остальные символы нас не интересуют.

BIN
10-regular-expressions-javascript/9-regexp-groups/groups.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Before After
Before After

BIN
11-tools/1-tools-browser-extensions/webdeveloper.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

Before After
Before After

BIN
11-tools/2-fiddler/fiddler.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Before After
Before After

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

@ -1,40 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <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>
<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>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Before After
Before After

BIN
12-css-for-js/17-css-sprite/sprites-example.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

Before After
Before After

BIN
12-css-for-js/4-float/text.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 76 KiB

Before After
Before After

2
2-ui/1-document/5-searching-elements-dom/1-find-elements/table.html
View file

@ -14,7 +14,7 @@
<form name="search-person"> <form name="search-person">
Поиск по посетителям: Поиск по посетителям:
<table id="table"> <table id="age-table">
<tr> <tr>
<td>Возраст:</td> <td>Возраст:</td>
<td id="age-list"> <td id="age-list">

BIN
3-webcomponents/1-webcomponents-intro/twitter-components.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 73 KiB

Before After
Before After

BIN
3-webcomponents/3-shadow-dom/shadow-content.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6 KiB

After

Width:  |  Height:  |  Size: 6 KiB

Before After
Before After

BIN
3-webcomponents/3-shadow-dom/shadow-content@2x.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Before After
Before After

BIN
3-webcomponents/3-shadow-dom/shadow-dom-chrome.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Before After
Before After

BIN
3-webcomponents/3-shadow-dom/shadow-dom-chrome@2x.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

Before After
Before After

BIN
4-ajax/1-ajax-intro/suggest.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

Before After
Before After

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

@ -1,50 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <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>
<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>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Before After
Before After

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

@ -1,67 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <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>
<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>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Before After
Before After

BIN
4-ajax/8-xhr-longpoll/longpoll.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Before After
Before After

33
5-animation/1-bezier/bezier-car.svg
View file

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

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

Before After
Before After

51
5-animation/1-bezier/bezier-letter.svg
View file

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

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 2 KiB

Before After
Before After

50
5-animation/1-bezier/bezier-vase.svg
View file

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

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

Before After
Before After

21
5-animation/1-bezier/bezier2.svg
View file

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

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 632 B

Before After
Before After

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

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

Before After
Before After

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

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

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Before After
Before After

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

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

Before

Width:  |  Height:  |  Size: 2 KiB

After

Width:  |  Height:  |  Size: 880 B

Before After
Before After

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

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

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 829 B

Before After
Before After

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

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

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

Before After
Before After

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

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

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1,006 B

Before After
Before After

2
5-animation/1-bezier/demo.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 6.8 KiB

Before After
Before After

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

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Before After
Before After

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

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Before After
Before After

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

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

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 632 B

Before After
Before After

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

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

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Before After
Before After

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

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

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

Before After
Before After

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

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

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1,006 B

Before After
Before After

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

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

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 989 B

Before After
Before After

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

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

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 1 KiB

Before After
Before After

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

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

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

Before After
Before After

26
5-animation/3-js-animation/back.svg
View file

@ -1,25 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <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>
<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>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1 KiB

Before After
Before After

21
5-animation/3-js-animation/bezier-linear.svg
View file

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

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 632 B

Before After
Before After

27
5-animation/3-js-animation/bounce-inout.svg
View file

@ -1,26 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <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>
<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>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Before After
Before After

28
5-animation/3-js-animation/circ-ease.svg
View file

@ -1,27 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <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>
<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>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

Before After
Before After

26
5-animation/3-js-animation/circ.svg
View file

@ -1,25 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <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>
<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>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 999 B

Before After
Before After

26
5-animation/3-js-animation/elastic.svg
View file

@ -1,25 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <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>
<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>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

Before After
Before After

26
5-animation/3-js-animation/linear.svg
View file

@ -1,25 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <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>
<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>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 987 B

Before After
Before After

26
5-animation/3-js-animation/quad.svg
View file

@ -1,25 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <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>
<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>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1,000 B

Before After
Before After

26
5-animation/3-js-animation/quint.svg
View file

@ -1,25 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <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>
<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>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1,013 B

Before After
Before After

BIN
6-optimize/1-memory-leaks/goodluck.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Before After
Before After

BIN
6-optimize/1-memory-leaks/ie1.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

Before After
Before After

BIN
6-optimize/1-memory-leaks/ie2.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

Before After
Before After

BIN
6-optimize/1-memory-leaks/ie9_disable2.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Before After
Before After

BIN
6-optimize/1-memory-leaks/xhr2.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

Before After
Before After

BIN
8-extra/1-memory-removechild-innerhtml/html-list.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

Before After
Before After

BIN
8-extra/10-cookie/safari-nocookie@2x.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 71 KiB

Before After
Before After