SVG, path, animation, line, draw - script Drive OnOff

codepen.io/mill01/pen/MWKJbVa

jsfiddle.net/mill01/b29vqu0h/embed/"></script>

SVG, dashoffset, X,Y, animation

https://jsfiddle.net/user/dashboard/fiddles/

web library - petercollingridge Site http://www.petercollingridge.co.uk/tutorials/

Tutorials

Home

Explaining how to make fun things because, if nothing else, it helps me understand them.

SVG Tutorials

Collections of SVG tutorials covering the basics to more advanced techniques for making SVGs interactive.

3D Graphics

Building simple 3D engines with Pygame or processing.js.

Pygame physics simulation

Building a simple but versatile physics simulation with Python and Pygame.

Computational geometry

Solving geometry problems for computer graphics.

Inkscape

How to achieve some simple effects in Inkscape.

Bioinformatics

Various tutorials explaining some simple bioinformatics concepts.

Python

Not really a tutorial, but short explanations of various Python things I've learnt.

Project Deadline - SVG animation with CSS3

.

Build and edit SVGs in the browser http://jxnblk.com/paths

SVG Path Commands

The path element is used to create complex shapes based on a series of commands. Each command begins with a letter and is followed by numbers representing x/y coordinates according to the SVG’s viewBox attribute. Uppercase letters represent absolute coordinate movements, and lowercase letters represent relative movements. For simplicity, the Paths app only supports absolute movements.

For a more in-depth introduction, see the MDN Path Tutorial.

M x y

The Moveto command moves the current point without drawing. Paths must begin with a Moveto command to determine where the drawing starts.

L x y

The Lineto command draws a straight line from the previous command to its x/y coordinates.

H x

The Horizontal Lineto command draws a horizontal line.

V y

The Vertical Lineto command draws a vertical line.

C x1 y1 x2 y2 x y

The Curveto command draws a cubic Bézier curve with control points for the beginning and end of the curve. The final x/y coordinate pair determines where the line ends.

S x2 y2 x y

The Shorthand/Smooth Curveto command draws a cubic Bézier curve with a control point for the end of the curve. The first control point is a reflection of the control point from the previous command.

Q x1 y1 x y

The Quadratic Bézier Curveto command draws a quadratic Bézier curve with a single control point for both points on the curve.

T x y

The Shorthand/Smooth Quadratic Bézier Curveto command draws a quadratic Bézier curve, using a reflection of the previous command’s control point.

Z

The Closepath command draws a line to the intial point to close a path.

A rx ry x-axis-rotaion large-arc-flag sweep-flag x y

Note: The Arc command is currently not supported in the Paths app

The Elliptical Arc command draws an elliptical arc to the x/y coordinates.

How-To Use the App

Unlike other vector drawing applications, Paths has no tool palette or modes. Instead it exposes the path command syntax in a reactive user interface.

• Use the form to the right to manually adjust the type and parameters for each command.
• Add new points with the button below the form.
• Remove points with the × button next to the command.
• Click to select points on the canvas.
• Click and drag to move points.
• Use the arrow keys to nudge points.
• Click anywhere on the canvas to add a new point after the selected point.
• Click the blue × button to the right of the command syntax tooltip to remove a point.
• Click outside of the canvas to deselect all points.
• Use the toolbar below the canvas to toggle the following:
  • Grid visibility
  • Snap to grid
  • Path preview mode
• Use the Download link to save the SVG.
• Use the + & - buttons to zoom in and out.
• Copy and paste the URL (along with the parameters) to share links with others.

https://a11y.gitbook.io/graphics-aria/svg-graphics

SVG는 많은 웹 접근성 이점을 제공하는 강력한 웹 기술입니다. 접근성을 염두에 두고 구조화 된 방식으로 만들 수 있기 때문에 SVG를 사용하여 콘텐츠용 이미지, 그래프를 만듭니다. 또한 SVG는 모든 최신 데스크톱 및 모바일 브라우저에서 지원됩니다.

JavaScript animation engine https://animejs.com

https://github.com/juliangarnier/anime

SVG animation example

http://tutorials.jenkov.com/svg/svg-animation.html