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

images to svg

Browse source
This commit is contained in:
Ilya Kantor 2019-07-28 15:42:37 +03:00
parent a31e881856
commit 3ba28aa104
734 changed files with 11682 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

16
7-animation/3-js-animation/article.md
View file

@ -160,7 +160,7 @@ Function `animate` accepts 3 parameters that essentially describes the animation
```
It's graph:
![](linear.png)
![](linear.svg)
That's just like `transition-timing-function: linear`. There are more interesting variants shown below.
@ -221,7 +221,7 @@ function quad(timeFraction) {
The graph:
![](quad.png)
![](quad.svg)
See in action (click to activate):
@ -231,7 +231,7 @@ See in action (click to activate):
Here's the graph for `progress` in the power `5`:
![](quint.png)
![](quint.svg)
In action:
@ -249,7 +249,7 @@ function circ(timeFraction) {
The graph:
![](circ.png)
![](circ.svg)
[iframe height=40 src="circ" link]
@ -269,7 +269,7 @@ function back(x, timeFraction) {
**The graph for `x = 1.5`:**
![](back.png)
![](back.svg)
For animation we use it with a specific value of `x`. Example for `x = 1.5`:
@ -306,7 +306,7 @@ function elastic(x, timeFraction) {
```
**The graph for `x=1.5`:**
![](elastic.png)
![](elastic.svg)
In action for `x=1.5`:
@ -349,7 +349,7 @@ Then the bounce will be not in the beginning, but at the end of the animation. L
Here we can see how the transform changes the behavior of the function:
![](bounce-inout.png)
![](bounce-inout.svg)
If there's an animation effect in the beginning, like bouncing -- it will be shown at the end.
@ -395,7 +395,7 @@ The "easeInOut" transform joins two graphs into one: `easeIn` (regular) for the
The effect is clearly seen if we compare the graphs of `easeIn`, `easeOut` and `easeInOut` of the `circ` timing function:
![](circ-ease.png)
![](circ-ease.svg)
- <span style="color:#EE6B47">Red</span> is the regular variantof `circ` (`easeIn`).
- <span style="color:#8DB173">Green</span> -- `easeOut`.

BIN
7-animation/3-js-animation/back.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.5 KiB

22
7-animation/3-js-animation/back.svg Normal file
View file

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<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">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>back.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="back.svg">
<path id="Line" d="M35,36.1600037 L35,210.5 L33,210.5 L33,36.1600037 L27,36.1600037 L34,22.1600037 L41,36.1600037 L35,36.1600037 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path id="Line" d="M194.509995,195 L23.5,195 L23.5,193 L194.509995,193 L194.509995,187 L208.509995,194 L194.509995,201 L194.509995,195 Z" fill="#E8C48E" fill-rule="nonzero"></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"></path>
<text id="0" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="212">0</tspan>
</text>
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="36">1</tspan>
</text>
<text id="-2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="200" y="212">1</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
7-animation/3-js-animation/back@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
7-animation/3-js-animation/bezier-linear.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.8 KiB

23
7-animation/3-js-animation/bezier-linear.svg Normal file
View file

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="144px" height="150px" viewBox="0 0 144 150" 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>bezier-linear.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="bezier-linear.svg">
<g id="1" transform="translate(12.000000, 13.000000)">
<g id="Group">
<path d="M4.17,103.348 L104.314,3.505" id="Shape" stroke="#CB1E31" stroke-width="2"></path>
<circle id="Oval" stroke="#E8C48E" fill="#FFFFFF" cx="4" cy="104" r="4"></circle>
<text id="1" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="10.2803872" font-weight="bold">
<tspan x="0" y="125">1</tspan>
</text>
<circle id="Oval" stroke="#E8C48E" fill="#FFFFFF" cx="104" cy="4" r="4"></circle>
<text id="2" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="10.2803872" font-weight="bold">
<tspan x="100.101" y="25">2</tspan>
</text>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
7-animation/3-js-animation/bezier-linear@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.8 KiB

BIN
7-animation/3-js-animation/bounce-inout.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

23
7-animation/3-js-animation/bounce-inout.svg Normal file
View file

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<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">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>bounce-inout.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="bounce-inout.svg">
<path id="Line" d="M35,36.1600037 L35,210.5 L33,210.5 L33,36.1600037 L27,36.1600037 L34,22.1600037 L41,36.1600037 L35,36.1600037 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path id="Line" d="M194.509995,195 L23.5,195 L23.5,193 L194.509995,193 L194.509995,187 L208.509995,194 L194.509995,201 L194.509995,195 Z" fill="#E8C48E" fill-rule="nonzero"></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"></path>
<text id="0" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="212">0</tspan>
</text>
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="36">1</tspan>
</text>
<text id="-2" font-family="PTMono-Bold, PT Mono" 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"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
7-animation/3-js-animation/bounce-inout@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 27 KiB

BIN
7-animation/3-js-animation/circ-ease.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 13 KiB

