7

На Figma поступил вот такой дизайн спидометра. Чем выше скорость автомобиля, тем больше по кругу должна заполняться желтая полоска. Подскажите пожалуйста, как это можно сверстать. Интересует именно то, как заполнять серую полоску желтым цветом. Можно использовать svg и изменять координаты этой полоски. SVG прилагаю

<svg width="218" height="218" viewBox="0 0 218 218" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.286759 116.901C-1.22305 96.1282 3.25041 75.3574 13.1776 57.0474C23.1048 38.7375 38.0701 23.6551 56.3021 13.5855C74.5341 3.51586 95.2694 -1.11936 116.054 0.228472C136.838 1.57631 156.801 8.85077 173.58 21.1908C190.359 33.5308 203.25 50.4197 210.73 69.8585C218.209 89.2972 219.962 110.472 215.782 130.876C211.602 151.28 201.664 170.059 187.143 184.991C172.622 199.923 154.128 210.382 133.848 215.13L130.56 201.085C148.156 196.965 164.203 187.89 176.802 174.935C189.4 161.979 198.024 145.685 201.651 127.981C205.278 110.277 203.756 91.9046 197.267 75.0385C190.777 58.1723 179.592 43.5184 165.033 32.8115C150.475 22.1045 133.154 15.7928 115.12 14.6233C97.0865 13.4538 79.0953 17.4756 63.2761 26.2126C47.457 34.9497 34.4722 48.0361 25.8587 63.9228C17.2453 79.8096 13.3639 97.8317 14.6739 115.856L0.286759 116.901Z" fill="#161616" fill-opacity="0.85"/>
<path d="M0.286759 116.901C-1.59726 90.9795 5.84312 65.2376 21.266 44.3181C36.6889 23.3986 59.0792 8.6785 84.3988 2.81252C109.718 -3.05345 136.301 0.320826 159.352 12.3268C182.403 24.3328 200.405 44.1802 210.112 68.2896L196.731 73.6772C188.308 52.7584 172.689 35.5376 152.688 25.1205C132.688 14.7034 109.623 11.7757 87.6545 16.8654C65.6857 21.9551 46.2586 34.7271 32.8767 52.8781C19.4949 71.0291 13.0392 93.3643 14.6739 115.856L0.286759 116.901Z" fill="#FEC600"/>
</svg>

-

2

5 ответов 5

10

Воспроизвести анимацию заполнения одного цвета другим по одному пути path возможно с помощью свойства stroke-dasharray(вид пунктирной обводки). Пример:

