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

new figures export

Browse source
This commit is contained in:
Ilya Kantor 2015-02-01 14:45:01 +03:00
parent 3af3564921
commit a3492b1f58
60 changed files with 1424 additions and 349 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
1-js/4-data-structures/6-object-reference/object-reference-console.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Before After
Before After

28
1-js/4-data-structures/6-object-reference/variable-contains-reference.svg
View file

@ -1 +1,27 @@
<svg width="297" height="199" viewBox="0 0 297 199" xmlns="http://www.w3.org/2000/svg"><title>Slice 2</title><desc>Created with Sketch.</desc><g fill="none" fill-rule="evenodd"><path d="M43.5 141h102m-144 56.5l42-56m89 55l42-56M43.5 101h132m-174 56.5l42-56m89 56l42-56M43 141.5v-40" stroke="#979797" stroke-width="2" stroke-linecap="square"/><path stroke="#979797" stroke-width="2" fill="#E8E8E8" d="M63.865 95.022l54.504 58.42-18.32 17.09-54.508-58.42z"/><path d="M175 140v-38.5" stroke="#979797" stroke-width="2" stroke-linecap="square"/><path stroke="#979797" stroke-width="2" fill="#fff" d="M0 158h133v40H0z"/><g transform="translate(37 171)"><path stroke="#979797" fill="#fff" d="M0 0h63v16H0z"/><circle stroke="#979797" cx="3.5" cy="3.5" r="1.5"/><text font-family="Consolas" font-size="14" fill="#4990E2"><tspan x="15" y="12">user</tspan></text></g><path d="M292.738.354H189.265c-2.04 0-3.695.588-3.695 1.313v76.375c0 .725 1.654 1.312 3.695 1.312h103.473c2.04 0 3.695-.587 3.695-1.312V1.667c0-.725-1.654-1.313-3.695-1.313zM286.73 73h-91.46V6.88h91.46V73zM254.345 9.443h-3.765v5.524c0 .436-.543.79-1.212.79h-16.976c-.67 0-1.213-.354-1.213-.79V9.443h-3.528c-.668 0-1.208.35-1.208.782v7.904c0 .43.54.78 1.207.78h26.688c.667 0 1.21-.35 1.21-.78v-7.91c0-.434-.545-.784-1.21-.784z" fill="#000"/><text font-family="Open Sans" font-size="14" font-weight="bold" fill="#979797"><tspan x="218" y="49">name</tspan></text><path d="M126.932 68.668l3.752 6.77s-55.797 30.79-47.958 46.94c20.165-30.07 51.34-40.848 51.34-40.848l3.75 6.772 38.052-33.926-48.936 14.292zm6.17.24l2.914 5.254s-43.34 22.756-49.964 40.692C102.774 91.32 138.12 77.96 138.12 77.96l2.858 5.155 26.354-24.007-34.23 9.8z" fill="#000"/><path d="M88.476 126h-14.95c-.33 0-.526.14-.526.37v6.2c0 .232.197.37.525.37h14.95c.33 0 .525-.138.525-.37v-6.2c0-.23-.197-.37-.524-.37zm-.796.555l-6.81 3.795-6.693-3.795H87.68zm.27 5.83h-13.9c-.165 0-.263-.07-.263-.185v-5.17l7.082 3.967 7.34-4.113v5.316c0 .116-.1.186-.26.186z" fill="#010101"/></g></svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="337px" height="142px" viewBox="0 0 337 142" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="variable-contains-reference">
<g id="noun_1211_cc" transform="translate(12.000000, 12.000000)" fill="#E8C48F">
<path d="M17,28.1960457 L129.557785,28.1960457 L129.557785,71.1456641 C129.557785,71.5185728 129.479295,72.0083855 129.279367,72.4404861 C129.07944,72.8725868 112.704625,108 112.704625,108 L112.704625,53.6396695 L129.559266,28.1960457 L148,0 L35.4407339,0 L17,28.1960457 L17,28.1960457 Z" id="Shape"></path>
<path d="M17,57 L17,29 L2,57" id="Shape"></path>
<path d="M0,59 L0,113.729971 C0,117.150501 1.4836395,119 4.38712201,119 L104.473443,119 C107.59502,119 110,116.4521 110,115.524372 L110,59 L0,59 L0,59 Z" id="Shape"></path>
</g>
<text id="User" font-family="Open Sans" font-size="18" font-weight="526" fill="#FFFFFF">
<tspan x="47" y="108">User</tspan>
</text>
<path d="M222.26472,6.85877813 C220.22368,6.85877813 218.56952,7.93931813 218.56952,9.27257813 L218.56952,89.7362981 C218.56952,91.0695581 220.22368,92.1500981 222.26472,92.1500981 L325.73776,92.1500981 C327.7788,92.1500981 329.43296,91.0695581 329.43296,89.7362981 L329.43296,9.27257813 C329.43296,7.93931813 327.7788,6.85877813 325.73776,6.85877813 L222.26472,6.85877813 Z M319.7312,83.8850581 L228.2688,83.8850581 L228.2688,13.3850581 L319.7312,13.3850581 L319.7312,83.8850581 L319.7312,83.8850581 Z" id="Shape" fill="#E8C48F"></path>
<rect id="Rectangle-4" fill="#FFFFFF" x="116" y="46" width="44" height="6"></rect>
<path d="M123.854043,47.3219293 L137.633029,33.8463492 C139.246288,32.5716063 142.818195,29.4189579 141.204936,28.1444036 C139.591676,26.8689065 138.540503,27.6719962 136.929629,28.9474933 L118.43143,47.3219299 C116.818171,48.5966728 116.818171,50.1666601 118.43143,51.4412144 C118.43143,51.4412144 139.913731,71.5088763 141.204935,71.5088763 C144.209997,71.5088763 143.882164,69.6878208 142.268905,68.4132665 L123.854043,50.5870439 L158.842523,50.5870439 L182.224064,50.5870439 L201.028364,50.5870439 C203.308965,50.5870439 204.778514,50.8657087 204.778514,49.0625887 C204.778514,47.2594687 203.308964,47.3219293 201.028364,47.3219293 L123.854043,47.3219293 Z" id="Shape-3" fill="#EE6B47" transform="translate(161.000000, 49.504438) scale(-1, 1) translate(-161.000000, -49.504438) "></path>
<path d="M287.34488,15.9469781 L283.58024,15.9469781 L283.58024,21.4711781 C283.58024,21.9069581 283.03712,22.2601181 282.36752,22.2601181 L265.39192,22.2601181 C264.72232,22.2601181 264.1792,21.9069581 264.1792,21.4711781 L264.1792,15.9469781 L260.6576,15.9469781 C259.99048,15.9469781 259.44984,16.2968981 259.44984,16.7294381 L259.44984,24.6334181 C259.44984,25.0659581 259.99048,25.4158781 260.6576,25.4158781 L287.34488,25.4158781 C288.012,25.4158781 288.55264,25.0659581 288.55264,24.6334181 L288.55264,16.7294381 C288.55264,16.2968981 288.00952,15.9469781 287.34488,15.9469781 L287.34488,15.9469781 Z" id="Shape" fill="#E8C48F"></path>
<text id="name" font-family="Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="253.162109" y="57.0044381">name</tspan>
</text>
<g id="Rectangle-3-+-Shape" transform="translate(58.000000, 28.000000)">
<rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="47" height="37"></rect>
<path d="M44,33.7718421 L4,33.7718421 L4,4 L44,4 L44,33.7718421 L44,33.7718421 Z M8.7332,31.0177632 L39.2664,31.0177632 L29.2192,20.8671053 L27.3168,22.7567105 C26.4932,23.5690789 25.314,24.0340789 24.0748,24.0340789 C24.068,24.0340789 24.0608,24.0328947 24.054,24.0328947 C22.81,24.0277632 21.6272,23.5528947 20.808,22.7286842 L18.874,20.7964474 L8.7332,31.0177632 L8.7332,31.0177632 Z M6.7908,8.72618421 L6.7908,29.0397368 L16.9128,18.8381579 L6.7908,8.72618421 L6.7908,8.72618421 Z M31.1856,18.9131579 L41.2092,29.0385526 L41.2092,8.95434211 L31.1856,18.9131579 L31.1856,18.9131579 Z M8.7396,6.75486842 L22.7968,20.7968421 C23.1012,21.1023684 23.5632,21.2776316 24.0664,21.2788158 L24.0748,21.2788158 C24.5708,21.2788158 25.0432,21.1059211 25.3392,20.8122368 L39.4888,6.75486842 L8.7396,6.75486842 L8.7396,6.75486842 Z" id="Shape" fill="#EE6B47"></path>
</g>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2 KiB

