Questions tagged [cubic-bezier]
55 questions
24
votes
2 answers
Understanding cubic-bezier transition property in CSS
I have a div which contains a some slides and menu.
#wrap {
position: relative;
top: 0;
transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
}
Can anyone explain to me what the transition property does…
UnderTaker
- 725
- 2
- 10
- 19
13
votes
2 answers
Subdivision of Four-Sided, 2D Shape
I'm looking for an approach to splitting a four sided shape into a grid. For example:
Ultimately I need to be able to convert the resulting shapes to SVG, but I'm happy to handle conversion to/from another library or coordinate system. What I'm…
Undistraction
- 38,727
- 46
- 165
- 296
5
votes
1 answer
MPAndroidChart: LineChart with cubic bezier displays wrong (spikes and loops)
I am trying to make a LineChart with a cubic plot. The result is like in the screenshot below: the cubic bezier displays wrong and has "spikes". Can someone help me make it appear correctly?
This is my config :
LineDataSet lineDataSet = new…
Malcom
- 263
- 2
- 10
4
votes
1 answer
How do I find the control points for a Bezier curve?
I need to implement connections in the form of curved lines in C# (Unity). I would like to get the result as similar as possible to the implementation in Miro.com (see screenshot).
After attaching the curve, I calculate the path of the cubic Bezier…
g0dzZz1lla
- 65
- 3
4
votes
3 answers
Is it possible to express "t" variable from Cubic Bezier Curve equation?
I want draw bezier curve only by fragment shader to connect nodes in my editor. I know all 4 points that define Bezier Curve. And Fragment Shader is called for every pixel, so i can just check: if "t" for gl_Coord.x is between 0 and 1 then set…
Ryan Kane
- 63
- 5
4
votes
2 answers
Cubic bezier curves - get Y for given X - special case where X of control points is increasing
I've read a few discussions regarding finding Y at X for a cubic Bezier curve, and have also read this article regarding the matter.
My case is more constrained than the general one, and I wonder if there's a better solution than the general ones…
Jake
- 252
- 1
- 10
4
votes
2 answers
B-Spline Curves coefficients - division by zero (code in DELPHI)
I was trying to implement the following recursive formula to my code
but to my surprise it turns out that after implementing this to DELPHI, I get an error due to division by zero. I am 98% sure that my knot vector is correctly calculated, which in…
skrat
- 526
- 6
- 19
3
votes
1 answer
how to draw smooth curve using native Javascript code without ctx.bezierCurveTo?
I need to draw and get coordinates of bezier curves of each steps with native Javascript without ctx.bezierCurveTo method.
I tried below method but it was not worked properly.Here I attached my code and output curve.
const accuracy = 0.01; let temp…
Randima Lahiru
- 149
- 7
3
votes
3 answers
How can I create a 3D cubic-bezier curved triangle from 3D points in Three.js?
Following this topic, I am trying to generate a 3D curved triangle as a NURBS surface, but I don't understand how to set up my 3D points to do that.
Here is the current implementation :
var edges = this.getEdges(), // An edge is a line following 4…
Tot
- 749
- 1
- 8
- 24
3
votes
1 answer
Split a cubic Bézier curve at a point
This question and this question both show how to split a cubic Bézier curve at a particular parameterized value 0 ≤ t ≤ 1 along the curve, composing the original curve shape from two new segments. I need to split my Bézier curve at a point along the…
Phrogz
- 271,922
- 98
- 616
- 693
2
votes
0 answers
How do I Calculate Control Point/Handle X-Position for a Cubic Bezier Curve if I have the Formula?
I have a curve that adheres to the bezier formula, and then I have to back-calculate the handle positions.
We know that the Po or Poy are [493.33970441 486.78826487 497.69599613 489.07543952] for Po, P1, P2, P3, through least squares interpolation.…
njho
- 1,227
- 2
- 17
- 28
2
votes
1 answer
calculating a css easing function from an svg path
I have a circle that follows an svg path using the css offset-path declaration:
circle {
offset-path: path('M-0.4-3.3l-30,50c0,0,27,79,79,79c0,0-72-32-79-170c0,0-145,86-254-40');
}'
Then I have an animation with a set of keyframes for how far…
mheavers
- 26,845
- 54
- 181
- 285
2
votes
0 answers
Get percent value of animation
Let's say I have following:
CSS
.animatedItem {
background-color: red;
width: 200px;
height: 200px;
transition: all 1200ms cubic-bezier(0.39, 0.575, 0.565, 1);
}
.animatedItemSate1 {
margin-left: 0px;
}
.animatedItemState2 {
…
Simon
- 20,641
- 35
- 87
- 120
2
votes
3 answers
Cubic Bezier curve not returning proper Y value, given (t, p0, p1, p2, p3)
My goal is to write an animation in JavaScript that performs an ease-in-out style bezier curve animation
(such as in http://cubic-bezier.com/#.42,0,.58,1)
I came up with the following script to calculate the y value given "x" value (time):
function…
HC_
- 970
- 8
- 21
2
votes
1 answer
CSS: how to apply different animation to same elements?
I have water animation. I want two keyframes to have cubic-bezier(1,.41,.74,.45) and third one to have cubic-bezier(.38,.8,.68,.09). In other words, I need waves to loop first 2 times same way, and on last one to behave differently. Overall, there…
Alyona
- 1,128
- 2
- 15
- 27