Svelte Hover Draw SVG

A lightweight Svelte component to draw SVG on hover.

Features

• 🤏 Lightweight: Wrapper component with only svelte as dev dependency
• 😌 Straightforward: Just put your SVG or component with SVG under the component
• 📦 Encapsulated: Expose hovering for extra hover effects & conditionals
• 🛠 Customizable: CSS variable --duration to set the duration

Blog post @hashnode: Build a Svelte Component To Draw SVG On Hover

Install

npm install --save-dev svelte-hover-draw-svg

yarn add -D svelte-hover-draw-svg

pnpm add -D svelte-hover-draw-svg

Prerequisite:

SVG shape must have a stroke

<svg stroke="#000" stroke-width="2">
  <path />
</svg>

This library works better with "Outlined" SVGs.

Usage

• Inline SVG:

<script>
  import HoverDrawSVG from 'svelte-hover-draw-svg';
</script>

<HoverDrawSVG>
  <svg>
    <path />
  </svg>
</HoverDrawSVG>

• SVG Component (set draw time to 2s, default is 1s):

<script>
  import HoverDrawSVG from 'svelte-hover-draw-svg';
</script>

<HoverDrawSVG --duration="2">
  <SvgComponent />
</HoverDrawSVG>

• Nested elements (expose hovering status):

<script>
  import HoverDrawSVG from 'svelte-hover-draw-svg';
</script>

<HoverDrawSVG let:hovering>
  <a href="/" class:hoverEffect={hovering}>
    <svg>
      <path />
    </svg>
  </a>
</HoverDrawSVG>