Questions tagged [cubic-bezier]
74 questions
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
- 296,393
- 112
- 651
- 745
2
votes
2 answers
How to draw a piecewise cubic spline in SVG
I receive a list of points from my layout engine (ELK) which I would like to convert to a SVG path.
I've got the following:
A start point
An end point
A list of bend points that "must be interpreted as control points for a piecewise cubic…
Gyum Fox
- 3,287
- 2
- 41
- 71
2
votes
1 answer
Calculating exact animation delay
I am trying to animate an svg element as following
a. I want to increase the width of the rect and control the rate of animation speed with a cubic-beziervalue, in this case it is cubic-bezier(0, 0, 0.58, 1).
b. There are also 3 lines which I also…
smpa01
- 4,149
- 2
- 12
- 23
2
votes
0 answers
Find Bezier control points P1 and P2 given P0, P3 and B(t) as knowns
I'll be doing this in LUA. 2D cubic bezier curve.
I know the start and end points of the curve and I have an arbitrary point with x,y,t all known.
I have tried to apply de Casteljau to this so:
I know that I want to find P[1][0] and P[2][0] given…
LucyLa
- 43
- 4
2
votes
1 answer
Given a cubic Bezier curve with fixed endpoints, how can I find the x position of a point along it when given a y position to check?
Let's say I have a Bezier curve with two fixed endpoints, one at x(0), y(1) and one at x(1), y(0) (bottom left corner and upper right corner)
Now let's say I have two control points, which can be at any locations between x(0), x(1), y(0), and y(1).…
OOPS Studio
- 732
- 1
- 8
- 25
2
votes
1 answer
SVG: reverse cubic and quadratic bezier curves
I'm working on a script to reverse the draw direction of SVG path commands, everything is working smoothly so far but not with S path commands or T.
In one of my implementations for path reverse functionality based only on cubic bezier C curves,…
thednp
- 4,401
- 4
- 33
- 45
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
- 29,530
- 58
- 194
- 315
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
- 22,637
- 36
- 92
- 121
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_
- 1,040
- 10
- 23
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,682
- 2
- 21
- 44
2
votes
0 answers
css cubic-bezier behaves differently in IE11 and Edge vs. Chrome
I have the following CSS rule:
div {
width:10%; background:black;
transition: width 2s cubic-bezier(.15,.88,0,.99);
-o-transition: width 2s cubic-bezier(.15,.88,0,.99);
-ms-transition: width 2s cubic-bezier(.15,.88,0,.99);
…
John
- 32,403
- 80
- 251
- 422
1
vote
1 answer
How do i verify the gradient at midpoint coordinate which i calculate by using cubic bezire curve equation
A cubic curve is defined by point (1,1);(2,3);(4,4) and (6,1) cal the parametric mid point of the curve and verify that its gradient dy/dx is 1/7 at this point
I successfully calculate the mid point by using the parametric value as 0.5 in my cubic…
mukul bhardwaj
- 13
- 3
1
vote
2 answers
What do the in- and out-tangents in glTF's cubic splines visually represent?
Keyframe animations in glTF support "cubic spline" interpolation, with the specification for them simply saying (with my added emphasis):
Let:
n be the total number of keyframes, n>0;
tk be the timestamp of the k-th keyframe, k ∈ [1,n];
vk be the…
Phrogz
- 296,393
- 112
- 651
- 745
1
vote
1 answer
ipycanvas displaying final stroke_lines thoughout animation
So I was playing with animating some Bezier curves - just part of learning how to use ipycanvas (0,10,2) -- The animation I produced is really hurting my head. What I expected to see was a set of straight lines between 4 Bezier control points…
nickdmax
- 539
- 2
- 4
- 11
1
vote
1 answer
How to determine the ideal increment size of t value for a Bezier curve
I was playing around with Bezier curves trying to understand it.
Here is the code.
import pygame
import sys
pygame.init()
textSize = 25
font = pygame.font.Font(pygame.font.get_default_font(), textSize)
_t = 0
red = (255, 0, 0)
green = (0, 255 ,…
user16038533