RAX7

У тебя там все перепутано. Метод drawEllipse принимает координаты, а ты передаешь координаты и размер прямоугольника. К тому же неверно вычисляются центр и радиус эллипса. И посмотри на строки 35-38, линтер неспроста тебе там предупреждение выдает.
Держи исправленный вариант

function tabs(selector) {
  const tab = document.querySelector(selector);
  const tabNav = tab.querySelectorAll('.tabs-nav__item');
  const tabContent = tab.querySelectorAll('.tab');
  
  tab.addEventListener('click', selectTabNav);

  function selectTabNav(event) {
    const tabName = event.target.dataset.tabName;
    if (!tabName) return;
 
    tabNav.forEach(item => item.classList.remove('is-active'));
    event.target.classList.add('is-active');

    tabContent.forEach(item => {
      item.classList.contains(tabName) ?
      	item.classList.add('is-active') :
        item.classList.remove('is-active');
    });
  }
}

tabs('#tabs-1');
tabs('#tabs-2');

<div class="wrapper">
  <div id="tabs-1" class="tabs">
  <!-- ... -->
  </div>

  <div id="tabs-2" class="tabs">
  <!-- ... -->
  </div>
</div>

Почитать про анимации можно тут: https://learn.javascript.ru/js-animation
про рисование на канвасе - https://developer.mozilla.org/ru/docs/Web/API/Canv...

Можно с помощью ScrollMagic

class EventsBus {
  constructor() {
    this._callbacks = {};
    this._id = 1;
  }

  emmit(eventType, data) {
    if (!this._callbacks[eventType]) {
      return;
    }
    this._callbacks[eventType].forEach(item => item.cb(data));
  }

  on(type, callback) {
    if (!this._callbacks[type]) {
      this._callbacks[type] = [];
    }

    const id = this._id++;
    this._callbacks[type].push({
      id: id,
      cb: callback,
    });
    return { id, type: type };
  }

  revoke(prop) {
    const { type, id } = prop;

    if (!this._callbacks[type]) return;

    const index = this._callbacks[type].findIndex(item => item.id === id);
    if (index !== -1) {
      this._callbacks[type].splice(index, 1);
    }
  }
}

const bus = new EventsBus();

bus.on('hello', (data) => console.log('hello', data));

const evt1 = bus.on('boom', (data) => console.log('boom1', data));
const evt2 = bus.on('boom', (data) => console.log('boom2', data));
const evt3 = bus.on('boom', (data) => console.log('boom3', data));

bus.revoke(evt1);

bus.emmit('boom', 42);
bus.emmit('hello', '!!!');

Делаешь канвас поверх всей страницы, считаешь координаты нужного элемента и рисуешь линию на этом канвасе до координат курсора.

function yourXFunction(...args) {
  const asyncFns = args.slice(0, -1);
  const done = args[args.length - 1];
  let count = 0;

  function closureCallback(val) {
    count++;
    if (count === asyncFns.length) {
      done(val);
    }
  }

  asyncFns.forEach(fn => fn(closureCallback));
}

function wrap(parent, className = 'wrapper') {
  const wrapper = document.createElement('div');
  wrapper.classList = className;
  parent.childNodes.forEach(ch => wrapper.appendChild(ch));
  parent.appendChild(wrapper);
}

document.querySelectorAll('td')
  .forEach(td => wrap(td, 'text'));

reader.onload = function () {
  var img = new Image();
  img.src = reader.result;
  img.onload = () => drawMiniature(img);
};

https://developer.mozilla.org/ru/docs/Web/CSS/mix-...

function v(c) {
  return (document.getElementById(c) || {}).value;
}

let arData = ['User', 'Name', 'Class', 'Info'];

function ob_info(str, arr) {
  return arr.reduce((obj, item) => {
  	obj[item] = v(`${str}${item}`);
    return obj;
  }, {});
}
info = ob_info('data_', arData);
console.log(info);