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

Embed font to SVG

Browse source
This commit is contained in:
Ilya Kantor 2019-08-11 14:17:38 +03:00
parent 1310171dd7
commit 4d44df6a3a
226 changed files with 225 additions and 11893 deletions
Download patch file Download diff file Expand all files Collapse all files

38
1-js/02-first-steps/04-variables/variable-change.svg
View file

@ -1,37 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<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">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>variable-change.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="variable-change.svg">
<g id="noun_1211_cc" 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"></path>
<polyline id="Shape" fill="#E8C48F" points="25 123 25 95 10 123"></polyline>
<g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(0.000000, 57.000000)">
<path d="M18.8613371,1.80856046 L1.99871056,17.5332141 L55.1386629,74.5188362 L72.0012894,58.7941826 L18.8613371,1.80856046 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB"></path>
<text id="&quot;World!&quot;" transform="translate(40.081064, 39.767828) rotate(47.000000) translate(-40.081064, -39.767828) " font-family="OpenSans-SemiBold, Open Sans" font-size="14" font-weight="500" line-spacing="17" fill="#8A704D">
<tspan x="10.5885761" y="46.2678284">"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.8613371,1.80856046 L1.99871056,17.5332141 L55.1386629,74.5188362 L72.0012894,58.7941826 L18.8613371,1.80856046 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB"></path>
<text id="&quot;Hello!&quot;" transform="translate(40.081064, 39.767828) rotate(47.000000) translate(-40.081064, -39.767828) " font-family="OpenSans-SemiBold, Open Sans" font-size="14" font-weight="500" line-spacing="17" fill="#8A704D">
<tspan x="10.5885761" y="46.2678284">"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"></path>
</g>
<text id="message" font-family="OpenSans-SemiBold, Open Sans" font-size="18" font-weight="500" 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" 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" transform="translate(261.963509, 23.947232) rotate(2.000000) translate(-261.963509, -23.947232) "></path>
<g id="noun_48910_cc" 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"></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"></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"></path>
</g>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="392" height="192" viewBox="0 0 392 192"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="combined" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="variable-change.svg"><g id="noun_1211_cc" transform="translate(52 -5)"><path id="Shape" fill="#E8C48F" d="M25 94.196h112.558v42.95c0 .373-.079.862-.279 1.294-.2.433-16.574 35.56-16.574 35.56v-54.36l16.854-25.444L156 66H43.44L25 94.196zM25 123V95l-15 28"/><g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(0 57)"><path id="Rectangle-5" fill="#FFF9EB" stroke="#8A704D" stroke-width="2" d="M18.861 1.809L2 17.533l53.14 56.986L72 58.794 18.861 1.81z"/><text id="&quot;World!&quot;" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" transform="rotate(47 40.083 39.762)"><tspan x="10.591" y="46.262">&quot;World!&quot;</tspan></text></g><g id="Rectangle-5-+-&quot;World!&quot;-2" transform="rotate(-67 96.824 -33.912)"><path id="Rectangle-5" fill="#FFF9EB" stroke="#8A704D" stroke-width="2" d="M18.861 1.809L2 17.533l53.14 56.986L72 58.794 18.861 1.81z"/><text id="&quot;Hello!&quot;" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" transform="rotate(47 40.083 39.762)"><tspan x="10.591" y="46.262">&quot;Hello!&quot;</tspan></text></g><path id="Shape" fill="#E8C48F" d="M8 125v54.73c0 3.42 1.484 5.27 4.387 5.27h100.086c3.122 0 5.527-2.548 5.527-3.476V125H8z"/></g><text id="message" fill="#FFF" font-family="OpenSans-Bold, Open Sans" font-size="18" font-weight="bold"><tspan x="77" y="157">message</tspan></text><path id="Fill-54" fill="#E8C48F" d="M58.112 51.808S47.657 40.623 40.719 36.155l-.505 5.542a76.036 76.036 0 00-33.769 4.595l4.169 11.032a64.248 64.248 0 0128.531-3.882l-.505 5.542c5.581-3.329 19.472-7.176 19.472-7.176" transform="rotate(11 32.278 47.57)"/><path id="Fill-54" fill="#E8C48F" d="M287.797 28.186s-10.454-11.185-17.393-15.653l-.505 5.541a76.036 76.036 0 00-33.769 4.596l4.169 11.032a64.248 64.248 0 0128.531-3.882l-.504 5.541c5.58-3.328 19.47-7.175 19.47-7.175" transform="rotate(2 261.964 23.947)"/><g id="noun_48910_cc" transform="translate(298 5)"><path id="Shape" d="M50.983 6H36.016C35.456 6 35 6.626 35 7.395V12h17V7.395C52 6.626 51.543 6 50.983 6z"/><path id="Shape" fill="#E8C48F" d="M84.193 9.36h-26.39V6.085C57.803 2.729 54.99 0 51.528 0H36.47c-3.46 0-6.275 2.729-6.275 6.085V9.36H3.807C1.705 9.36 0 11.012 0 13.05v.26C0 15.348 1.705 17 3.807 17h80.386C86.295 17 88 15.348 88 13.31v-.26c0-2.038-1.706-3.69-3.807-3.69zM53 12H36V7.395C36 6.626 36.457 6 37.016 6h14.968C52.544 6 53 6.626 53 7.395V12zM74.955 20.045H8.044c-3.89 0-7.044-.68-7.044 3.266l5.282 78.382c0 3.943 3.155 7.307 7.045 7.307h56.347c3.89 0 7.044-3.364 7.044-7.307L82 23.31c-.001-3.947-3.155-3.266-7.045-3.266zM26.757 98.999c-1.283.039-2.353-.8-2.396-1.878l-2.36-61.095c-.041-1.078.964-1.985 2.242-2.025 1.283-.04 2.353.801 2.396 1.879l2.36 61.096c.041 1.076-.963 1.984-2.242 2.023zM43 97.049C43 98.126 42.328 99 41.5 99s-1.5-.876-1.5-1.951V35.95c0-1.078.672-1.951 1.5-1.951s1.5.873 1.5 1.951V97.05zm18.639.072c-.042 1.078-1.113 1.917-2.396 1.878-1.28-.04-2.283-.947-2.242-2.024l2.36-61.095c.042-1.078 1.112-1.919 2.394-1.879 1.28.042 2.285.947 2.244 2.025l-2.36 61.095z"/></g></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.4 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