After

Width:  |  Height:  |  Size: 4.5 KiB

Before After
Before After

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

@ -1 +1,47 @@
<svg width="501" height="199" viewBox="0 0 501 199" xmlns="http://www.w3.org/2000/svg"><title>Slice 1</title><desc>Created with Sketch.</desc><g fill="none" fill-rule="evenodd"><path d="M43.5 141h102m-144 56.5l42-56m89 55l42-56M43.5 101h132m-174 56.5l42-56m89 56l42-56M43 141.5v-40" stroke="#979797" stroke-width="2" stroke-linecap="square"/><path stroke="#979797" stroke-width="2" fill="#E8E8E8" d="M63.865 95.022l54.504 58.42-18.32 17.09-54.508-58.42z"/><path d="M175 140v-38.5" stroke="#979797" stroke-width="2" stroke-linecap="square"/><path stroke="#979797" stroke-width="2" fill="#fff" d="M0 158h133v40H0z"/><g transform="translate(37 171)"><path stroke="#979797" fill="#fff" d="M0 0h63v16H0z"/><circle stroke="#979797" cx="3.5" cy="3.5" r="1.5"/><text font-family="Consolas" font-size="14" fill="#4990E2"><tspan x="15" y="12">user</tspan></text></g><path d="M292.738.354H189.265c-2.04 0-3.695.588-3.695 1.313v76.375c0 .725 1.654 1.312 3.695 1.312h103.473c2.04 0 3.695-.587 3.695-1.312V1.667c0-.725-1.654-1.313-3.695-1.313zM286.73 73h-91.46V6.88h91.46V73zM254.345 9.443h-3.765v5.524c0 .436-.543.79-1.212.79h-16.976c-.67 0-1.213-.354-1.213-.79V9.443h-3.528c-.668 0-1.208.35-1.208.782v7.904c0 .43.54.78 1.207.78h26.688c.667 0 1.21-.35 1.21-.78v-7.91c0-.434-.545-.784-1.21-.784z" fill="#000"/><text font-family="Open Sans" font-size="14" font-weight="bold" fill="#979797"><tspan x="218" y="49">name</tspan></text><path d="M126.932 68.668l3.752 6.77s-55.797 30.79-47.958 46.94c20.165-30.07 51.34-40.848 51.34-40.848l3.75 6.772 38.052-33.926-48.936 14.292zm6.17.24l2.914 5.254s-43.34 22.756-49.964 40.692C102.774 91.32 138.12 77.96 138.12 77.96l2.858 5.155 26.354-24.007-34.23 9.8z" fill="#000"/><path d="M88.476 126h-14.95c-.33 0-.526.14-.526.37v6.2c0 .232.197.37.525.37h14.95c.33 0 .525-.138.525-.37v-6.2c0-.23-.197-.37-.524-.37zm-.796.555l-6.81 3.795-6.693-3.795H87.68zm.27 5.83h-13.9c-.165 0-.263-.07-.263-.185v-5.17l7.082 3.967 7.34-4.113v5.316c0 .116-.1.186-.26.186z" fill="#010101"/><path d="M367.5 141h102m-144 56.5l42-56m89 55l42-56m-131-39.5h132m-174 56.5l42-56m89 56l42-56m-131.5 40v-40" stroke="#979797" stroke-width="2" stroke-linecap="square"/><path stroke="#979797" stroke-width="2" fill="#E8E8E8" d="M387.865 95.022l54.504 58.42-18.32 17.09-54.508-58.42z"/><path d="M499 140v-38.5" stroke="#979797" stroke-width="2" stroke-linecap="square"/><path stroke="#979797" stroke-width="2" fill="#fff" d="M324 158h133v40H324z"/><g transform="translate(361 171)"><path stroke="#979797" fill="#fff" d="M0 0h63v16H0z"/><circle stroke="#979797" cx="3.5" cy="3.5" r="1.5"/><text font-family="Consolas" font-size="14" fill="#4990E2"><tspan x="15" y="12">admin</tspan></text></g><path d="M358.068 68.67l-3.752 6.77s55.797 30.788 47.958 46.938c-20.165-30.07-51.34-40.847-51.34-40.847l-3.75 6.78-38.052-33.927 48.936 14.29zm-6.17.238l-2.914 5.255s43.34 22.756 49.964 40.692C382.226 91.322 346.88 77.96 346.88 77.96l-2.858 5.156-26.354-24.007 34.23 9.792z" fill="#000"/><path d="M412.476 126h-14.95c-.33 0-.526.14-.526.37v6.2c0 .232.197.37.525.37h14.95c.33 0 .525-.138.525-.37v-6.2c0-.23-.197-.37-.524-.37zm-.796.555l-6.81 3.795-6.693-3.795h13.503zm.27 5.83h-13.9c-.165 0-.263-.07-.263-.185v-5.17l7.082 3.967 7.34-4.113v5.316c0 .116-.1.186-.26.186z" fill="#010101"/></g></svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="546px" height="150px" viewBox="0 0 546 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="variable-copy-reference">
<path d="M221.26472,9.85877813 C219.22368,9.85877813 217.56952,10.9393181 217.56952,12.2725781 L217.56952,92.7362981 C217.56952,94.0695581 219.22368,95.1500981 221.26472,95.1500981 L324.73776,95.1500981 C326.7788,95.1500981 328.43296,94.0695581 328.43296,92.7362981 L328.43296,12.2725781 C328.43296,10.9393181 326.7788,9.85877813 324.73776,9.85877813 L221.26472,9.85877813 Z M318.7312,86.8850581 L227.2688,86.8850581 L227.2688,16.3850581 L318.7312,16.3850581 L318.7312,86.8850581 L318.7312,86.8850581 Z" id="Shape" fill="#E8C48F"></path>
<path d="M286.34488,18.9469781 L282.58024,18.9469781 L282.58024,24.4711781 C282.58024,24.9069581 282.03712,25.2601181 281.36752,25.2601181 L264.39192,25.2601181 C263.72232,25.2601181 263.1792,24.9069581 263.1792,24.4711781 L263.1792,18.9469781 L259.6576,18.9469781 C258.99048,18.9469781 258.44984,19.2968981 258.44984,19.7294381 L258.44984,27.6334181 C258.44984,28.0659581 258.99048,28.4158781 259.6576,28.4158781 L286.34488,28.4158781 C287.012,28.4158781 287.55264,28.0659581 287.55264,27.6334181 L287.55264,19.7294381 C287.55264,19.2968981 287.00952,18.9469781 286.34488,18.9469781 L286.34488,18.9469781 Z" id="Shape" fill="#E8C48F"></path>
<text id="name" font-family="Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="252.162109" y="60.0044381">name</tspan>
</text>
<g id="Group" transform="translate(11.000000, 15.000000)">
<g id="noun_1211_cc" fill="#E8C48F">
<path d="M17,28.1960457 L129.557785,28.1960457 L129.557785,71.1456641 C129.557785,71.5185728 129.479295,72.0083855 129.279367,72.4404861 C129.07944,72.8725868 112.704625,108 112.704625,108 L112.704625,53.6396695 L129.559266,28.1960457 L148,0 L35.4407339,0 L17,28.1960457 L17,28.1960457 Z" id="Shape"></path>
<path d="M17,57 L17,29 L2,57" id="Shape"></path>
<path d="M0,59 L0,113.729971 C0,117.150501 1.4836395,119 4.38712201,119 L104.473443,119 C107.59502,119 110,116.4521 110,115.524372 L110,59 L0,59 L0,59 Z" id="Shape"></path>
</g>
<text id="User" font-family="Open Sans" font-size="18" font-weight="526" fill="#FFFFFF">
<tspan x="35" y="96">User</tspan>
</text>
<g id="Rectangle-4-+-Shape-3" transform="translate(104.000000, 15.000000)">
<rect id="Rectangle-4" fill="#FFFFFF" x="0" y="19" width="44" height="6"></rect>
<path d="M7.85404284,20.3219293 L21.6330289,6.84634915 C23.2462881,5.57160629 26.8181947,2.41895793 25.2049355,1.14440364 C23.5916764,-0.131093502 22.5405033,0.671996159 20.9296292,1.9474933 L2.43143016,20.3219299 C0.818170998,21.5966728 0.818171047,23.1666601 2.43143021,24.4412144 C2.43143021,24.4412144 23.9137313,44.5088763 25.2049351,44.5088763 C28.2099969,44.5088763 27.882164,42.6878208 26.2689048,41.4132665 L7.8540433,23.5870439 L42.8425234,23.5870439 L66.2240642,23.5870439 L85.0283644,23.5870439 C87.3089653,23.5870439 88.7785142,23.8657087 88.7785142,22.0625887 C88.7785142,20.2594687 87.3089645,20.3219293 85.0283637,20.3219293 L7.85404284,20.3219293 Z" id="Shape-3" fill="#EE6B47" transform="translate(45.000000, 22.504438) scale(-1, 1) translate(-45.000000, -22.504438) "></path>
</g>
<g id="Rectangle-3-+-Shape" transform="translate(46.000000, 16.000000)">
<rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="47" height="37"></rect>
<path d="M44,33.7718421 L4,33.7718421 L4,4 L44,4 L44,33.7718421 L44,33.7718421 Z M8.7332,31.0177632 L39.2664,31.0177632 L29.2192,20.8671053 L27.3168,22.7567105 C26.4932,23.5690789 25.314,24.0340789 24.0748,24.0340789 C24.068,24.0340789 24.0608,24.0328947 24.054,24.0328947 C22.81,24.0277632 21.6272,23.5528947 20.808,22.7286842 L18.874,20.7964474 L8.7332,31.0177632 L8.7332,31.0177632 Z M6.7908,8.72618421 L6.7908,29.0397368 L16.9128,18.8381579 L6.7908,8.72618421 L6.7908,8.72618421 Z M31.1856,18.9131579 L41.2092,29.0385526 L41.2092,8.95434211 L31.1856,18.9131579 L31.1856,18.9131579 Z M8.7396,6.75486842 L22.7968,20.7968421 C23.1012,21.1023684 23.5632,21.2776316 24.0664,21.2788158 L24.0748,21.2788158 C24.5708,21.2788158 25.0432,21.1059211 25.3392,20.8122368 L39.4888,6.75486842 L8.7396,6.75486842 L8.7396,6.75486842 Z" id="Shape" fill="#EE6B47"></path>
</g>
</g>
<g id="noun_1211_cc" transform="translate(396.000000, 15.000000)" fill="#E8C48F">
<path d="M17,28.1960457 L129.557785,28.1960457 L129.557785,71.1456641 C129.557785,71.5185728 129.479295,72.0083855 129.279367,72.4404861 C129.07944,72.8725868 112.704625,108 112.704625,108 L112.704625,53.6396695 L129.559266,28.1960457 L148,0 L35.4407339,0 L17,28.1960457 L17,28.1960457 Z" id="Shape"></path>
<path d="M17,57 L17,29 L2,57" id="Shape"></path>
<path d="M0,59 L0,113.729971 C0,117.150501 1.4836395,119 4.38712201,119 L104.473443,119 C107.59502,119 110,116.4521 110,115.524372 L110,59 L0,59 L0,59 Z" id="Shape"></path>
</g>
<text id="Admin" font-family="Open Sans" font-size="18" font-weight="526" fill="#FFFFFF">
<tspan x="424" y="111">Admin</tspan>
</text>
<g id="Rectangle-4-+-Shape-3" transform="translate(384.500000, 52.500000) scale(-1, 1) translate(-384.500000, -52.500000) translate(340.000000, 30.000000)">
<rect id="Rectangle-4" fill="#FFFFFF" x="0" y="19" width="44" height="6"></rect>
<path d="M7.85404284,20.3219293 L21.6330289,6.84634915 C23.2462881,5.57160629 26.8181947,2.41895793 25.2049355,1.14440364 C23.5916764,-0.131093502 22.5405033,0.671996159 20.9296292,1.9474933 L2.43143016,20.3219299 C0.818170998,21.5966728 0.818171047,23.1666601 2.43143021,24.4412144 C2.43143021,24.4412144 23.9137313,44.5088763 25.2049351,44.5088763 C28.2099969,44.5088763 27.882164,42.6878208 26.2689048,41.4132665 L7.8540433,23.5870439 L42.8425234,23.5870439 L66.2240642,23.5870439 L85.0283644,23.5870439 C87.3089653,23.5870439 88.7785142,23.8657087 88.7785142,22.0625887 C88.7785142,20.2594687 87.3089645,20.3219293 85.0283637,20.3219293 L7.85404284,20.3219293 Z" id="Shape-3" fill="#EE6B47" transform="translate(45.000000, 22.504438) scale(-1, 1) translate(-45.000000, -22.504438) "></path>
</g>
<g id="Rectangle-3-+-Shape" transform="translate(442.000000, 31.000000)">
<rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="47" height="37"></rect>
<path d="M44,33.7718421 L4,33.7718421 L4,4 L44,4 L44,33.7718421 L44,33.7718421 Z M8.7332,31.0177632 L39.2664,31.0177632 L29.2192,20.8671053 L27.3168,22.7567105 C26.4932,23.5690789 25.314,24.0340789 24.0748,24.0340789 C24.068,24.0340789 24.0608,24.0328947 24.054,24.0328947 C22.81,24.0277632 21.6272,23.5528947 20.808,22.7286842 L18.874,20.7964474 L8.7332,31.0177632 L8.7332,31.0177632 Z M6.7908,8.72618421 L6.7908,29.0397368 L16.9128,18.8381579 L6.7908,8.72618421 L6.7908,8.72618421 Z M31.1856,18.9131579 L41.2092,29.0385526 L41.2092,8.95434211 L31.1856,18.9131579 L31.1856,18.9131579 Z M8.7396,6.75486842 L22.7968,20.7968421 C23.1012,21.1023684 23.5632,21.2776316 24.0664,21.2788158 L24.0748,21.2788158 C24.5708,21.2788158 25.0432,21.1059211 25.3392,20.8122368 L39.4888,6.75486842 L8.7396,6.75486842 L8.7396,6.75486842 Z" id="Shape" fill="#EE6B47"></path>
</g>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

