Hacker News Digest

Автор создал новый шрифт Avería, усреднив все шрифты на своём компьютере. Идея родилась из интереса к типографике и креативному программированию. Сначала он накладывал буквы разных шрифтов с низкой прозрачностью, а затем использовал ImageMagick и PHP для математического усреднения изображений. Выравнивание по базовой линии и началу координат дало более чёткие результаты, чем простое наложение. Автор обнаружил, что строчная буква 'g' имеет две распространённые формы, а большинство шрифтов демонстрируют высокую корреляцию.

Когда простой метод дал размытые результаты, автор начал искать способы сохранить чёткие края. Он экспериментировал с пороговыми значениями для создания монохромных изображений, но столкнулся со сложностью математического усреднения форм. После изучения крив Безье и метрик шрифтов, он выбрал простой подход: разбиение контура каждой буквы на 500 равноотстоящих точек и усреднение соответствующих позиций. За месяц работы над проектом он создал Avería — название, связанное со словом "average" (среднее), но на испанском означающее "поломка".

• Обсуждение началось с демонстрацией шрифта Averia как примера "усреднённого" шрифта, что вызвало обсуждение его визуального качества и ассоциаций с "uncanny valley".
• Участники обсудили, что Averia выглядит мутновато и непривычно, что вызвало дискуссию о том, какие именно параметры делают шрифт читаемым и приятным.
• Были подняты вопросы о том, как средний шрифт может влиять на читаемость и какие именно параметры делают его таким.
• Также обсуждались вопросы авторского права и атрибуции, так как Averia был создан как "усреднение" всех шрифтов в системе.
• Участники также затронули тему того, что именно делает шрифт визуально привлекательным и читаемым, и какие параметры важны для этого.

SVG <path>: краткий путеводитель

<path> — единственный способ рисовать сложные фигуры и кривые в SVG. Синтаксис пугает, но разобравшись, становится удобным.

Основы

• Атрибут d — последовательность команд, как «рецепт» для пера.
• Каждая команда начинается с буквы и получает координаты как аргументы.
• Предыдущая точка автоматически становится началом следующей команды.
• Используйте пробелы и запятые — читаемость важнее байтов.

Команды

• M x,y — поднять перо и переместиться в точку.
• L x,y — прямая линия до точки.
• C x1 y1, x2 y2, x y — кубическая Безье.
• Q x1 y1, x y — квадратичная Безье.
• A rx ry x-axis-rotation large-arc-flag sweep-flag x y — дуга эллипса.
• Z — замкнуть путь к начальной точке.

Относительные координаты

Буквы в нижнем регистре (m, l, c…) двигают перо относительно текущей позиции, а не от начала координат.

Цепочки кривых

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

Анимации

Изменяя d через CSS или JS, можно плавно морфить фигуры.

Советы

• Начинайте путь всегда с M.
• Для читаемости группируйте команды построчно.
• Проверяйте результат в интерактивном редакторе.

• Участники обсуждают интуитивные способы задавать эллиптические дуги без булевых флагов, предлагая параметры вроде углов или контрольной точки.
• Хвалят интерактивный гайд по SVG-путям, его наглядность и звуковые эффекты.
• Делятся практическим опытом: динамическая генерация карт в играх, разметка сканов, чтение путей «с нуля».
• Рекомендуют инструменты для редактирования и генерации SVG: GodSVG, Boxy SVG, онлайн-редактор yqnn.
• Отмечают связь SVG с PostScript, Logo и даже коническими сечениями; обсуждают GPU-ускорение для кривых Безье и рендеринг шрифтов.