I have a task to replace all RBG instances in a string to the nearest monochrome values.
The complexity is slowing down the process and I'd like to know if there's a faster way to replace all the instances in the string.
As you can see bellow, for rounding up to white 255 I just deleted the paths to save time. But it's just a quick hack and not a solution to my problem.
The string is an SVG style text with a lot of data:
// Completely delete white paths:
//svg = svg.replace(/<path[^>]*?fill="rgb\(255[^>]*?\/>/g, '')
svg = svg.replace(/<path[^>]*?fill="rgb\(254[^>]*?\/>/g, '')
svg = svg.replace(/<path[^>]*?fill="rgb\(253[^>]*?\/>/g, '')
...
// Replace almost black with full black
svg = svg.replace(new RegExp('7,7,7', 'g'), '0,0,0')
svg = svg.replace(new RegExp('6,6,7', 'g'), '0,0,0')
svg = svg.replace(new RegExp('6,6,6', 'g'), '0,0,0')
...
As you can see from a part of the code, sometimes not all of the three RGB parameters are the same so it's really slowing down the code and I'm stressing out.
There's a treshold if any of the three RBG parameters is bellow 200, it will be all black 0, otherwise it should be white with all values at 255.
I have only limited experience with regex so this is about as much as I could do.
Any improvements would be really helpful.
Short answer
This is not really the way to create monochrome, and will usually not be the "nearest" monochrome either. Though I am not clear on what your actual goals are, so let's discuss.
Longer Answer
The R G and B channels do not contribute equally to the total luminance that makes a monochrome version of an image. And also, yes RGB values are not linear in nature. I see that your breakpoint is at value 200, I'm curious how you arrived at that and what the purpose is of splitting something into either black or white.
If you had monochrome values to start with, the middle contrast point is closer to 170. The middle grey breakpoint in terms of surface colors is usually considered to be 18% which works out to 118 in sRGB, due to the nonlinear encoding of the sRGB TRC.
If you want an accurate grayscale, then the procedure would be to first linearize and then apply coefficient to each of the channels and sum them to create a luminance Y.
The down and dirty simple version of the JS code to determine that value given a tuple of sRGB numerical values, finding the mid-point to flip, and related topics I discuss in this answer: https://stackoverflow.com/a/69869976/10315269
But here's a code snippet:
let Ys = Math.pow(sR/255.0,2.2) * 0.2126 +
Math.pow(sG/255.0,2.2) * 0.7152 +
Math.pow(sB/255.0,2.2) * 0.0722; // Andy's Easy Luminance for sRGB. For Rec709 HDTV change the 2.2 to 2.4
This gives you the weighted light value from the monitor, which can then be used to determine a break point.
If we put this together with some regex to help parse values, then:
let container = document.getElementById('BWBlock');
function setSVGtoBW (myOriginalSVG = "<null SVG string>") {
let rex = /#([0-9a-f]{1,2})([0-9a-f]{1,2})([0-9a-f]{1,2})/ig;
// regex to parse the hex string
// We are explicit about 0-9a-f instead of \w, because
// We no not want to replace ID calls like <use '#newLines'>
function findYflip (match, p1, p2, p3, offset, string) {
let Ys = Math.pow(parseInt(p1,16)/255.0,2.2) * 0.2126 +
Math.pow(parseInt(p2,16)/255.0,2.2) * 0.7152 +
Math.pow(parseInt(p3,16)/255.0,2.2) * 0.0722; // Andy's Easy Luminance Estimate for sRGB. For Rec709 HDTV change the 2.2 to 2.4, and use different coefficients for P3 etc!
return (Ys > 0.4) ? "#ffffff" : "#000000"; // luminance based color flipper.
};
return myOriginalSVG.replace(rex, findYflip)
};
// An svg for demo purposes
let placeholder = "<?xml version='1.1' encoding='UTF-8'?> <!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'> <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 494.6 525.8'> <title>CIE 1931 xyY Gamut Comparison</title> <defs> <path id='locus' d='M 150,473 C 147,473 145,471 142,469 C 135,462 129,455 124,446 C 121,441 118,436 116,431 C 113,424 110,416 107,408 C 103,396 99,385 95,373 C 86,339 77,298 72,264 C 66,226 61,179 62,141 C 63,118 65,81 80,60 C 84,54 91,50 98,49 C 105,48 112,51 118,53 C 140,60 160,76 178,90 C 236,135 287,191 339,243 C 360,264 380,284 401,305 C 409,313 417,321 426,329 C 428,332 430,334 433,337 C 434,337 434,338 435,339 C 435,339 436,340 436,340'/> <path id='gamutStot' d='M 76.875,-30.750 L 153.75,-307.5 L 328,-169.125 Z'/> <g id='lines'> <use xlink:href='#gamutStot' stroke='#3377aa' fill='#eeccff' stroke-width='6' /> </g> <g id='labels'> <path d='M 520,-865 L 820,-865 L 820,-790 L 520,-790 Z' stroke='#eedd22' stroke-width='4' stroke-linejoin='round' fill='#3300aa'/> <path d='M 520,-865 L 820,-865 L 820,-790 L 520,-790 Z' stroke='#ffaa11' stroke-width='4' stroke-linejoin='round' fill='#6622ff' transform='translate(0,100)' /> <path d='M 520,-865 L 820,-865 L 820,-790 L 520,-790 Z' stroke='#6622ff' stroke-width='4' stroke-linejoin='round' fill='#ffaa11' transform='translate(0,200)' /> <path d='M 520,-865 L 820,-865 L 820,-790 L 520,-790 Z' stroke='#3300aa' stroke-width='4' stroke-linejoin='round' fill='#eedd22' transform='translate(0,300)' /> <text x='540' y='-10' text-anchor='start' fill='#3300aa' font-size='15'>Copyright © 2021 Myndex Research</text> </g> </defs> <use stroke='#234567' stroke-width='2' fill='#ccddee' xlink:href='#locus'/> <path stroke='#6622cc' stroke-width='2.75' stroke-linecap='square' fill='none' d='M 60,15 v 461 h 410 M 60,476 v 4 M 86,476 v 4 M 111,476 v 4 M 137,476 v 4 M 162,476 v 4 M 188,476 v 4 M 214,476 v 4 M 239,476 v 4 M 265,476 v 4 M 290,476 v 4 M 316,476 v 4 M 342,476 v 4 M 367,476 v 4 M 393,476 v 4 M 418,476 v 4 M 444,476 v 4 M 470,476 v 4 M 60,476 h -4 M 60,450 h -4 M 60,425 h -4 M 60,399 h -4 M 60,373 h -4 M 60,348 h -4 M 60,322 h -4 M 60,297 h -4 M 60,271 h -4 M 60,245 h -4 M 60,220 h -4 M 60,194 h -4 M 60,169 h -4 M 60,143 h -4 M 60,117 h -4 M 60,92 h -4 M 60,66 h -4 M 60,41 h -4 M 60,15 h -4'/> <path opacity='0.5' stroke='#88aaff' stroke-dasharray='4,4' stroke-width='3' fill='none' d='M 85.5,475.5 v -460.8 M 111.5,475.5 v -460.8 M 136.5,475.5 v -435.2 M 162.5,475.5 v -409.6 M 188.5,475.5 v -384 M 213.5,475.5 v -358.4 M 239.5,475.5 v -332.8 M 264.5,475.5 v -307.2 M 290.5,475.5 v -281.6 M 316.5,475.5 v -256 M 341.5,475.5 v -230.4 M 367.5,475.5 v -204.8 M 392.5,475.5 v -179.2 M 418.5,475.5 v -153.6 M 444.5,475.5 v -128 M 469.5,475.5 v -102.4 M 60.5,450.5 h 409.6 M 60.5,424.5 h 409.6 M 60.5,399.5 h 409.6 M 60.5,373.5 h 409.6 M 60.5,347.5 h 384 M 60.5,322.5 h 358.4 M 60.5,296.5 h 332.8 M 60.5,271.5 h 307.2 M 60.5,245.5 h 281.6 M 60.5,219.5 h 256 M 60.5,194.5 h 230.4 M 60.5,168.5 h 204.8 M 60.5,143.5 h 179.2 M 60.5,117.5 h 153.6 M 60.5,91.5 h 128 M 60.5,66.5 h 102.4 M 60.5,40.5 h 76.8 M 60.5,15.5 h 51.2 M 111.5,15.5 L 469.5,373.5'/> <g transform='translate(60,476)' stroke-width='4' stroke-linejoin='round' stroke='#FF4411' fill='#FF4411'> <use xlink:href='#lines'/> </g> <g transform='translate(60,476) scale(0.5125)' > <use xlink:href='#labels' stroke='none'/> </g> <g font-family='Times, serif' font-size='10'> <g fill='#6622cc'> <g text-anchor='middle'> <text x='240' y='505' font-size='30' font-style='italic'>x</text> </g> <g text-anchor='end'> <text x='40' y='251.4' font-size='30' font-style='italic'>y</text> </g> </g> </g> </svg> ";
let newBWsvg = setSVGtoBW(placeholder);
container.innerHTML = newBWsvg;
CODEPEN
I set this up at CodePen here: https://codepen.io/myndex/pen/rNzZWWB
Notice the regex:
let rex = /#([0-9a-f]{1,2})([0-9a-f]{1,2})([0-9a-f]{1,2})/ig;
We are explicit about 0-9a-f instead of \w, because we no not want to replace ID calls references like <use '#newLines'> which could become <use '#000000es'> if we used (\w\w).
Greyscale
Also, you could now make this a greyscale converter, instead of black and white, by replacing the luminance color flipper return (Ys > 0.4) ? "#ffffff" : "#000000"; with instead a Y to sRGB conversion:
let sRGBgr = ((Math.pow(Ys,1/2.2)*255)&0xff).toString(16).padStart(2,'0');
return "#" + sRGBgr + sRGBgr + sRGBgr
This converts the Y back to an sRGB value, and concatenates it to an sRGB hex. The codepen for this greyscale version is https://codepen.io/myndex/pen/mdMGmVw
I am facing a scenario where I need to order an array based on another array's index and direction (Left or Right). The crux of this ordering is that I have a set of charts ordered in horizontal axis based on an array. This horizontal arrangement is based on a webservice which shows history data. Similarly there is an option to view the real time values of the horizontal charts which is arranged as vertical(stack). Current logic is to create the vertical charts by iterating the array which forms the horizontal chart. But the issue is, on some cases this iteration involves another webservice call which causes order change. As a result the horizontal order does not matches with vertical order.
This is shown in the image attached.Array Order Logic.Here in the Chart Container, the charts come in an order and it is arranged according to its direction.
Arrangement Logic in Chart container:
When Chart Container is empty
Item A with direction Left
Output: A(L)
Item B with direction Left
Output: B(L) A(L)
Item C with direction Right
Output: B(L) A(L) C(R)
etc..
Expected arrangement logic in Chart List
L - Left Direction
R- Right Direction
Scenario- 1:
If the current state is: 20 10 30 40 50
Direction of state : L L R R R
New item to be added: 60
L
Expected order : 60 20 10 30 40 50
L L L R R R
Scenario-2
If the current state is: 10 20 30 40 50
Direction of state : R R R R R
New item to be added: 60L
Expected order : 60 10 20 30 40 50
Direction of order : L R R R R R
Scenario-3
If the current state is: 50 40 30 20 10
Direction of state : L L L L L
New item to be added: 60L
Expected order : 60 50 40 30 20 10
Direction of order:L L L L L L
Scenario-4
If the current state is: 50 40 20 10
Direction of state : L L L L
New item to be added: 30L
Expected order : 50 40 30 20 10
Direction of order : L L L L L
Scenario-5
If the current state is: 50 40 20 10
Direction of state : L L R R
New item to be added: 30L
Expected order : 50 40 30 20 10
Direction of order: L L L L L
I have created a stackblitz with my logic but that is not working in all the scenarios across. Please check here. In the stackblitz I have added possible dataset inside data folder.
Please check the link and help me to make this code work across all scenarios.
Thanks in advance. Any suggestions are most welcome.
You could add all values to a main array and sort by direction and value.
const
log = o => console.log(JSON.stringify(o)),
sign = { L: -1, R: 1 },
add = (values, insert) => [...values, insert].sort((a, b) =>
(a[1] === 'R') - (b[1] === 'R') ||
a[0] * sign[a[1]] - b[0] * sign[b[1]]
);
log(add([[20, 'L'], [10, 'L'], [30, 'R'], [40, 'R'], [50, 'R']], [60, 'L'])); // 60 20 10 30 40 50 L L L R R R
log(add([[10, 'R'], [20, 'R'], [30, 'R'], [40, 'R'], [50, 'R']], [60, 'L'])); // 60 10 20 30 40 50 L R R R R R
log(add([[50, 'L'], [40, 'L'], [30, 'L'], [20, 'L'], [10, 'L']], [60, 'L'])); // 60 50 40 30 20 10 L L L L L L
log(add([[50, 'L'], [40, 'L'], [20, 'L'], [10, 'L']], [30, 'L'])); // 50 40 30 20 10 L L L L L
log(add([[50, 'L'], [40, 'L'], [20, 'R'], [10, 'R']], [30, 'L'])); // 50 40 30 20 10 L L L L L
An approach without sorting. This approach needs a sorted array for finding the index.
const
log = o => console.log(JSON.stringify(o)),
sign = { L: -1, R: 1 },
add = (array, insert) => {
let i = array.findIndex(([v, d]) => insert[0] * sign[insert[1]] < v * sign[d]);
if (i === -1) array.push(insert)
else array.splice(i, 0, insert);
return array;
};
log(add([[20, 'L'], [10, 'L'], [30, 'R'], [40, 'R'], [50, 'R']], [60, 'L'])); // 60 20 10 30 40 50 L L L R R R
log(add([[10, 'R'], [20, 'R'], [30, 'R'], [40, 'R'], [50, 'R']], [60, 'L'])); // 60 10 20 30 40 50 L R R R R R
log(add([[50, 'L'], [40, 'L'], [30, 'L'], [20, 'L'], [10, 'L']], [60, 'L'])); // 60 50 40 30 20 10 L L L L L L
log(add([[50, 'L'], [40, 'L'], [20, 'L'], [10, 'L']], [30, 'L'])); // 50 40 30 20 10 L L L L L
log(add([[50, 'L'], [40, 'L'], [10, 'R'], [20, 'R']], [30, 'L'])); // 50 40 30 20 10 L L L L L
I am new to SVG manipulation using javacript. I would like to split any type of SVG path into N number of segments, so that the original shape stays same but with additional points added to the path. I was successfully able to convert a single cubic curve into N number of points using the Bezier JS plugin using the .getLUT(steps) function.
And I am able to convert any SVG element into path using Flatten.js.
Here in the link http://bl.ocks.org/bycoffe/18441cddeb8fe147b719fab5e30b5d45 a path is splitted seamlessly, But I'm struggling to achieve the same using an existing path in an SVG element in the DOM.
Here is my code:
...
<svg id="svg" style="border: 1px solid" width="500" height="500">
<!--The below is an actual rectangle drawn in illustrator-->
<rect x="0.5" y="0.5" width="234" height="125" style="fill:#fff"/>
<path d="M317,107V231H84V107H317m1-1H83V232H318V106Z" transform="translate(-83 -106)"/>
</svg>
...
<script type="text/javascript">
//this converts the <rect> and <path> into a more clean path d attribute
//the above code produces the below d attribute points
//for <rect> - M0.5, 0.5 L 234.5,0.5 L 234.5, 125.5 L 0.5, 125.5 L 0.5, 0.5 Z
//for <path> - M234, 1 L 234, 125 L 1, 125 L 1, 1 L 234, 1 m 1, -1 L 0,0 L 0, 126 L 235, 126 L 235,0 Z
flatten(document.getElementById('svg'));
</script>
I was able to achieve the result by getting teh total length of the path using the function document.getElementById('#path').getTotalLength(); and generating a new d points using document.getElementById('#path').getPointAtLength(i); with the following code
the_path = document.getElementById('#path');
let l = the_path.getTotalLength();
let p = the_path.getPointAtLength(0);
let d = `M${p.x} ${p.y}`;
for(let i = (l/num);i<=l;i+=(l/num)){
p = the_path.getPointAtLength(i);
d += `L${p.x} ${p.y}`;
}
I'm making an svg using a path and I'm having issues getting the path to fill the space within the svg itself.
Here's an example
https://jsfiddle.net/k44y4b9L/2/
As you can see, the svg is viewBox is set to the same width as the last point in the svg, both are 1366
To my thinking, that means that the path should take up the full width of the svg, but it isn't.
In my actual site, the svg is given the width of the window
<svg height="119" width="1366">
<path...
Can somebody explain why the svg path is not filling the space provided and how to get it to do so?
Note, the svg is the full width of the screen, it is just the path which falls short.
I make the svg via the below script, but I'm thinking the issue is not in the script because the last value in the path is equal to the total width of the svg
for(let i = 0; i< points.length; i++) {
track = track + (points[i].distance / totalDistance) * layout.width + ' ' +
((maxHeight - points[i].height) / rangeHeight ) * svgHeight + ' L ';
}
return {
track: track = track + layout.width + ' ' + rangeHeight + ' L 0 ' + rangeHeight
}
});
I suspect the script is the problem. The last data point in the plot is at
L 1314.6117266886256 77.66199637121403
before the the graph dives down screen to
L 1366 1535.7468222475618
and back to
L 0, 1535.7468222475618
so the fill will work. Currently the plummet in the plot is clipped by the view port so it looks like it's vertical and as if the graph cuts off at x = 1314, whereas it doesn't and continues to x=1366. This can be demonstrated by changing the view port height to several thousand and removing the height attribute on the svg tag.
Why the script doesn't plot a data point at 1366 is unclear - I would expect the distance represented by points[points.length-1].distance would be the same as totalDistance. Perhaps some judicious logging will clear up the matter.
Note that use of the unscaled rangeHeight value (unrelated to svg dimensions) can be replaced by svgHeight when completing path data as for example:
return {
track: track = track + layout.width + ' ' + svgHeight + ' L 0 ' + svgHeight
}
That's because you are slicing your path on the y axis.
y values go down to 1535, and your viewBox stops at 120. You then have all the way down to y:1535 in diagonal that goes from x~=1320, y=120 to x:1366, y:1535 that get hidden in your image, but which is still part of the BBox.
So you just have to fix the y value in your viewBox and to add preserveAspectRatio="none" in order to stretch your path.
svg{ border: 1px solid}
<svg width="100%" height="119.1" viewbox="0 0 1366 1535.7468222475618" preserveAspectRatio="none"><path fill="blue" d="M 0 93.6895418127642 L 2.665123367659168 94.90951776684683 L 4.2895612672752135 95.15586786527933 L 5.204138083194765 95.52176851940251 L 7.7378161096114955 95.4968606554659 L 11.796534397512328 94.86507944410728 L 14.9873069580359 95.05820497877262 L 16.756067470338387 94.77967748096344 L 18.421891072530475 95.16810832132134 L 19.88958479564756 95.45663219779111 L 22.634942167376725 95.88126715542622 L 26.184890456874864 95.57351845480213 L 28.587916433168083 96.01081520391392 L 31.199511238479634 95.3382488653906 L 33.38809911206268 94.66131221953057 L 36.617723255618394 93.85346911989356 L 37.65906382915835 93.50822794622684 L 43.29465530719694 91.94007945222616 L 45.716759684221024 90.95158454736118 L 46.23418125941004 90.65919298964516 L 49.255795487153705 91.11934266396851 L 53.89271252054174 91.37524000592352 L 59.55509369824439 89.76761365783392 L 74.71239046154567 86.85588402071572 L 76.3156550476323 86.59673916397207 L 77.76213912056488 87.33267957936282 L 79.15299880688353 86.79470361982295 L 80.95990641532082 84.97713718709238 L 82.90222743583448 85.71152051204957 L 87.53337570384602 84.31175142512346 L 115.9785644393456 75.83435851234935 L 132.00356781551105 70.47999085360084 L 133.58937876896545 70.10454286234689 L 133.95732529432212 70.25745852331632 L 136.67945834452576 70.3768657869749 L 138.5576884937648 70.56735065592682 L 139.82273892809195 70.03075226943392 L 142.9898781345473 68.5799541971048 L 145.95202507835424 69.29762420428824 L 150.50894185058112 67.43118085972195 L 154.62159634599612 66.68568032640702 L 169.53919747246763 59.59184397837285 L 172.34408940163092 59.76661681324125 L 179.41323957617433 54.23712395717909 L 183.18452899857706 55.40387210153476 L 184.0517824411765 55.29838465800259 L 198.08060711429832 48.21844941522161 L 201.9903786283023 48.704890678403935 L 202.48752991273093 48.49738248187275 L 204.34662118685745 47.41276016266789 L 205.01124027256498 46.990440798310104 L 205.49659566406584 46.518242556207255 L 206.8418394859621 46.08028132180215 L 210.03951819735218 43.87559690008509 L 212.338584260495 42.21410052551513 L 215.13428901896637 40.00206616499397 L 216.22883500849494 39.271020348363514 L 217.94960418760922 38.15087869545533 L 218.56074500765445 38.19452386431356 L 221.3801994932312 36.592252387318595 L 223.30002523442425 36.93992956021575 L 224.10404241236913 36.791248671214916 L 224.71071496536376 36.47391294902361 L 228.41149727226718 36.85678910758367 L 228.75425359524786 36.894877630415635 L 230.54735298302236 36.25746535877406 L 233.78344097837038 34.139991745198586 L 234.93588064029692 33.38848346925461 L 238.5468723380036 33.624154282406906 L 239.31506808990252 33.60244405886698 L 243.79898809077113 32.684517066199525 L 250.6593160723187 32.676748323928244 L 252.17318560940996 32.304214919317666 L 254.00342960748807 32.59333023011129 L 258.2276619957761 32.72851732000699 L 259.97230778182046 33.099291548809354 L 265.4090892850939 33.75428998833749 L 267.0635669446066 33.73377259828705 L 270.52300329337686 33.192374901844545 L 285.48309832360417 30.122683953308066 L 290.5227384353614 29.85905415149619 L 295.25893355417685 30.958678966322548 L 301.4502335605041 31.136185693487686 L 306.8208117842427 31.57304886360337 L 339.47192403440647 28.060679864829428 L 342.1449661049091 27.794486617474085 L 353.9323391224938 25.37009416334379 L 356.6018605192946 24.82921719693516 L 359.64767048445555 24.181681318588037 L 362.57780656478553 23.755884739419958 L 363.65249511822043 23.3515193287727 L 368.2120398933081 21.942193470917374 L 370.35649976050325 21.69368310986994 L 373.99343835721373 20.80390792873542 L 376.414161449733 20.297356339910245 L 376.787157865503 20.246882130423856 L 377.6205065246026 20.100203758158866 L 380.0060469073525 19.644098789164627 L 382.2442022192896 18.49717114163059 L 383.9720543154379 17.954255448859406 L 384.9379270536342 17.582345963166865 L 387.21871501577016 17.46355040252647 L 398.5817348795498 15.744955757669509 L 403.7694228757952 14.455680750218848 L 407.08599127831803 13.303027478807884 L 410.1646026186511 13.273746609992454 L 429.2129721545638 9.461786592069828 L 447.0134203224187 8.161005374319608 L 448.60778248355723 7.645924358835366 L 468.6327826995717 7.981351456431004 L 475.32330845699545 5.70710018647154 L 483.34724799131357 2.4489215203781627 L 498.8456289249868 5.760337773520393 L 499.67912261812467 5.537475774374966 L 505.7973512825049 7.83719544468438 L 511.9666885977891 4.8031686551094674 L 517.9090181061771 0 L 526.388911295637 3.746907359885273 L 530.0474682624499 5.531335897259933 L 533.6831685801574 6.7096555767811905 L 538.4312447068208 4.437323229797208 L 542.5155236808126 3.5935567127955332 L 548.0622665277615 6.694405957766618 L 555.368489359055 7.413294398771164 L 557.4986740798215 7.816979560350507 L 558.9051301230962 8.424058923225747 L 562.2743827363502 9.91972842233779 L 564.8259341029334 11.289955040436165 L 565.8119813104888 11.926112522978205 L 568.9568656616074 14.030254441031873 L 573.1827172987125 14.828825421693766 L 578.3785767455453 15.334117293663994 L 584.1515464253678 14.064073191170861 L 586.1728574199217 14.122703467730394 L 587.2977423590918 14.251599444958874 L 588.3738791103115 14.600886272848552 L 590.7752256255633 15.337302161105766 L 591.0649543950095 15.414279874259574 L 593.2364141814209 16.467370584845725 L 596.378658509884 18.804552245216243 L 598.6429172973552 20.07477362660744 L 601.1344308324669 20.1395124966016 L 604.9756672147997 19.424378997691218 L 609.6324294777376 19.278439992334462 L 614.1807345210082 18.854040532043992 L 616.177704194166 18.915110878874664 L 622.3401206580357 18.813564909394568 L 624.6527893862285 18.346742657988273 L 625.7190437085152 18.03998714571526 L 629.2447187238298 18.108664956966145 L 632.0310154758156 19.41404894077666 L 634.4641695555704 21.67012042804931 L 635.481932256133 22.393744083780668 L 638.4559888575782 23.080603444933192 L 641.510901615907 25.468831984343865 L 644.6931156109835 27.06003438171469 L 646.700214681451 27.255658620829642 L 648.7975316593405 26.457704119074755 L 650.0947372687093 26.249000064662255 L 654.2635056995479 26.766110291551744 L 658.6312548121922 26.878056186067017 L 660.1225340577158 26.71879173768677 L 663.628713091155 26.455229068371217 L 667.4946606070508 26.163112801685955 L 669.9542581756274 27.303327863722238 L 677.0127917345734 27.13578451581777 L 684.8122456915586 28.020605418766433 L 689.7482589536 27.51562718982995 L 714.3428542269559 28.408487848798977 L 720.6124214544949 31.549115632008036 L 727.2114778228455 35.106569937273385 L 762.1185692296282 46.632774046529136 L 767.2524456752058 48.29894920704799 L 773.5629096514042 49.16365256299842 L 783.0820469695753 52.066317725578976 L 784.0033625779054 52.25121726808711 L 784.6107537596346 51.95598265202461 L 788.0726344863083 52.668067310098444 L 791.5166114383851 52.6930444750226 L 793.3492301858332 52.512724089873835 L 794.5698293956268 52.935715239517755 L 796.2374281679132 52.97432361876515 L 798.9351287733825 53.31397459181399 L 802.5416921350363 55.960507656235045 L 805.5781878322663 56.881157044145716 L 814.3287318917567 56.854790401935716 L 817.0000157817514 58.83045675263215 L 821.5595291296794 60.738787981228306 L 832.9692771556078 65.43466237763657 L 837.5475956866258 66.86841046711476 L 847.7564099756963 67.6362510578752 L 864.5970910744117 67.91874478579993 L 898.6022006693901 78.3141373971703 L 924.1257060529387 81.34734144959816 L 936.115659825146 81.66373244937131 L 952.5395355813768 83.38818295913383 L 966.8920484489237 87.02866001977004 L 985.1491169788279 86.48653833949837 L 991.5416555933199 90.11737233685511 L 1004.3271437352008 92.04441229714145 L 1017.3658624262649 89.70632037960343 L 1023.3508172604021 89.90279816847024 L 1027.4687085173787 91.99284340733254 L 1028.4793059461576 92.05061541340609 L 1028.952486787462 92.09072831613449 L 1031.3174185577661 92.34885505963966 L 1033.4641770257906 93.69325656737531 L 1039.1505247860423 96.64667935969715 L 1043.060166795977 98.41294343913069 L 1046.8703354819286 100.22445436749487 L 1056.7636732583996 99.70763382706583 L 1066.819054032742 97.95914505968518 L 1070.4724832649208 96.66304486664104 L 1077.3502579049352 95.73100889092025 L 1083.694606401379 94.89703781395599 L 1092.3619875058187 95.05023846894626 L 1100.602904117155 91.2927544872155 L 1104.0257739645165 88.54922961637493 L 1116.543854149713 87.01515463815245 L 1127.5402475931287 87.59694953569955 L 1135.6793875687938 85.8789496263917 L 1146.6435673479255 88.70567080072436 L 1156.7145425214592 91.49476558759186 L 1177.0857006728386 104.1 L 1179.8523304540697 103.72101909178603 L 1180.048674351256 103.74069081403994 L 1185.106175192035 102.6473473570614 L 1210.6440269758577 95.52478673869703 L 1219.6809408711752 93.73918640283988 L 1240.518031099135 90.02964304369375 L 1280.3576814932712 82.33568355595172 L 1294.6106145311173 80.6754493779673 L 1314.6117266886256 77.66199637121403 L 1366 1535.7468222475618 L 0 1535.7468222475618"></path></svg>
i have a path like this
var r = Raphael('graph', 600,400);
var l = r.path('M 300,185 L 75,185 Q 65,200 75,215 L 300, 215 Z');
i want the path to animate to final position
var l1 = r.path('M 350,185 L 75,185 Q 65,200 75,215 L 350, 215 Z');
Its a rectangle but curved from left side. I want to animate its right side to left/right.
How i can do this in raphael.js?
var r = Raphael('graph', 600,400);
var l = r.path('M 300,185 L 75,185 Q 65,200 75,215 L 300, 215 Z');
l.animate({path : 'M 350,185 L 75,185 Q 65,200 75,215 L 350, 215 Z'}, duration);
I guess.