So how can you make it seem like an SVG is being animated on with a draw effect?

The short answer: stroke-dasharray and stroke-dashoffset

“These are very reliable and plenty of useful effects.”

Can use “transform: translate” on the path but not great browser support. Better support in the SVG itself. JavaScript is better for animating inner paths.

The example shown in the video is a simple SVG arrow icon animated in to the left of form input when either invalid or blurred.

He mentions the disabling the default focus outline elements is okay as long as you provide a sufficient alternative.

He uses valid and invalid pseudo selectors and a custom attribute like “data-touched”

.Input:valid {}
.Input[data-touched]:invalid {}

JS can add the data-touched attribute for blur and invalid events

Array.from(document.querySelectorAll()).forEach(i=>i.addEventListener("invalid, ()=> {
  i.dataset.touched = true
  })
i.addEventListener("blur", ()=> {
  if(i.value !== "") i.dataset.touched = true
  })
})

Instead of animating with opacity add a “stoke-dasharray” property with value of 5. Increase the width to 4 so you can see it better. Setting a second value (of say 1) sets how large the gaps will be.

The “stroke-dashoffset” property changes the start point for the above calculations.

Use the stroke dasharray to make the stroke the same length as path.self

Get the exact length by opening up the path in the browser and grab the path with the id and use getTotalLength method in the console.

//Select the path in dev tools, call $0 and then run
$0.getTotalLength() / 2 -0.5

Note: divide by two to find the center and subtract 0.5 because the line will be one pixel wide. Past this value into the CSS, including the decimals and not you’ve got your line right at the tip of the arrow.

We want this simple arrow to draw itself in.

Make the dash invisible by using a stroke-dashoffset and offsetting by the same length. Create a keyframes animation that animates the keyframes offset back to its original.

Part Three

Goal: animate an inline svg path from the center as the bottom border to an input when the input is active.

Sources

This video has some age on it but I really enjoyed. The first part goes over three modes of SVG, the second part starts at the 4:30 mark about hand-writing inline SVG, in this case an arrow in a 20px view box to the left of an input inside a form label that animates itself in. The third part starts at 11:52 about non-icon svgs.

Front End Center — Why Inline SVG is Best SVG, from 2017 here

Pretty slick website too at https://frontend.center/