Как нарисовать неправильную / нарисованную от руки линию с помощью svg / canvas?

Я хочу нарисовать вертикальную линию с изменяемым размером (в зависимости от содержимого страницы), но она выглядит нарисованной от руки, а не прямой.

В настоящее время я думаю об использовании SVG или Canvas для достижения этой цели. Линия будет проходить по краю моей веб-страницы, поэтому ее необходимо масштабировать между верхом и низом контейнера. Как я могу этого добиться?