I am trying to create a SMIL animation tween between two shapes and I know that the two shapes need to have the same number of coordinates. The problem I have is when I export the two SVGs from Illustrator the coordinates do not match up in terms of how many sets there are. Both shapes are created form the same source with no extra points added or removed, just a curve at the top straightened out.
Here is my SVG on Codepen http://codepen.io/tands/pen/LEmoOK and below...
<!-- smile circle -->
<svg version="1.1" x="0px" y="0px" viewBox="0 0 453.5 290" enable-background="new 0 0 453.5 290" xml:space="preserve">
<path fill="#000000" d="
M226.8,
34.9
C146.3,
34.9,
71.5,
22,
8.9,
0
C3.1,
20.1,
0,
41.3,
0,
63.2
C0,
188.5,
101.5,
290,
226.8,
290
S453.5,
188.5,
453.5,
63.2
c0-21.9-3.1-43.1-8.9-63.2
C382.1,
22,
307.2,
34.9,
226.8,
34.9z
H0z
"/>
</svg>
<!-- partial circle -->
<svg version="1.1" x="0px" y="0px" viewBox="0 0 453.5 290" enable-background="new 0 0 453.5 290" xml:space="preserve">
<path fill="#000000" d="
M8.9,
0
C3.1,
20.1,
0,
41.3,
0,
63.2
C3.1,
20.1,
0,
41.3,
0,
63.2
C0,
188.5,
101.5,
290,
226.8,
290
S453.5,
188.5,
453.5,
63.2
c0-21.9-3.1-43.1-8.9-63.2
C0,
0,
0,
0,
0,
0
H8.9z
"/>
</svg>
So I guess my question is how do I achieve the shape tween between the two shapes on codepen even though they have different coordinates?
Related
I've created a bunch of cubic bezier curves in 1 svg path and now trying to fill the path from top to bottom with dasharray and offset, but the animation keeps starting at every cubic bezier curve start point, so at every C in the path. how can I combine the lines, so the animation goes from the very top to the very bottom?
Here's my svg animation:
https://codepen.io/mj2023/pen/wvEMwyB
<style>
svg {
width: 600px;
overflow:visible;
}
#lined-svg path {
stroke-dasharray: 7867.43;
stroke-dashoffset: 7867.43;
animation: dash 5s linear alternate infinite;
}
#keyframes dash {
from {
stroke-dashoffset: 7867.43;
}
to {
stroke-dashoffset: 0;
}
}
</style>
<svg id="lined-svg" viewBox="0 0 600 4088">
<path stroke="red" fill="none" stroke-width="6" d="M 300, 0 C 300, 114, 600, 76, 600, 190 C 600, 304, 300, 266, 300, 380 M 300, 380, C 300, 542.6, 600, 488.4, 600, 651 C 600, 813.6, 300, 759.4, 300, 922 M 300, 922, C 300, 1003.6, 600, 976.4, 600, 1058 C 600, 1139.6, 300, 1112.4, 300, 1194 M 300, 1194, C 300, 1308, 600, 1270, 600, 1384 C 600, 1498, 300, 1460, 300, 1574 M 300, 1574, C 300, 1655.6, 600, 1628.4, 600, 1710 C 600, 1791.6, 300, 1764.4, 300, 1846 M 300, 1846, C 300, 2008.6, 600, 1954.4, 600, 2117 C 600, 2279.6, 300, 2225.4, 300, 2388 M 300, 2388, C 300, 2604.6, 600, 2532.4, 600, 2749 C 600, 2965.6, 300, 2893.4, 300, 3110 M 300, 3110, C 300, 3224, 600, 3186, 600, 3300 C 600, 3414, 300, 3376, 300, 3490 M 300, 3490, C 300, 3555.4, 600, 3533.6, 600, 3599 C 600, 3664.4, 300, 3642.6, 300, 3708 M 300, 3708, C 300, 3822, 600, 3784, 600, 3898 C 600, 4012, 300, 3974, 300, 4088"></path>
</svg>
I would like to write a function that described the coefficients of the transformation matrix of linearGradient using a transformation matrix of dimension 4x4. Please help to fill in this matrix with the coefficients necessary to apply this matrix to some object.
For example, we have a description of the gradient:
<linearGradient
id="linearGradient2286"
x1="75.927002"
x2="136.64999"
y1="32.581001"
y2="127.08"
gradientTransform="matrix(0.20149,0,0,0.20149,-413.35,-155.75)"
gradientUnits="userSpaceOnUse">
<stop
stop-color="#6262f1"
offset="0"
id="stop2" />
<stop
stop-color="#1d1d34"
offset="1"
id="stop4" />
</linearGradient>
I want to fill in the transformation matrix of the view:
Matrix4 m1 = (
0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0);
Depending on the layout of your matrix, I would expect it to be either:
0.20149, 0, 0, 0,
0, 0.20149, 0, 0,
0, 0, 1, 0,
-413.35, -155.75, 0, 1
or the transposed version
0.20149, 0, 0, -413.35,
0, 0.20149, 0, -155.75
0, 0, 1, 0,
0, 0, 0, 1
I generate quite a lot of points with uniform scale and color:
set term svg size 600 600
set output "random_samples.svg"
set size square
set xrange [-0.05:1.05]
set yrange [-0.05:1.05]
plot "sorted_samples.data" using 1:2 with linespoints pt 7 pointsize 0.2 linewidth 0.3 linecolor "black" notitle
When number of samples grows my SVG files start to become very heavy. I had a look inside of the SVG file and it seems that there are many entries that are repeated:
<use xlink:href='#gpPt6' transform='translate(451.7,96.7) scale(0.90)' color='rgb(148, 0, 211)'/>
<use xlink:href='#gpPt6' transform='translate(462.0,92.1) scale(0.90)' color='rgb(148, 0, 211)'/>
<use xlink:href='#gpPt6' transform='translate(284.3,73.6) scale(0.90)' color='rgb(148, 0, 211)'/>
<use xlink:href='#gpPt6' transform='translate(242.5,278.1) scale(0.90)' color='rgb(148, 0, 211)'/>
<use xlink:href='#gpPt6' transform='translate(405.9,285.2) scale(0.90)' color='rgb(148, 0, 211)'/>
<use xlink:href='#gpPt6' transform='translate(166.8,55.8) scale(0.90)' color='rgb(148, 0, 211)'/>
<use xlink:href='#gpPt6' transform='translate(168.4,61.4) scale(0.90)' color='rgb(148, 0, 211)'/>
<use xlink:href='#gpPt6' transform='translate(166.8,119.7) scale(0.90)' color='rgb(148, 0, 211)'/>
<use xlink:href='#gpPt6' transform='translate(541.0,64.0) scale(0.90)' color='rgb(148, 0, 211)'/>
<use xlink:href='#gpPt6' transform='translate(421.2,100.2) scale(0.90)' color='rgb(148, 0, 211)'/>
By using text editor I removed scale and color. By doing this I can reduce file size from 2.3MB to 1.3MB. That is a significant difference.
Is there a way to output more optimised SVGs from gnuplot?
P.S. I am looking for some more automated solution rather than manually going file by file.
I have an image by the name Red.jpg which is nothing but a rectangular image of plain red color of RGB value (255,0,0) generated using windows paint. Now I import the image using python as a numpy array using the code shown.
I see that the RGB values have changed.
What could be the reason to this?
import numpy as np
from PIL import Image
img= Image.open('Red.jpg')
imgArray = np.array(img)
print(imgArray)
I get the following result:
[[254 0 0]
[254 0 0]
[254 0 0]
...,
[254 0 0]
[254 0 0]
[254 0 0]]
[[254 0 0]
[254 0 0]
[254 0 0]
...,
[254 0 0]
[254 0 0]
[254 0 0]]
[[254 0 0]
[254 0 0]
[254 0 0]
...,
[254 0 0]
[254 0 0]
[254 0 0]]]
I see that the RGB value has changed.
Image generated in windows paint
Thats the RGB values of Paint's default red.
The one you find as the 4th color in the pallette.
Saving it to jpeg changes the 28 to 27. Maybe due to compression.
The numpy values are correct.
I have SVG content that overflows to the right by having 'X' coordinates that have higher value than viewBox sets. Is there any way to make the content show the right-most part and that it will overflow to the left? (like right-justify the text)
Here is the full SVG I am working with, it is a plot that overflows and I want to show the part to the right but hide the "older" points:
the reason for doing this is that points get generated automatically and I want to always show the latest dots on the viewable area and the image to "auto-scroll" to the right.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100" class="chart">
<style>
.chart {
background: white;
width: 500px;
height: 100px;
border-left: 1px dotted #555;
border-bottom: 1px dotted #555;
padding: 20px 20px 20px 0;
}
body {
/* background: #ccc; */
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
}
body, html {
height: 100%;
}
</style>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="0, 0
10, 64"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="10, 64
20, 48"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="20, 48
30, 86"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="30, 86
40, 4"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="40, 4
50, 70"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="50, 70
60, 91"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="60, 91
70, 50"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="70, 50
80, 61"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="80, 61
90, 32"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="90, 32
100, 89"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="100, 89
110, 51"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="110, 51
120, 77"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="120, 77
130, 60"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="130, 60
140, 60"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="140, 60
150, 0"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="150, 0
160, 16"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="160, 16
170, 90"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="170, 90
180, 69"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="180, 69
190, 70"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="190, 70
200, 100"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="200, 100
210, 18"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="210, 18
220, 0"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="220, 0
230, 6"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="230, 6
240, 43"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="240, 43
250, 2"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="250, 2
260, 4"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="260, 4
270, 74"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="270, 74
280, 56"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="280, 56
290, 80"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="290, 80
300, 26"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="300, 26
310, 69"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="310, 69
320, 77"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="320, 77
330, 19"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="330, 19
340, 37"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="340, 37
350, 72"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="350, 72
360, 61"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="360, 61
370, 33"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="370, 33
380, 62"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="380, 62
390, 11"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="390, 11
400, 27"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="400, 27
410, 43"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="410, 43
420, 83"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="420, 83
430, 75"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="430, 75
440, 27"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="440, 27
450, 74"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="450, 74
460, 30"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="460, 30
470, 44"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="470, 44
480, 86"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="480, 86
490, 19"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="490, 19
500, 34"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="500, 34
510, 54"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="510, 54
520, 57"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="520, 57
530, 59"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="530, 59
540, 45"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="540, 45
550, 100"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="550, 100
560, 84"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="560, 84
570, 97"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="570, 97
580, 24"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="580, 24
590, 6"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="590, 6
600, 73"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="600, 73
610, 52"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="610, 52
620, 68"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="620, 68
630, 47"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="630, 47
640, 36"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="640, 36
650, 57"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="650, 57
660, 49"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="660, 49
670, 25"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="670, 25
680, 15"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="680, 15
690, 1"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="690, 1
700, 33"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="700, 33
710, 38"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="710, 38
720, 2"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="720, 2
730, 70"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="730, 70
740, 23"/>
</svg>