Hacker News Digest

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-ускорение для кривых Безье и рендеринг шрифтов.

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

Идея

Большинство языков — линейны: слова идут одно за другим. Recto отказывается от этой традиции и возвращается к древним «картам мыслей» — пиктограммам, звёздным картам, схемам. Главное требование к языку:

1. Понятен человеку и машине.
2. Может быть создан человеком и машиной.

Линейность не обязательна: можно представить «приложение», где жест или выражение лица превращается в сетку эмодзи, и всё работает.

Примеры

• Hello Recto — прямоугольник, внутри которого текст Hello Recto.
• Арифметика — прямоугольники-числа и операторы встраиваются друг в друга, образуя выражения.
• Факториал — рекурсивный прямоугольник ссылается на себя.

Почему это важно

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

Попробовать: Recto Pad | Google Colab | GitHub

• Участники обсуждают Recto как «2D-язык», но многие считают его всё же 1D с «скобками и лишними шагами».
• Поднимаются примеры других 2D/3D-языков: PATH, Befunge, Hexagony, Orca, Unreal Blueprints, Racket 2d.
• Спор о том, считать ли нотный стан или речь по-настоящему многомерными; автор статьи настаивает на их 1D-основе.
• Предлагаются улучшения: полноценная графическая среда, Unicode-рамки, поддержка VR/AR, именованные параметры.
• Упомянуты эксперименты с «временем» как измерением (EmiT, ICFPC 2024).
• Автору пожелали сил в борьбе с раком и скинули ссылки на GoFundMe и CaringBridge.