Before After
Before After

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

@ -1 +1,38 @@
<svg width="366" height="103" viewBox="0 0 366 103" xmlns="http://www.w3.org/2000/svg"><title>Diagrams</title><desc>Created with Sketch.</desc><g fill="none" fill-rule="evenodd"><path d="M43.5 45h102m-144 56.5l42-56m89 55l42-56M43.5 5h132M1.5 61.5l42-56m89 56l42-56M43 45.5v-40" stroke="#979797" stroke-width="2" stroke-linecap="square"/><path stroke="#979797" stroke-width="2" fill="#E8E8E8" d="M63.865-.978l54.504 58.42-18.32 17.09-54.508-58.42z"/><text transform="rotate(47 85.693 38.5)" font-family="Open Sans" font-size="14" fill="#373535"><tspan x="54.693" y="44">&amp;quot;Привет&amp;quot;</tspan></text><path d="M175 44V5.5" stroke="#979797" stroke-width="2" stroke-linecap="square"/><path stroke="#979797" stroke-width="2" fill="#fff" d="M0 62h133v40H0z"/><g transform="translate(37 75)"><path stroke="#979797" fill="#fff" d="M0 0h63v16H0z"/><circle stroke="#979797" cx="3.5" cy="3.5" r="1.5"/><text font-family="Consolas" font-size="14" fill="#4990E2"><tspan x="7" y="12">message</tspan></text></g><path d="M232.5 45h102m-144 56.5l42-56m89 55l42-56M232.5 5h132m-174 56.5l42-56m89 56l42-56M232 45.5v-40" stroke="#979797" stroke-width="2" stroke-linecap="square"/><path stroke="#979797" stroke-width="2" fill="#E8E8E8" d="M252.865-.978l54.504 58.42-18.32 17.09-54.508-58.42z"/><text transform="rotate(47 274.693 38.5)" font-family="Open Sans" font-size="14" fill="#373535"><tspan x="243.693" y="44">&amp;quot;Привет&amp;quot;</tspan></text><path d="M364 44V5.5" stroke="#979797" stroke-width="2" stroke-linecap="square"/><path stroke="#979797" stroke-width="2" fill="#fff" d="M189 62h133v40H189z"/><g transform="translate(226 75)"><path stroke="#979797" fill="#fff" d="M0 0h63v16H0z"/><circle stroke="#979797" cx="3.5" cy="3.5" r="1.5"/><text font-family="Consolas" font-size="14" fill="#4990E2"><tspan x="10" y="12">phrase</tspan></text></g></g></svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="359px" height="143px" viewBox="0 0 359 143" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="variable-copy-value">
<g id="noun_1211_cc-+-Message" transform="translate(11.000000, 6.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"></path>
<path d="M17,66 L17,38 L2,66" id="Shape" fill="#E8C48F"></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"></path>
<text id="&quot;Привет!&quot;" transform="translate(40.359759, 40.417209) rotate(47.000000) translate(-40.359759, -40.417209) " font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<tspan x="3.68215005" y="45.9172093">"Привет!"</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"></path>
</g>
<text id="Message" font-family="Open Sans" font-size="18" font-weight="526" fill="#FFFFFF">
<tspan x="17" y="105">Message</tspan>
</text>
</g>
<g id="Group" transform="translate(210.000000, 6.000000)">
<path d="M17,37.1960457 L130.417005,37.1960457 L130.417005,80.1456641 C130.417005,80.5185728 130.337916,81.0083855 130.136462,81.4404861 C129.935008,81.8725868 113.435195,117 113.435195,117 L113.435195,62.6396695 L130.418497,37.1960457 L149,9 L35.5815029,9 L17,37.1960457 L17,37.1960457 Z" id="Shape" fill="#E8C48F"></path>
<path d="M18,66 L18,38 L2,66" id="Shape" fill="#E8C48F"></path>
<g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(15.000000, 0.000000)">
<path d="M19.1662424,0.395208397 L74.4067312,58.8435379 L55.8337576,75.9321883 L0.593268752,17.4838588 L19.1662424,0.395208397 L19.1662424,0.395208397 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB"></path>
<text id="&quot;Привет!&quot;" transform="translate(39.891647, 38.685856) rotate(47.000000) translate(-39.891647, -38.685856) " font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<tspan x="3.40960987" y="44.1858556">"Привет!"</tspan>
</text>
</g>
<path d="M0,68 L0,122.729971 C0,126.150501 1.49712713,128 4.42700494,128 L105.423201,128 C108.573157,128 111,125.4521 111,124.524372 L111,68 L0,68 L0,68 Z" id="Shape" fill="#E8C48F"></path>
<text id="Phrase" font-family="Open Sans" font-size="18" font-weight="526" fill="#FFFFFF">
<tspan x="25" y="105">Phrase</tspan>
</text>
</g>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

Before After
Before After