profesor08

Сделать короткое зацикленное видео и вставить. Иначе на мощных системах все будет летать, а на остальных все будет тормозить.

Эта библиотека не про создание графиков. Но если хочется, то рисуй ручками фигуры, закрашивай их, подписывай.

https://pixijs.io/examples/#/graphics/simple.js
https://pixijs.io/examples/#/demos-advanced/spinners.js
https://pixijs.io/examples/#/interaction/interacti...

Лучше используй более приспособленные либы
https://www.highcharts.com/demo#pie-charts
https://observablehq.com/@d3/gallery

По хорошему тебе надо как-то масштабировать пирамиду, лучше если будешь вычислять высоту и ширину кирпичей, а так-же размер шрифта.

Код ниже лишь упрощает просмотр пирамиды, когда она большая.

body {
    background: var(--color-background);
}

.main {
    display: grid;
    gap: 30px;
    min-height: 100vh;
    grid-auto-rows: auto 1fr auto;
    padding: 30px;
}

.header {}

.header__rows {
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.camera {
    display: grid;
    justify-items: center;
    align-items: center;
}

.pyramid {
    display: grid;
    justify-content: center;
}

.row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    justify-content: center;
    width: 100%;
    height: 32px;
}

.brick {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    background: var(--color-backround-second);
    color: var(--color-main);
    min-width: 62px;
    height: 100%;
}

Это лишь линия на canvas, которая нарисована из точек разного диаметра постепенно увеличивающегося слева на право. Свечение одинаковое везде, просто меняется прозрачность.

На SVG линией не сделать, но тебе надо лишь сделать два контура, где второй контур будет чуть опускаться слева на право. Это слегка данные модифицировать данные. Потом контуры сомкнуть. Для наглядности представь треугольник. Свечение постоянное с маской меняющейся прозрачности.

Для canvas надо задать размер картинки, или целевой размер картинки, если хочешь с ней что-то сделать. Далее на CSS задать на canvas нужный размер, чтоб вписывался нормально в блок.

img.onload = function() {
  canvas.width  = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0, img.width, img.height);
};

Замерь визуально сколько занимает глобус пространства в %, замерь сколько занимает пространства дырка в линии, где должен быть глобус в %. Получи отношение на этих размеров, потом перемножай высоту и ширину своего svg на это отношение. Все значения должны быть в % и чем точнее измерения, тем точнее результат.

Но возможно ответ лежит здесь new THREE.SphereGeometry(210, 60, 60);

Раздели на несколько изображений равной высоты и ширины, и передавай их в THREE.js

Так двигай и все через move, зачем их по отдельности двигать? У тебя там два канваса разной высоты и непонято относительно чего берется y координата winfo_y(), полагают относительно окна, которое больше чем канвас, на котором расположены объекты.

Ты чертишь линию вправо, потом вверх, замыкаешь контур и красишь его. Вот что у тебя происходит.

ctx.beginPath();
ctx.moveTo(1, 150);
ctx.lineTo(100, 130);
ctx.lineTo(100, 230);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = 'red';
ctx.fill();

И задай размер канвасу, чтоб все твои манипуляции не уходили за его предел.

Посчитай отношение ширины к высоте, потом умножай высоту на полученный коэффициент при ресайзе. Простейшие вещи же..

Три картинки, бошки отдельно, жижа отдельно. Бошки просто двигай, жижу держи на месте и растягивай. Получится то, что получится. Красивым не назовешь, но простой картинки большего ожидать не стоит. Хочешь большего - three.js и шейдеры, шейдеры, шейдеры.

canvas online editor

Добавить к объектам стиль pointer-events: none;

Либо слушай на события не canvas, а window.

Ручками надо делать, ручками, при движении курсора, у тебя будут доступны его координаты. Тебе нужна координата X. Так же тебя есть этот path, получи из него координаты каждой его точки. Тут тебе понадобится координата Y. Так вот при движении курсора берешь и смотришь, чему равна координата Y на по X, и устанавливаешь своей стрелочке полученные ранее значения X и Y. Все.

https://developer.mozilla.org/ru/docs/Web/API/Canv...

Функция принимает конкретные параметры и их типы. Ты подсовываешь туда что-то другое.

Тебе надо три точки. Первая это начальное положение угла, за который тянешь, вторая это положение указателя, третья это цент фигуры. Определи величину угла центра фигуры, будет значение от 0 до 360. Таки образом тебе останется прибавить(отнять) это значение к начальному значению ротации. Если в радианах, то перевести в них соответственно. Определить направление движения указателя не составит труда, отталкивайся от начального его положения.