Before After
Before After

27
1-js/02-first-steps/04-variables/variable.svg
View file

@ -1,26 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<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">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>variable.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="variable.svg">
<g id="noun_1211_cc-+-Message" 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"></path>
<polyline id="Shape" fill="#E8C48F" points="17 66 17 38 2 66"></polyline>
<g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(15.000000, 0.000000)">
<path d="M18.8613371,1.80856046 L1.99871056,17.5332141 L55.1386629,74.5188362 L72.0012894,58.7941826 L18.8613371,1.80856046 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB"></path>
<text id="&quot;Hello!&quot;" transform="translate(40.081064, 39.767828) rotate(47.000000) translate(-40.081064, -39.767828) " font-family="OpenSans-SemiBold, Open Sans" font-size="14" font-weight="500" line-spacing="17" fill="#8A704D">
<tspan x="10.5885761" y="46.2678284">"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"></path>
</g>
<text id="message" font-family="OpenSans-SemiBold, Open Sans" font-size="18" font-weight="500" fill="#FFFFFF">
<tspan x="17" y="105">message</tspan>
</text>
</g>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="166" height="145" viewBox="0 0 166 145"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="combined" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="variable.svg"><g id="noun_1211_cc-+-Message" transform="translate(13 3)"><g id="noun_1211_cc"><path id="Shape" fill="#E8C48F" d="M17 37.196h112.558v42.95c0 .373-.079.862-.279 1.294-.2.433-16.574 35.56-16.574 35.56V62.64l16.854-25.444L148 9H35.44L17 37.196zM17 66V38L2 66"/><g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(15)"><path id="Rectangle-5" fill="#FFF9EB" stroke="#8A704D" stroke-width="2" d="M18.861 1.809L2 17.533l53.14 56.986L72 58.794 18.861 1.81z"/><text id="&quot;Hello!&quot;" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" transform="rotate(47 40.083 39.762)"><tspan x="10.591" y="46.262">&quot;Hello!&quot;</tspan></text></g><path id="Shape" fill="#E8C48F" d="M0 68v54.73c0 3.42 1.484 5.27 4.387 5.27h100.086c3.122 0 5.527-2.548 5.527-3.476V68H0z"/></g><text id="message" fill="#FFF" font-family="OpenSans-Bold, Open Sans" font-size="18" font-weight="bold"><tspan x="17" y="105">message</tspan></text></g></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

Before After
Before After