$('.input').on('input', speed).each(speed);
function speed() { let val = this.value || 0, speed = $(this).prev('svg').find('.speed'),
  strokeLength = speed[0].getTotalLength();
  speed.css('stroke-dasharray', strokeLength * val / 400 + ',' + strokeLength);
}
body {margin: 0; background: black;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg width="190" height="190" viewBox="-20 -20 250 250" fill="none" xmlns="http://www.w3.org/2000/svg">

<!--Серая полоса-->
<path stroke="#161616" stroke-width="16" fill="none" fill-opacity="0.85" d="M0.286759 116.901C-1.22305 96.1282 3.25041 75.3574 13.1776 57.0474C23.1048 38.7375 38.0701 23.6551 56.3021 13.5855C74.5341 3.51586 95.2694 -1.11936 116.054 0.228472C136.838 1.57631 156.801 8.85077 173.58 21.1908C190.359 33.5308 203.25 50.4197 210.73 69.8585C218.209 89.2972 219.962 110.472 215.782 130.876C211.602 151.28 201.664 170.059 187.143 184.991C172.622 199.923 154.128 210.382 133.848 215.13L130.56Z"/>

<!--Желтая полоса-->
<path class="speed" stroke="#FEC600" stroke-width="16" fill="none" d="M0.286759 116.901C-1.22305 96.1282 3.25041 75.3574 13.1776 57.0474C23.1048 38.7375 38.0701 23.6551 56.3021 13.5855C74.5341 3.51586 95.2694 -1.11936 116.054 0.228472C136.838 1.57631 156.801 8.85077 173.58 21.1908C190.359 33.5308 203.25 50.4197 210.73 69.8585C218.209 89.2972 219.962 110.472 215.782 130.876C211.602 151.28 201.664 170.059 187.143 184.991C172.622 199.923 154.128 210.382 133.848 215.13L130.56Z"/>

<!--Цифры-->
<text x="15" y="115" font-size="16" font-family="serif" fill="gray" font-weight="bold">0</text>
<text x="35" y="60" font-size="16" font-family="serif" fill="gray" font-weight="bold">60</text>
<text x="65" y="35" font-size="16" font-family="serif" fill="gray" font-weight="bold">100</text>
<text x="125" y="35" font-size="16" font-family="serif" fill="gray" font-weight="bold">180</text>
<text x="175" y="85" font-size="16" font-family="serif" fill="gray" font-weight="bold">250</text>
<text x="170" y="150" font-size="16" font-family="serif" fill="gray" font-weight="bold">320</text>
<text x="125" y="195" font-size="16" font-family="serif" fill="gray" font-weight="bold">400</text>

</svg>

<input class="input" type="range" min="0" max="400" value="0" step="1" oninput="rangevalue.value=Math.abs(value)" />
<output id="rangevalue" style="color:white;">0</output>

Просто анимация:

body {margin: 0; background: black;}
<svg width="190" height="190" viewBox="-20 -20 250 250" fill="none" xmlns="http://www.w3.org/2000/svg">

<!--Серая полоса-->
<path stroke="#161616" stroke-width="16" fill="none" fill-opacity="0.85" d="M0.286759 116.901C-1.22305 96.1282 3.25041 75.3574 13.1776 57.0474C23.1048 38.7375 38.0701 23.6551 56.3021 13.5855C74.5341 3.51586 95.2694 -1.11936 116.054 0.228472C136.838 1.57631 156.801 8.85077 173.58 21.1908C190.359 33.5308 203.25 50.4197 210.73 69.8585C218.209 89.2972 219.962 110.472 215.782 130.876C211.602 151.28 201.664 170.059 187.143 184.991C172.622 199.923 154.128 210.382 133.848 215.13L130.56Z"/>

<!--Желтая полоса-->
<path id="speed" stroke="#FEC600" stroke-width="16" fill="none" stroke-dasharray="0, 496.49" d="M0.286759 116.901C-1.22305 96.1282 3.25041 75.3574 13.1776 57.0474C23.1048 38.7375 38.0701 23.6551 56.3021 13.5855C74.5341 3.51586 95.2694 -1.11936 116.054 0.228472C136.838 1.57631 156.801 8.85077 173.58 21.1908C190.359 33.5308 203.25 50.4197 210.73 69.8585C218.209 89.2972 219.962 110.472 215.782 130.876C211.602 151.28 201.664 170.059 187.143 184.991C172.622 199.923 154.128 210.382 133.848 215.13L130.56Z"/>

<!--Анимация-->
<animate id="ani" href="#speed" attributeName="stroke-dasharray" calcMode="linear"
values="0, 496.49;
74.4735, 496.49; 74.4735, 496.49;
124.123, 496.49; 124.123, 496.49;
223.421, 496.49; 223.421, 496.49; 0, 496.49; 0, 496.49;
310.306, 496.49; 310.306, 496.49;
397.192, 496.49; 397.192, 496.49; 0, 496.49; 0, 496.49;
496.49, 496.49; 496.49, 496.49; 496.49, 496.49; 0, 496.49; 0, 496.49;"
dur="10s" begin="1s" fill="freeze" repeatCount="indefinite"/>

<!--Цифры-->
<text x="15" y="115" font-size="16" font-family="serif" fill="gray" font-weight="bold">0</text>
<text x="35" y="60" font-size="16" font-family="serif" fill="gray" font-weight="bold">60</text>
<text x="65" y="35" font-size="16" font-family="serif" fill="gray" font-weight="bold">100</text>
<text x="125" y="35" font-size="16" font-family="serif" fill="gray" font-weight="bold">180</text>
<text x="175" y="85" font-size="16" font-family="serif" fill="gray" font-weight="bold">250</text>
<text x="170" y="150" font-size="16" font-family="serif" fill="gray" font-weight="bold">320</text>
<text x="125" y="195" font-size="16" font-family="serif" fill="gray" font-weight="bold">400</text>

</svg>

0
5

В принципе, можно и без svg:

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

div, div::after {
  width: 100vmin;
  height: 100vmin;
  margin: auto;
  box-sizing: border-box;
  border: 8vmin solid silver;
  border-radius: 50%;
}

div {
  border-color: silver silver silver transparent;
  position: relative;
  transform: rotate(-45deg);
}

div::after {
  content: "";
  display: block;
  margin: -8vmin;
  border-color: blue;
  animation: speed 3s linear infinite alternate;
}

@keyframes speed {
  from    { clip-path: polygon(50% 50%, 0 0,    0 0,    0    0,    0    0, 50% 50%); }
  33.333% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100%    0, 100%    0, 50% 50%); }
  66.667% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 50% 50%); }
  to      { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%,    0 100%, 50% 50%); }
}
<div></div>