24
7-animation/3-js-animation/circ-ease.svg Normal file
View file

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<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">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>circ-ease.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="circ-ease.svg">
<path id="Line" d="M35,36.1600037 L35,210.5 L33,210.5 L33,36.1600037 L27,36.1600037 L34,22.1600037 L41,36.1600037 L35,36.1600037 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path id="Line" d="M194.509995,195 L23.5,195 L23.5,193 L194.509995,193 L194.509995,187 L208.509995,194 L194.509995,201 L194.509995,195 Z" fill="#E8C48E" fill-rule="nonzero"></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"></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" transform="translate(121.812790, 108.090312) scale(-1, -1) translate(-121.812790, -108.090312) "></path>
<text id="0" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="212">0</tspan>
</text>
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="36">1</tspan>
</text>
<text id="-2" font-family="PTMono-Bold, PT Mono" 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"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
7-animation/3-js-animation/circ-ease@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 29 KiB

BIN
7-animation/3-js-animation/circ.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.2 KiB

22
7-animation/3-js-animation/circ.svg Normal file
View file

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<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">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>circ.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="circ.svg">
<path id="Line" d="M35,36.1600037 L35,210.5 L33,210.5 L33,36.1600037 L27,36.1600037 L34,22.1600037 L41,36.1600037 L35,36.1600037 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path id="Line" d="M194.509995,195 L23.5,195 L23.5,193 L194.509995,193 L194.509995,187 L208.509995,194 L194.509995,201 L194.509995,195 Z" fill="#E8C48E" fill-rule="nonzero"></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"></path>
<text id="0" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="212">0</tspan>
</text>
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="36">1</tspan>
</text>
<text id="-2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="200" y="212">1</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
7-animation/3-js-animation/circ@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 14 KiB

BIN
7-animation/3-js-animation/elastic.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 10 KiB

22
7-animation/3-js-animation/elastic.svg Normal file
View file

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<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">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>elastic.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="elastic.svg">
<path id="Line" d="M35,36.1600037 L35,366 L33,366 L33,36.1600037 L27,36.1600037 L34,22.1600037 L41,36.1600037 L35,36.1600037 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path id="Line" d="M194.509995,195 L23.5,195 L23.5,193 L194.509995,193 L194.509995,187 L208.509995,194 L194.509995,201 L194.509995,195 Z" fill="#E8C48E" fill-rule="nonzero"></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"></path>
<text id="0" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="212">0</tspan>
</text>
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="36">1</tspan>
</text>
<text id="-2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="200" y="212">1</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

BIN
7-animation/3-js-animation/elastic@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 24 KiB

BIN
7-animation/3-js-animation/linear.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 5.4 KiB

22
7-animation/3-js-animation/linear.svg Normal file
View file

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<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">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>linear.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="linear.svg">
<path id="Line" d="M35,36.1600037 L35,210.5 L33,210.5 L33,36.1600037 L27,36.1600037 L34,22.1600037 L41,36.1600037 L35,36.1600037 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path id="Line" d="M194.509995,195 L23.5,195 L23.5,193 L194.509995,193 L194.509995,187 L208.509995,194 L194.509995,201 L194.509995,195 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path d="M35.3289777,193.635841 L207.337233,22.0938619" id="Path-747" stroke="#EE6B47" stroke-width="3"></path>
<text id="0" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="212">0</tspan>
</text>
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="36">1</tspan>
</text>
<text id="-2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="200" y="212">1</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
7-animation/3-js-animation/linear@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
7-animation/3-js-animation/quad.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.4 KiB

22
7-animation/3-js-animation/quad.svg Normal file
View file

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<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">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>quad.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="quad.svg">
<path id="Line" d="M35,36.1600037 L35,210.5 L33,210.5 L33,36.1600037 L27,36.1600037 L34,22.1600037 L41,36.1600037 L35,36.1600037 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path id="Line" d="M194.509995,195 L23.5,195 L23.5,193 L194.509995,193 L194.509995,187 L208.509995,194 L194.509995,201 L194.509995,195 Z" fill="#E8C48E" fill-rule="nonzero"></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"></path>
<text id="0" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="212">0</tspan>
</text>
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="36">1</tspan>
</text>
<text id="-2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="200" y="212">1</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
7-animation/3-js-animation/quad@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
7-animation/3-js-animation/quint.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6 KiB

22
7-animation/3-js-animation/quint.svg Normal file
View file

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<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">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>quint.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="quint.svg">
<path id="Line" d="M35,36.1600037 L35,210.5 L33,210.5 L33,36.1600037 L27,36.1600037 L34,22.1600037 L41,36.1600037 L35,36.1600037 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path id="Line" d="M194.509995,195 L23.5,195 L23.5,193 L194.509995,193 L194.509995,187 L208.509995,194 L194.509995,201 L194.509995,195 Z" fill="#E8C48E" fill-rule="nonzero"></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"></path>
<text id="0" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="212">0</tspan>
</text>
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="36">1</tspan>
</text>
<text id="-2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="200" y="212">1</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
7-animation/3-js-animation/quint@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 14 KiB