Имеются две точки (A и B) и кривая Безье от одной к другой. При клике на точку A мы запускаем с помощью animateMotion анимацию перемещения элемента вдоль пути движения из точки A к точке B.
<svg id=”svg” width=”500″ height=”300″ vie…
У меня есть две точки (A и B) и кривая Безье, соединяющая их. Анимация рисования линии начинается сразу после загрузки документа.
svg path {
fill: none;
stroke: cornflowerblue;
stroke-width: 1;
stroke-linecap: round;
stroke-l…
При создании интерактивного дашборда с помощью Python, Dash и Plotly, требуеться создать интерактивное окно, на подобе этого: https://plotly.com/python/mapbox-layers/, только вместо карты должно быть SVG изображение с планом помещения: Flo…
Мне нужно добавить пользовательскую кнопку в toolbar-container
Подскажите, что мне нужно сделать?
Также нужно застилизовать иконки в toolbar-container вот как нужно:
вот как сейчас:
…
Пишу игру жизнь с динамическим интерфейсом (чтобы можно было приближать/отдалять разные участки поля, менять цвет клетки).
Canvas буду использовать в крайнем случае из-за сложности вычисления координат и т.д.
Сначала была идея создавать по…
У меня есть следующее изображение карты:
Задача: Мне необходимо нарисовать такую карту средствами и технологиями, которыми это выполнить возможно, и нанести на нее точки (маркеры), обозначающие города. Кроме этого, при клике на маркеры до…
Есть поле с клеток в svg. Расстояния между ними нет, но отображается так как будто есть (линии пространства между клетками которые при движении/изменении размера меняются).
Как это обойти? Подложку сделать нельзя, т.к. клетки будут разных…
У меня есть следующий код:
body {
margin: 0; padding: 0; min-height: 100vh;
display: flex; align-items: center;
}
.container {
width: 100%; height: 160px;
background: #fbf2d4;
}
.ball {
width: 40px; height: 40px;
border-r…
Есть такая анимация на CSS, которая использует свойство box-shadow.
Но для браузера это тяжело. Есть ли решения, что можно сделать вместо этого? Можно и на JS и CSS, и SMIL SVG
.waypoint-marker {
width: 10px;
height: 10px;
border…
В качестве основного фонового изображения используется следующий линейный градиент:
html, body, svg {margin: 0; padding: 0; width: 100%; height: 100vh;}
<svg id=”svg”>
<defs>
<linearGradient id=”gradient”>
<stop o…
Математический маятник — осциллятор, представляющий собой механическую систему, состоящую из материальной точки на конце невесомой нерастяжимой нити или лёгкого стержня и находящуюся в однородном поле сил тяготения. Другой конец нити (стер…
Я нашел код на fiddle, который при движении мыши рисует (щелчок и перемещение линии).
Мое требование – обвести прямоугольник на SVG движением мыши таким же образом.
Возможно ли это, если да, то как?
//Canvas
const canvas = document.g…
Я пытаюсь построить что-то вроде таких линий https://dribbble.com/shots/2673159-Funnel-UI-concept/attachments/538068
Я просмотрел все кривые, предоставленные d3/vx, и, похоже, ни одна из них не имеет кривой между каждым отдельным шагом с…
Хочу повернуть круг .progressbar__thumb, чтобы линия на круге двигалась из другого места. Но что-то идёт не так. Подскажите, как правильно повернуть?
const progressbarThumb = document.querySelector(‘.progressbar__thumb’);
const progres…
скрипт js должен увеличивать масштаб документа. Я новичок в этой теме,поэтому прошу помощи
svg вставлен в html через <ebject id="8×1" data="… .svg"> вызов функции <input type="image" src=".. .g…
Задача: нарисовать окружность радиуса R, а в нее вписать правильный треугольник.
Для треугольника ABC (основание BC параллельно оси x) получаем такие координаты точек
A: (R, 0)
Для R = 50 получается картинка
<svg version=’1.0′ x…
Мне нужно сверстать эту SVG-картинку таким образом, чтобы та её часть, которая на чёрном фоне была белой, а та, что на белом фоне – была чёрной. Картинка будет вращаться, поэтому само изображение не вариант закрасить наполовину чёрным напо…
В настоящее время я программирую редактор диаграмм на javascript с помощью SVG.
У меня возникла проблема, связанная с соединением прямоугольников. Я нашел много ресурсов, чтобы нарисовать связь между кругами, но ничего о прямоугольниках.
И…
https://jsfiddle.net/wxyts76g/1/
function changeStroke() {
var poly = document.getElementById(“poly”),
isw = document.getElementById(“isw”);
poly.setAttribute(“stroke-width”,isw.value);
};
function changeSize(){
va…
Мне необходимо реализовать кольцевую диаграмму как на изображении ниже:
Возникает несколько проблем:
Каждый сегмент окрашен в свой градиент
Сегменты имеют закругленные края
Каждый сегмент может быть использован в дальнейшем, как ссылка
…
Облака очень часто используются и в виде иконок и как отдельный элемент фона, фоновой анимации и во многих других случаях оформления веб страниц
Ниже пример одной из "облачных" иконок
<svg xmlns=”http://www.w3.org/2000/s…
Я хочу сделать свой шрифт очень толстым из-за цвета фона изображения моих друзей, которое находится в заголовке веб-сайта. Я нашел это в Интернете, но, к сожалению, он не работает. есть ли другой способ сделать это?
h1{
text-shadow: …
В общем заезженная тема но не увидел здесь решения !
Есть обычный chart на SVG
И так же есть таймер на javascript
Как синхронизировать эти две анимации chart + timer ?
Синхронизировать их таким способом что бы полоса прогресса зависела от …
Есть такой замечательный способ выставления перспективы – https://bl.ocks.org/mbostock/10571478
Тут контрольные точки и они же точки по которым считается перспектива, расположены по углам квадрата, т.е по границе вращаемого изображения, а …
У нас имеется следующий HTML+CSS код:
function parentH() {
let height = document.querySelector(‘#parent_range_H’).value + ‘px’;
document.querySelector(‘#parent’).style.height = height;
document.querySelector(‘#children’).style.he…
Изучаю команду SVG: textPath, которая позволяет разместить текст вдоль криволинейной траектории.
Вот пример из теоретического источника: MDN
<svg viewBox=”0 0 100 100″ xmlns=”http://www.w3.org/2000/svg”>
<!– to hide the pa…
Фильтры SVG растрируют исходное изображение, это означает, что отфильтрованный текст не будет сглаженным, что приведет к неровным краям.
Есть ли обходной путь для этого? Возможно ли использовать другой фильтр для имитации сглаживания, или…
Допустим, есть изображение:
<img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/ET_Afar_asv2018-01_img07_Lake_Karum_area.jpg/1200px-ET_Afar_asv2018-01_img07_Lake_Karum_area.jpg”>
Нужно изменить соотношение с…
Искал готовые реализации в стиле вакуумно-люминесцентного индикатора, даже близко в поисках не приблизился, может сталкивался кто с разработкой. Именно под такой тип ламп.
…
Часто вижу в ответах использование координатной сетки
Она используется, как фон для различных элементов. Но эта сетка нарисована видимо в растровом редакторе и сохранена в растровом формате.
На мой взгляд, для адаптивности, видимо нужно с…
Свежие комментарии