Components
Line
Stroke
#f08f2f
Background
#506e89
Line
x1
x2
y1
y2
Dash Array
Dash Array
Dash Array
Dash Array
Stroke Width
Stroke Dash Offset
Stroke Linejoin
miter
round
bevel
Stroke Linecap
butt
round
square
Stroke Miter Limit
Stroke Opacity
Fill Rule
nonzero
evenodd
Animation
Name
Duration
Iteration Count
0
1
2
4
8
16
32
64
infinite
Timing Function
ease
ease-in
ease-out
ease-in-out
linear
cubic-bezier(.17,.67,.43,1)
cubic-bezier(0, 0.5, 0, 1)
cubic-bezier(0.1, 0.7, 1.0, 0.1)
cubic-bezier(0.2, 1, 0.3, 1)
cubic-bezier(0.215, 0.610, 0.355, 1.000)
cubic-bezier(0.25, 0.25, 0.75, 0.75)
cubic-bezier(0.550, 0.085, 0.680, 0.530)
cubic-bezier(0.645, 0.045, 0.355, 1)
cubic-bezier(0.755, 0.050, 0.855, 0.060)
step-start
step-end
steps(4,jump-end)
steps(10, jump-end)
steps(20, jump-none)
steps(5, jump-both)
steps(6, start)
steps(8, end)
inherit
initial
unset
Direction
normal
reverse
alternate
alternate-reverse
Stroke
#552dbd
Dash Array
Dash Array
Dash Array
Dash Array
Stroke Dash Offset
Stroke Width
Stroke Opacity
Size
Width
Height
View Box
Width
Height
Min X
Min Y
Stroke Linejoin
none
non-scaling-stroke
non-scaling-size
non-rotation
fixed-position
Shape Rendering
auto
optimizeSpeed
crispEdges
geometricPrecision
Svg
<style> @keyframes flow { to { stroke-dashoffset: 1852; stroke-width: 10px; stroke-opacity: 0.5; stroke: #552dbd; stroke-dasharray: 0 0 0 0 } </style> <svg fill='#f08f2f' color='#f08f2f' viewBox='0 0 1920 128' width='100%' height='100%'> <line y1="0" y2="0" x1="0" x2="1920" stroke="currentColor" fill="#f08f2f" fill-rule="undefined" stroke-width="10px" stroke-dasharray="0 0 0 0" stroke-opacity="1" stroke-linecap="butt" stroke-linejoin="bevel" stroke-dashoffset="0" style="animation: flow 4000ms steps(4,jump-end) 0ms infinite alternate-reverse backwards" /> </svg>
Next
Grid view