Рубрика «svg» - 3

в 9:54, , рубрики: css, svg, viewport, Блог компании Яндекс, интерфейсы, календари, координаты, маски, масштабирование изображений, паттерны, Работа с векторной графикой, Разработка веб-сайтов

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

SVG в реальной жизни. Доклад Яндекса - 1

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

Читать полностью »

в 11:34, , рубрики: javascript, svg, tutorial, UI, vue.js, vuejs, визуализация данных

Привет! Учусь на front-end, и параллельно, в учебном проекте, разрабатываю SPA на Vue.js для back-end, который собирает данные от поискового бота. Бот нарабатывает от 0 до 500 записей, и я должен их: загрузить, отсортировать по заданным критериям, показать в таблице.

Ни back-end ни бот, сортировать данные не умеют, поэтому мне приходятся загружать все данные и обрабатывать их на стороне браузера. Сортировка происходит очень быстро, а вот скорость загрузки, зависит о коннекта, и указанные 500 записей могут загружаться от 10 до 40 секунд.

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

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

  1. цифрами — сколько % записей уже загружено
  2. графиком — время загрузки каждой записи
  3. заполнением — % загрузки. Так как график по мере загрузки заполняет прямоугольный блок, видно, какую часть блока осталось заполнить

Вот анимация результата, к которому я стремился и получил:

SVG индикатор загрузки на Vue.js - 1

… по-моему, получилось забавно.

В статье я покажу как продвигался к результату шаг за шагом. Графики функций в браузере я до селе не рисовал, поэтому разработка индикатора принесла мне простые, но новые знания о применении SVG и Vue.

Читать полностью »

в 4:40, , рубрики: amcharts, anychart, big data, Business Intelligence, chart.js, charting, chartist.js, charts, D3, d3.js, data visualization, fusioncharts, Google, Google Charts, highcharts, html5, javascript, js charts, plotly, svg, zingchart, анализ данных, библиотека javascript, Большие данные, визуализация данных, графики, графики и диаграммы, данные, дашборд, диаграммы, Программирование, Разработка веб-сайтов

Есть в графиках что-то магическое. Изгиб кривой мгновенно раскрывает всю ситуацию — историю развития эпидемии, паники или периода процветания. Эта линия просвещает, пробуждает воображение, убеждает.
― Генри. Д. Хаббард

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

Вряд ли кто-то станет отрицать, что в современном HTML5 вебе JavaScript — самая универсальная и простая технология для визуализации данных. Так что, если вы занимаетесь фронтенд-разработкой, то вы, скорее всего, либо уже имели дело с созданием JS чартов, либо столкнетесь с этим в (скором) будущем.

Существует множество JavaScript библиотек для построения графиков и диаграмм, каждая из которых (как и любые другие инструменты) имеет свои плюсы и минусы. Чтобы облегчить вам жизнь, я решил рассказать о тех из них, которые нравятся мне больше всего. Я считаю, десять следующих библиотек — это лучшие JS библиотеки для создания графиков, и они действительно способны помочь решить практически любую задачу по визуализации данных. Давайте вместе пройдемся по списку и убедимся, что они вам известны хотя бы базово и вы не упустили из виду какую-нибудь хорошую библиотеку, которая может оказаться полезной в текущих или будущих больших проектах.

Заглавная картинка: визуализация данных на графиках и диаграммах

Что ж, приступим: вот лучшие JS библиотеки для визуализации данных!Читать полностью »

в 5:40, , рубрики: DIY, diy или сделай сам, laser-cut, svg, игры, логические игры, настольная игра, Работа с векторной графикой

Делаем ретро-игру из 80-х или как готовить макеты для лазерной резки - 1
Так получилось, что меня давно просили сделать старую настольную игру из СССР — «Сражение». Вот пришло время выполнять обещание, заодно решила показать как создавать макеты для лазерной резки и что получается в итоге. Большой сложности в этом нет, но есть некоторые нюансы.

Много статей хабра по теме DIY содержит жалобы: на отсутствие навыков работы с лобзиком, малую жесткость картона, сложности с созданием корпуса. Каждый сам выбирает способ реализации своих идей, но мне важно показать как легко можно сделать макет в том же Inkscape, отдать его в работу и получить готовые детали.
Читать полностью »

в 19:22, , рубрики: adobe illustrator, animation, css, SMIL, svg, анимация, векторная графика, Компьютерная анимация, морфинг, Работа с векторной графикой

В данной статье я хочу осветить тонкости работы с SVG-графикой, SVG анимация (в том числе и path), проблемы и способы их решения, а также разнообразные подводные камни, коих в SVG огромное множество. Эту статью я позиционирую как подробное руководство.

Все об SVG анимации - 1

Здесь не будет никаких плагинов, библиотек и прочего, речь пойдет только о чистом SVG.
Единственный инструмент, который я буду использовать, это Adobe Illustrator.
Читать полностью »

в 15:19, , рубрики: css, svg, веб-дизайн

Эта четвертая статья серии об SVG-фильтрах, в которой Sara Soueidan покажет вам, как использовать feComponentTransfer для создания эффекта двухтонового фильтра.

Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer - 1

Предлагаемая серия статей "Эффекты фильтрации SVG" Sara Soueidan, внештатного разработчика UI/UX интерфейса и автора многих технических статей, проживающей в Ливане, посвящена работе фильтров SVG и состоит из следующих статей:

Эффекты фильтрации SVG

  1. Эффекты фильтрации SVG. Часть 1. SVG фильтры 101
  2. Эффекты фильтрации SVG. Часть 2. Контурный текст при помощи feMorphology
  3. Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer
  4. Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer.

