Category: svg

14
Апр
2021

Перемещение элемента по кривой Безье по клику в обе стороны

Имеются две точки (A и B) и кривая Безье от одной к другой. При клике на точку A мы запускаем с помощью animateMotion анимацию перемещения элемента вдоль пути движения из точки A к точке B.

<svg id=”svg” width=”500″ height=”300″ vie…

14
Апр
2021

Как создать интерактивный план здания c Dash и Plotly?

При создании интерактивного дашборда с помощью Python, Dash и Plotly, требуеться создать интерактивное окно, на подобе этого: https://plotly.com/python/mapbox-layers/, только вместо карты должно быть SVG изображение с планом помещения: Flo…

12
Апр
2021

Оптимальная визуализация клеточного автомата в HTML

Пишу игру жизнь с динамическим интерфейсом (чтобы можно было приближать/отдалять разные участки поля, менять цвет клетки).
Canvas буду использовать в крайнем случае из-за сложности вычисления координат и т.д.
Сначала была идея создавать по…

09
Апр
2021

Как нарисовать карту, нанести на нее точки (маркеры) и анимировать к ним всплывающие подсказки (tooltip) при наведении?

У меня есть следующее изображение карты:

Задача: Мне необходимо нарисовать такую карту средствами и технологиями, которыми это выполнить возможно, и нанести на нее точки (маркеры), обозначающие города. Кроме этого, при клике на маркеры до…

09
Апр
2021

SVG Артефакты между клетками

Есть поле с клеток в svg. Расстояния между ними нет, но отображается так как будто есть (линии пространства между клетками которые при движении/изменении размера меняются).

Как это обойти? Подложку сделать нельзя, т.к. клетки будут разных…

05
Апр
2021

Математический маятник, анимация демонстрирующая этот эффект

Математический маятник — осциллятор, представляющий собой механическую систему, состоящую из материальной точки на конце невесомой нерастяжимой нити или лёгкого стержня и находящуюся в однородном поле сил тяготения. Другой конец нити (стер…

05
Апр
2021

Как нарисовать прямоугольник на SVG движением мыши?

Я нашел код на fiddle, который при движении мыши рисует (щелчок и перемещение линии).
Мое требование – обвести прямоугольник на SVG движением мыши таким же образом.
Возможно ли это, если да, то как?

//Canvas
const canvas = document.g…

05
Апр
2021

Плоская кривая графика реакции d3 + vx в каждой точке данных

Я пытаюсь построить что-то вроде таких линий https://dribbble.com/shots/2673159-Funnel-UI-concept/attachments/538068

Я просмотрел все кривые, предоставленные d3/vx, и, похоже, ни одна из них не имеет кривой между каждым отдельным шагом с…

03
Апр
2021

Заполнить строку circle с выводом процентов, относительно другого circle

Хочу повернуть круг .progressbar__thumb, чтобы линия на круге двигалась из другого места. Но что-то идёт не так. Подскажите, как правильно повернуть?

const progressbarThumb = document.querySelector(‘.progressbar__thumb’);
const progres…

30
Мар
2021

Нарисовать правильный треугольник вписанный в окружность

Задача: нарисовать окружность радиуса R, а в нее вписать правильный треугольник.
Для треугольника ABC (основание BC параллельно оси x) получаем такие координаты точек

A: (R, 0)

Для R = 50 получается картинка

<svg version=’1.0′ x…

24
Мар
2021

Как сделать так, чтобы текст SVG-изображения был двухцветным в зависимости от его положения при вращении

Мне нужно сверстать эту SVG-картинку таким образом, чтобы та её часть, которая на чёрном фоне была белой, а та, что на белом фоне – была чёрной. Картинка будет вращаться, поэтому само изображение не вариант закрасить наполовину чёрным напо…

18
Мар
2021

SVG нарисовать линию соединения между двумя прямоугольниками

В настоящее время я программирую редактор диаграмм на javascript с помощью SVG.
У меня возникла проблема, связанная с соединением прямоугольников. Я нашел много ресурсов, чтобы нарисовать связь между кругами, но ничего о прямоугольниках.
И…

17
Мар
2021

Как нарисовать кольцевую диаграмму с закругленными углами и разными градиентами и тенями в каждом сегменте

Мне необходимо реализовать кольцевую диаграмму как на изображении ниже:

Возникает несколько проблем:

Каждый сегмент окрашен в свой градиент
Сегменты имеют закругленные края
Каждый сегмент может быть использован в дальнейшем, как ссылка

14
Мар
2021

Самый простой способ создавать облака

Облака очень часто используются и в виде иконок и как отдельный элемент фона, фоновой анимации и во многих других случаях оформления веб страниц
Ниже пример одной из "облачных" иконок

<svg xmlns=”http://www.w3.org/2000/s…

10
Мар
2021

Как сделать шрифт толще 900 с помощью css

Я хочу сделать свой шрифт очень толстым из-за цвета фона изображения моих друзей, которое находится в заголовке веб-сайта. Я нашел это в Интернете, но, к сожалению, он не работает. есть ли другой способ сделать это?

h1{
text-shadow: …

07
Мар
2021

Как привязать SVG анимацию ко времени?

В общем заезженная тема но не увидел здесь решения !
Есть обычный chart на SVG
И так же есть таймер на javascript
Как синхронизировать эти две анимации chart + timer ?
Синхронизировать их таким способом что бы полоса прогресса зависела от …

06
Мар
2021

Как пропорционально увеличить перспективу?

Есть такой замечательный способ выставления перспективы – https://bl.ocks.org/mbostock/10571478
Тут контрольные точки и они же точки по которым считается перспектива, расположены по углам квадрата, т.е по границе вращаемого изображения, а …

06
Мар
2021

Пропорциональное изменение размеров дочернего элемента (полностью адаптивный квадрат) при изменении размеров родительского элемента

У нас имеется следующий HTML+CSS код:

function parentH() {
let height = document.querySelector(‘#parent_range_H’).value + ‘px’;
document.querySelector(‘#parent’).style.height = height;
document.querySelector(‘#children’).style.he…

06
Мар
2021

Как сделать, чтобы текст при использовании textPath был всегда сверху?

Изучаю команду SVG: textPath, которая позволяет разместить текст вдоль криволинейной траектории.
Вот пример из теоретического источника: MDN

<svg viewBox=”0 0 100 100″ xmlns=”http://www.w3.org/2000/svg”>

<!– to hide the pa…

06
Мар
2021

Сглаживание текста SVG перед применением фильтра

Фильтры SVG растрируют исходное изображение, это означает, что отфильтрованный текст не будет сглаженным, что приведет к неровным краям.
Есть ли обходной путь для этого? Возможно ли использовать другой фильтр для имитации сглаживания, или…

01
Мар
2021

Как сделать адаптивную координатную сетку

Часто вижу в ответах использование координатной сетки

Она используется, как фон для различных элементов. Но эта сетка нарисована видимо в растровом редакторе и сохранена в растровом формате.
На мой взгляд, для адаптивности, видимо нужно с…