2
  • Что-то анимация ощущается неравномерно, хоть и linear стоит...
    – andreymal
    27 апр 2021 в 23:15
  • @andreymal, потому что анимируется квадрат, а мы смотрим на вписанный в него круг - на углах замедление. Надо подумать, как исправить. Может как раз функцию поменять? Но вообще, анимацию не просили)
    – Qwertiy
    27 апр 2021 в 23:21
4

Верстка спидометра (CSS)

body {margin: 0; width: 100%; height: 100vh; overflow: hidden; background: black;}

.speed {
  box-sizing: border-box; position: relative; margin: 10px; width: 180px; height: 180px;
  border-radius: 180px; border: 16px solid #161616; transform: rotate(-7deg);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 100%, 50% 50%, 0 50%);
}

.speed>div:nth-child(1)::before, .speed>div:nth-child(1)::after {
  content: ""; display: block; box-sizing: border-box; position: absolute;
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}
.speed>div:nth-child(1)::before {
  top: -15px; left: -15px; width: 178px; height: 178px;
  border-radius: 178px; border: 14px solid #FEC600;
  animation: ani1 10s linear infinite;
}
.speed>div:nth-child(1)::after {
  top: -16px; left: -16px; width: 180px; height: 180px;
  border-radius: 180px; border: 16px solid #161616;
}

.speed>div:nth-child(2) {
  box-sizing: border-box; position: absolute;
  top: -15px; left: -15px; width: 178px; height: 0;
  border-radius: 178px; border: 14px solid #FEC600;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  animation: ani2 10s linear infinite;
}

@keyframes ani1 {
  0% {transform: rotate(0deg);}
  35% {transform: rotate(180deg);}
  65% {transform: rotate(180deg);}
  100% {transform: rotate(0deg);}
}

@keyframes ani2 {
  0% {opacity: 0; height: 0; transform: rotate(0deg);}
  35% {opacity: 0; height: 0; transform: rotate(0deg);}
  35.001% {opacity: 1; height: 178px; transform: rotate(0deg);}
  50% {opacity: 1; height: 178px; transform: rotate(80deg);}
  65% {opacity: 1; height: 178px; transform: rotate(0deg);}
  65.001% {opacity: 0; height: 0; transform: rotate(0deg);}
  100% {opacity: 0; height: 0; transform: rotate(0deg);}
}
<div class="speed"><div></div><div></div></div>

Добавим стрелку:

body {margin: 0; width: 100%; height: 100vh; overflow: hidden; background: black;}

.speed {
  box-sizing: border-box; position: relative; margin: 10px; width: 180px; height: 180px;
  border-radius: 180px; border: 16px solid #161616; transform: rotate(-7deg);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 100%, 50% 50%, 0 50%);
}

.speed>div:nth-child(1)::before, .speed>div:nth-child(1)::after {
  content: ""; display: block; box-sizing: border-box; position: absolute;
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}
.speed>div:nth-child(1)::before {
  top: -15px; left: -15px; width: 178px; height: 178px;
  border-radius: 178px; border: 14px solid #FEC600;
  animation: ani1 10s linear infinite;
}
.speed>div:nth-child(1)::after {
  top: -16px; left: -16px; width: 180px; height: 180px;
  border-radius: 180px; border: 16px solid #161616;
}

.speed>div:nth-child(2) {
  box-sizing: border-box; position: absolute;
  top: -15px; left: -15px; width: 178px; height: 0;
  border-radius: 178px; border: 14px solid #FEC600;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  animation: ani2 10s linear infinite;
}

@keyframes ani1 {
  0% {transform: rotate(0deg);}
  35% {transform: rotate(180deg);}
  65% {transform: rotate(180deg);}
  100% {transform: rotate(0deg);}
}

@keyframes ani2 {
  0% {opacity: 0; height: 0; transform: rotate(0deg);}
  35% {opacity: 0; height: 0; transform: rotate(0deg);}
  35.001% {opacity: 1; height: 178px; transform: rotate(0deg);}
  50% {opacity: 1; height: 178px; transform: rotate(80deg);}
  65% {opacity: 1; height: 178px; transform: rotate(0deg);}
  65.001% {opacity: 0; height: 0; transform: rotate(0deg);}
  100% {opacity: 0; height: 0; transform: rotate(0deg);}
}

