Может, встроить такую штуку в сайт и оформлять её как достижение? Среди достижений отлично смотрится, да ещё и персональная штука.

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

Ой, а можно мне тоже такую штучку сделать на мою аватарку со спинозавром, как у Баристарха?

Только с рекордом 583? и без пунктира?

Вова_10, Пока, ты только на такую аватарку накатал тут:

pashkhan, почему именно такая часть круга выделена-то?
Запрещённый сайт тут учитывать не стоит, как правильно пишет pashkhan.

Вот:

Игрок3, ну, как написал Переборыч, что правое полукругие всегда будет заполнено, и оно символизирует переход от предыдущего ранга -> до текущего ранга. А прогресс в текущем ранге, учитывается по левому полукругию, поэтому он и заполнен на 66%.

Спорная концепция, согласен, мне больше нравится когда весь круг представляет собой 100%, и значит в данном случае он должен быть заполнен только на 66%. Но мне понравилась идея Переборыча, учитывать цвет прошлого ранга, и я даже немного её развил:



Вот как я вижу цветовое заполнение круга, осталось только svg-код под это дело подправить, чтобы там нужно было только указать ID требуемого игрока и его текущий рекорд, а уже круг сам бы заполнился и раскрасился (потому что я так и не понял как это все точно работает, и менял параметры наугад). Ну как бы, цветовые коды можно самому руками вставить, если будут понятные поля (предыдущий ранг, текущий ранг и будущий ранг), но обязательно нужен параметр на сколько процентов должен быть заполнен кружок.

Вот новый код svg с пунктирчиком и фиксированным градиентом (надо поменять только цвет):

stroke-dasharray = 295.3 * 1## / 200, где ## - это скорость, т.е. для 583 будет 83.

Ясно, с алгоритмом разобрался.
1. А запрещённый сайт тут вполне себе учитывается? (когда можно с уверенностью сказать, что рекорд скопирован оттуда)
2. А если пользователь обманывает и создаёт себе аватарку, которая вообще не основана на реальном рекорде?

Эти вопросы никак не контролируются - всё на совести самого участника?

583 - это рекорд на Клавогонках, но Вова_10 ещё не подтвердил его квалификацией.
При желании на аватарке можно и 9999 нарисовать.

Офтоп: А...

как вариант можно разбить кружочек на 8 частей = 8 рангов (можно скипнуть новичка и любителя), и каждый пройденный сектор закрашивать ранговым цветом, а неполный ранг заполнять в проценте от сотни
возможно, тоже красиво будет смотреться, но это надо рисовать и тестить ручками (чего я не умею)

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

Лишь предыдущий ранг я добавил, чтобы:

• круг, особенно при повышении ранга, не был пустым (потом придумал пунктир, что наполовину уменьшает значимость этого пункта);
• увеличение рекорда до 50 не делало линию вниз (ассоциация с отрицательным трендом графика);
• путь был наполовину пройден для мотивации продолжать (а то иногда новый ранг воспринимают как финиш);
• он был ещё актуален (например, ачивки "Умелый ранг" и "День ранга" в новом ранге поддаются не сразу, да и средняя часто виляется в предыдущей сотне).

На мой взгляд, логичнее справа показывать цвет текущего ранга, а слева - будущего.
Получится, слева будет визуализирован прогресс на пути к следующему рангу, и как только окружность полностью закрашена - ранг достигнут.
Ну или так, как предложил pashkhan.

Думаю, пока следующий ранг не добыт, то использовать его цвет некорректно. Да и следующего ранга может и вовсе не существовать.
Мотивация тут заполучить с новым рангом этот новый цвет и новое авто, а не по частям и запчастям.
Можно представить, что круг состоит из точек-результатов с градацией 1 зн/мин соответствующих им цветов.
Кстати, это натолкнуло на мысль попробовать подрисовать точки-рекорды...
А вверху тогда заодно можно попробовать добавить полую точку цвета нового ранга...

Переборыч, спасибо за обновлённый код, обогащённый пунктиром. Благодаря формуле, удобно рассчитать точное значение, на сколько должна быть закрашена левая половина окружности. Ну и расшифровка концепции полукругов, меня убедила в ее соблюдении. Но разукрас половинок, лучше взять предложенный vnest'om: правая половина текущий ранг, левая половина (которая "набирается") - будущий ранг. Это действительно будет больше мотивировать, чем память о предыдущем, пройденном ранге.

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