Еще не переведена

SVG Filter Effects: Conforming Text to Surface Texture with

В предыдущей статье этой серии я познакомила вас с примитивом feComponentTransfer, и мы использовали его для ограничения количества цветов изображения, чтобы создать эффект постеризации. В этой статье мы рассмотрим, как этот примитив можно использовать для создания эффекта duotone, подобно Photoshop. Мы также научимся использовать его для управления интенсивностью и контрастностью цветов изображения.

Читать полностью »

в 11:00, , рубрики: css, svg, веб-дизайн

Предлагаемая серия статей "Эффекты фильтрации SVG" Sara Soueidan, внештатного разработчика UI/UX интерфейса и автора многих технических статей, проживающей в Ливане, посвящена работе фильтров SVG и состоит из следующих статей:

Эффекты фильтрации SVG

  1. SVG фильтры 101.
  2. Эффекты фильтрации SVG: контурный текст при помощи feMorphology

Еще не переведены

  1. SVG Filter Effects: Poster Image Effect with feComponentTransfer.
  2. SVG Filter Effects: Duotone Images with feComponentTransfer.

Во второй части серии об SVG-фильтрах Sara Soueidan знакомит нас с фильтром feMorphology и приводит несколько примеров его использования для создания интересных эффектов.

Эффекты фильтров SVG. Часть 2. Контурный текст при помощи feMorphology - 1

Читать полностью »

в 14:04, , рубрики: javascript, svg, плейсхолдеры, Разработка веб-сайтов

Генерируем красивые SVG-плейсхолдеры на Node.js - 1

Использование SVG-картинок в качестве плейсхолдеров — это очень неплохая идея, особенно в нашем мире, когда чуть ли не все сайты состоят из кучи картинок, которые мы пытаемся асинхронно подгружать. Чем больше картинок и чем более объемные они, тем выше вероятность получения различных проблем, начиная от того, что пользователь не совсем понимает, а что же там собственно грузится, и заканчивая известным скачком всего интерфейса после прогрузки картинок. Особенно на плохом интернете с телефона — там может и на несколько экранов все улететь. Именно в такие моменты заглушки приходят на помощь. Еще один вариант их использования – это цензура. Бывают такие моменты, когда нужно скрыть от пользователя какую-то картинку, но хотелось бы сохранить общий стиль страницы, цвета и место, которое картинка занимает.

Но в большинстве статей все рассуждают о теории, о том, что было бы неплохо инлайново вставлять все эти картинки-заглушки в страницы, а мы сегодня посмотрим на практике, как можно генерировать их на свой вкус и цвет с помощью Node.js. Мы создадим handlebars-шаблоны из SVG-картинок и будем из заполнять разными способами, начиная от простой заливки цветом или градиентом и заканчивая триангуляцией, мозаикой Вороного и использованием фильтров. Все действия будут разбираться по шагам. Полагаю эта статья будет интересна начинающим, которым интересно, как это делается, и нужен подробный разбор действий, но и опытным разработчикам возможно приглянутся некоторые идеи.

Читать полностью »

в 8:02, , рубрики: svg, диаграмма Вороного, Дизайн игр, процедурная генерация карт, разработка игр, симуляция климата, триангуляция Делоне
image

Часть 1. SVG и системы координат

До недавнего времени размеры карт в моей игре Dragons Abound были фиксированными и несколько недетерминированными. Я считал их «региональными» — не картами всего мира, но его значительными частями, такими например, как западное побережье США или часть Европы. Меня вполне устраивал этот масштаб, но я хотел немного поэкспериментировать с игрой, чтобы посмотреть, смогу ли я генерировать карты целого мира (или хотя бы большего размера). Но прежде чем я приступлю к этому, давайте немного поговорим о картах фэнтези-миров.

Мир — это большое пространство. Большинство карт фэнтезийных «миров» даже близко не походят на истинный размер. Возьмём, например, Средиземье, в котором происходит действие «Властелина колец»:

Как я создавал карты континентов для своей игры - 2

Хоть и кажется, что на ней запечатлён огромный мир, на самом деле Средиземье создано на основе Европы.
Читать полностью »

в 10:35, , рубрики: javascript, svg, анимация, астероиды, астрономия, кометы, Компьютерная анимация, космос, планеты, Солнечная система, физика

Когда-то давно я получил высшее образование по физике. Позже еще самостоятельно выучился на веб-программиста. С тех пор я преимущественно работаю программистом, но продолжаю уделять время и физике, и технике (что-нибудь рассчитываю или конструирую), и науке в целом. Подобное «раздвоение» приносит интересные результаты. Оказалось, что некоторые факты в физике можно хорошо объяснить с помощью программирования.

Откуда вообще возник такой вопрос? У старшего ребенка в школе было занятие про планеты Солнечной системы. В целом, он их знает, и на вечернем небе мы видели некоторые (Юпитер, Марс, Сатурн). Но многие интересные факты остаются за пределами понимания. Не хватает наглядности, движения, может быть, интерактивности. Вот именно этот пробел в подаче материала я и захотел заполнить с помощью веб-программирования, следуя известной мудрости «лучше один раз увидеть, чем сто раз услышать».

Как вы уже догадались, в статье речь пойдет о фактах, касающихся Солнечной системы (не только о планетах). Давайте посмотрим, что есть такого любопытного в нашем галактическом уголке.
Читать полностью »

1...234...10...16
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js