span {
  display: block; position: absolute; top: 57px; left: 60px; width: 10px; height: 10px;
  border: 10px solid #161616; border-radius: 30px; background: #FEC600;
}
span::after {
  content:""; display:block; position: absolute; top: -2px; left: -2px;
  width: 14px; height: 14px; border-radius: 14px; background: black;
}
span::before {
  content:""; display:block; position: absolute; top: 3px; left: -84px;
  width: 84px; height: 6px; background: red;
  clip-path: polygon(0 2px, 100% 0, 100% 100%, 0 4px);
  transform-origin: calc(100% + 5px) calc(100% - 3px);
  animation: ani3 10s linear infinite;
}

@keyframes ani3 {
  0% {transform: rotate(-1deg);}
  50% {transform: rotate(260deg);}
  100% {transform: rotate(-1deg);}
}
<div class="speed"><div></div><div></div><span></span></div>

3

Не совсем похоже, просто было готовое

range.addEventListener("input", function() {
  document.querySelector(".arrow").style.transform = `rotate(${this.value}deg`;
  num.innerHTML = parseInt((230 * (Number(this.value) + 100)) / 180);
});
.arrow {
  transform-origin: 0 0px;
  transition: 0.34s ease;
  transform: rotate(-103deg);
  /* 93 */
}

.frequency {
  stroke-dasharray: 10 55;
  stroke-dashoffset: -54;
}
<svg viewBox="-250 -250 500 290" width="300">
  <g class="arrow">
    <path d="M-18,-10 0,-150 18,-10" />
    <circle r="20" />
  </g>

  <g class="scale">
    <circle r="200" fill="none" stroke="#000" stroke-width="20" class="frequency" />
  </g>

  <path d="m-220 0 a120 -120 0 0 1 440 0" fill="none" stroke="blue" stroke-width="0" id="path" />

  <text font-size="20px" x="5">
    <textPath href="#path">20</textPath>
  </text>
  <text font-size="20px" x="80">
    <textPath href="#path">40</textPath>
  </text>
  <text font-size="20px" x="150">
    <textPath href="#path">80</textPath>
  </text>
  <text font-size="20px" x="210">
    <textPath href="#path">100</textPath>
  </text>
  <text font-size="20px" x="285">
    <textPath href="#path">120</textPath>
  </text>
  <text font-size="20px" x="355">
    <textPath href="#path">140</textPath>
  </text>
  <text font-size="20px" x="425">
    <textPath href="#path">160</textPath>
  </text>
  <text font-size="20px" x="500">
    <textPath href="#path">180</textPath>
  </text>
  <text font-size="20px" x="570">
    <textPath href="#path">200</textPath>
  </text>
  <text font-size="20px" x="640">
    <textPath href="#path">220</textPath>
  </text>

  <text id="num" text-anchor="middle" alignment-baseline="central" y="-100" font-size="50">0</text>

</svg>

<br>

<input type="range" min="-100" max="100" value="-100" id="range">

Второй вариант

range.addEventListener("input", function() {
  document.querySelector(".figure").style.transform = `rotate(${this.value}deg`;
  num.innerHTML = parseInt((320 * (Number(this.value) + 100)) / 180);
});
.figure {
  transform-origin: 0 -20px;
  transition: 0.34s ease;
}

#num {
  transition: 0.34s linear;
}

.data text {
  font-size: 26px;
  font-family: sans-serif;
}
<svg viewBox="-250 -250 500 250" width="280">
  <g class="figure" transform="rotate(-90)">
    <circle r="20" cy="-20" />
    <path d="M-20,-20 0,-150 20,-20" />
  </g>

  <g class="scale">
    <circle r="200" cx="0" fill="none" stroke="#000" stroke-width="20" stroke-dasharray="10 60" />
    <circle r="210" cx="0" fill="none" stroke-width="10" stroke="green" />
    <circle r="210" cx="0" fill="none" stroke-width="10" stroke="red" stroke-dasharray="220 600" stroke-dashoffset="-300" />
    <circle r="210" cx="0" fill="none" stroke-width="10" stroke="yellow" stroke-dasharray="220 600" stroke-dashoffset="-80" />
  </g>

  <g class="data">
    <path d="m-220 0 a120 -120 0 0 1 440 0" fill="none" stroke="blue" stroke-width="0" id="path" />
    <text dx="25">
      <textPath href="#path">40</textPath>
    </text>
    <text dx="95">
      <textPath href="#path">60</textPath>
    </text>
    <text dx="155">
      <textPath href="#path">80</textPath>
    </text>
    <text dx="210">
      <textPath href="#path">120</textPath>
    </text>
    <text dx="280">
      <textPath href="#path">160</textPath>
    </text>
    <text dx="370">
      <textPath href="#path">200</textPath>
    </text>
    <text dx="420">
      <textPath href="#path">260</textPath>
    </text>
    <text dx="480">
      <textPath href="#path">280</textPath>
    </text>
    <text dx="550">
      <textPath href="#path">300</textPath>
    </text>
    <text dx="610">
      <textPath href="#path">320</textPath>
    </text>
  </g>

  <text id="num" text-anchor="middle" aligment-baseline="central" y="-100" style="font-size: 50px; font-family: sans-serif;">0</text>
</svg>

<br>
<br>
<br>

<input type="range" min="-100" max="90" value="-90" id="range">

Третий вариант Cаму иконку брал отсюда

range.addEventListener("input", function() {
  document.querySelector(".fuel").style.transform = `rotate(${this.value}deg)`;
});
svg {
  display: block;
  width: 200px;
  margin-top: 0;
}

.fuel {
  transition: 0.34s ease;
  transform-origin: center 350px;
  transform: rotate(-120deg);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 90 512 350">
  <g>
    <path d="M344,256l-84.4,64.2c-1.2-0.1-2.4-0.2-3.6-0.2c-17.7,0-32,14.3-32,32c0,17.7,14.3,32,32,32c17.7,0,32-14.3,32-32
        c0-1.2-0.1-2.4-0.2-3.6L352,264L344,256z" class="fuel" />

    <path d="M256,96C132.3,96,32,196.3,32,320c0,34.4,7.8,66.9,21.6,96h36.1c-15.4-26.6-24.2-56.6-25.5-88H96v-16H64.2
        c1.2-28.8,8.7-56.5,21.8-81.4l27.5,15.9l8-13.9L94,216.8c7.4-11.6,16.2-22.6,26.2-32.6c10.2-10.1,21.3-19,33.1-26.5l15.8,27.3
        l13.9-8l-15.8-27.3c24.8-13,52.2-20.3,80.8-21.5V160h16v-31.8c28.6,1.2,56,8.6,80.8,21.5L329.1,177l13.9,8l15.8-27.3
        c11.8,7.5,22.9,16.4,33.1,26.5c10,10,18.7,20.9,26.2,32.6l-27.4,15.8l8,13.9l27.5-15.9c13.1,24.9,20.6,52.6,21.8,81.4H416v16h31.8
        c-1.3,31.4-10.1,61.4-25.5,88h36.1c13.8-29.1,21.6-61.6,21.6-96C480,196.3,379.7,96,256,96z" />
  </g>
</svg>

<input type="range" min="-120" max="40" value="-120" id="range">

0
-1

Минималистичный <svg> с двумя кругами <circle>. Осталось только цифры добавить. Привод от <input>. Понижая у <circle id="KmH"> значение атрибута stroke-dashoffset с 200% до 88% - можно заполнить всю шкалу. Так-же для тех у кого не работает и прочих любителей минусовать - рабочий пример на jsfiddle: https://jsfiddle.net/6498fwr0/

body{background:#000}
<svg xmlns="http://www.w3.org/2000/svg" style="transform:rotate(181deg)" stroke-width="4%" stroke-dasharray="200%" fill="none">
    <circle cx="50%" cy="50%" r="25%" stroke-dashoffset="88%" stroke="#111"/>
    <circle id="KmH" cx="50%" cy="50%" r="25%" stroke-dashoffset="200%" stroke="#FC0"/>
</svg>

<input type="range" oninput="KmH.style.strokeDashoffset='130%'"/>

8
  • 1
    ваш пример не работает 8 мая 2021 в 8:05
  • @MaximLensky У меня всё работает и в Хром и в Фаерфокс с последними обновлениями. У вас где не работает в браузерах или в здесь на сайте в сниппете? Так-же для тех у кого не работает - рабочий пример на jsfiddle: jsfiddle.net/6498fwr0 9 мая 2021 в 8:28
  • я минус не ставил, просто написал что не работает и до сиих пор не работает, если хотите я запишу видео с демонстрацией не рабочего вашего ответа 9 мая 2021 в 8:53
  • @MaximLensky ) Спасибо. Видео много, а вот немного информации - в самый раз. Вы с какого браузера и ОС проверяли? 9 мая 2021 в 11:31
  • линукс с последним хромом и виндовс с последним хромом - везде не работает + файерфокс в винде и в убунту 9 мая 2021 в 11:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.