ИнструХция, как клепать такие аватарки самому:
Создаем файл в "блокноте", копируем туда следующий код, и сохраняем наш файл, дав ему название "index.html"

Вставляем ID нужного вам игрока (или ваш собственный, если вы делаете аватарку себе) - ваш ID, это числовой код из цифр, который отображается в адресе открытой страницы, когда вы зашли на страницу конкретного игрока.
<image href="https://klavogonki.ru/storage/avatars/668817_big.png" width="100" height="100"/>
В данной строке, мы выбираем цвет пунктира, рекомендуется выбрать цвет текущего ранга. Коды для цветов, указаны в теме "Аватарка рекордная (кружочек)" - ссылка на неё в первых сообщениях данной темы. Так же, вы можете выбрать любой цвет какой захотите, можно использовать данный сайт - https://colorscheme.ru/html-colors.html , либо в таких программах как Фотошоп, вы можете выбрать понравившийся цвет и сразу увидеть его HEX-код; но на том сайте, тоже есть такая опция - во вкладке "Конвертер цветов".
<circle cx="50" cy="50" r="47" stroke="#2e32ce" stroke-width="2" fill="none" stroke-dasharray="5" stroke-linecap="round"/>
Вот тут нам как раз пригодится формула stroke-dasharray = 295.3 * 1## / 200, где ## - это скорость; в нашем случае, рекорд 707, отбрасываем первую цифру и заменяем её на 1. Получаем = 295.3*107/200 ~158
<circle cx="50" cy="50" r="47" stroke="url(#grad)" stroke-width="6" fill="none" stroke-dasharray="158" stroke-linecap="round" transform="rotate(-90,50,50)"/>
Тут, две первые строки - это цвет текущего ранга (правая половина кружочка), а две последние - это цвет будущего ранга (левая половина кружочка), которая будет заполняться в зависимости от нашего рекорда.
<stop offset="0%" stop-color="#2e32ce"/>
<stop offset="40%" stop-color="#2e32ce"/>
<stop offset="60%" stop-color="#061956"/>
<stop offset="100%" stop-color="#061956"/>
И наконец, это цвета рамочки и циферок рекорда, цветовой код надо выбрать текущего ранга. И не забыть указать само значение рекорда!
<rect x="32" y="78" width="36" height="17" rx="6" fill="white" stroke="#2e32ce"/>
<text x="50" y="49" fill="#2e32ce" style="text-anchor: middle;" dy="44" font-weight="bold">707</text>

Внеся все изменения в блокноте, не забудьте их сохранить. Далее откройте ваш файлик с помощью браузера, и на новой странице вы узрите получившийся шедевр! Далее я делал "принт скрин", открывал фотошоп, и уже там вырезал с помощью выделения по заданным размерам (100х100) аватарку.

з.ы. А может Серёга и прав... что правая половинка должна олицетворять собой предыдущий ранг, а левая, только укрепление и становление в твоём текущем ранге. Вот о каком таком экстракиберстве должен дофа мечтать, когда он еле-еле кибера сумел взять. Большинство его заездов будут на суперменских скоростях, а над становлением уверенным кибером ещё работать и работать. Так что да, экстракиберский цвет тут абсолютно лишний и неуместный!

следующий ранг всегда существует и даже больше - почти всегда достижим(по крайней мере. человеки пока не доросли до таких скоростей, когда следующий ранг был бы недостижим и не факт, что дорастут в ближайшем времени). другой вопрос - что названия или цвета у ранга может не быть в силу неактуальности или чего ещё.
а градиентная раскраска, ИМХО, даже лучше - она олицетворяет не столько сами ранги, сколько то, что ранги по сути "переходные" - т.е. 490 и 510 оба округлённо "начинающие Маньяки", хотя один из них Гонщик, а второй - Маньяк. поэтому и цвета у них должны быть гораздо ближе, чем у условных 410 и 510 при сравнении.

Когда ждать того момента, когда стандартные аватарки исчезнут и появятся эти кружочки? Или это будет дело добровольное?

ТОМА-АТОМНАЯ, всё, попалась, у заглянувших в эту тему, нет вариантов делать какой-то там добровольный выбор. Партия сказала "надо носить кружочки" - значит "надо добровольно их одеть и вопросов лишних не задавать". Получите свой кружочек, и распишитесь!

А что, наряднее получается и более индивидуально: