draw() — svelte Function Reference

Architecture documentation for the draw() function in index.js from the svelte codebase.

Function javascript AnimationLibrary Transitions

Entity Profile

AnimationLibrary→ Transitions→ draw() — svelte Function Reference

Dependency Diagram

graph TD
  9772e538_6ab3_cdb4_f638_cd8db649eebd["draw()"]
  8795a504_2189_bf07_fb96_096bc8c92d25["index.js"]
  9772e538_6ab3_cdb4_f638_cd8db649eebd -->|defined in| 8795a504_2189_bf07_fb96_096bc8c92d25
  style 9772e538_6ab3_cdb4_f638_cd8db649eebd fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/transition/index.js lines 186–210

export function draw(node, { delay = 0, speed, duration, easing = cubic_in_out } = {}) {
	let len = node.getTotalLength();
	const style = getComputedStyle(node);
	if (style.strokeLinecap !== 'butt') {
		len += parseInt(style.strokeWidth);
	}
	if (duration === undefined) {
		if (speed === undefined) {
			duration = 800;
		} else {
			duration = len / speed;
		}
	} else if (typeof duration === 'function') {
		duration = duration(len);
	}
	return {
		delay,
		duration,
		easing,
		css: (_, u) => `
			stroke-dasharray: ${len};
			stroke-dashoffset: ${u * len};
		`
	};
}