Анимация для svg овала

141
19 января 2022, 07:40

Есть такой макет.

Овал вокруг надписи "Мужская коллекция" это как будто орбита планеты.
Сам сайт называется - Planeta.

Нужно придумать какую то анимацию с этим овалом. Любую, но хорошую. Сам пока не знаю как это сделать. Можете подсказать что то?

PS Это интернет магазин одежды. Mожно реализовать как наручные часы так, чтобы не было видно стрелок и вокруг этой орбиты вращалась планета. Скорее не SVG анимация, достаточно CSS анимации.

Answer 1

Анимация рисования овала

Используется изменение параметров stroke-dasharray 

.container { 
 width:50vw; 
 height:50vh; 
 } 
 #oval { 
 fill:none; 
 stroke:silver; 
 stroke-width:4px; 
 stroke-dasharray:0,1859; 
 stroke-dashoffset:-925; 
 filter:url(#dropshadow); 
  
 } 
 text { 
 font-size:36px; 
 font-family:sans-serif; 
 font-weight:400; 
 fill:silver; 
 text-decoration: underline; 
 filter:url(#dropshadow); 
 }
<div class="container"> 
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="0 0 813 733" preserveAspectRatio="xMinYMin meet"> 
<defs> 
    <filter id="dropshadow" height="150%" width="150%"> 
      <feGaussianBlur in="SourceAlpha" stdDeviation="1"/>  
      <feOffset dx="4" dy="4" result="offsetblur"/>  
      <feMerge>  
        <feMergeNode/> 
        <feMergeNode in="SourceGraphic"/>  
      </feMerge> 
    </filter> 
  </defs>  
  <rect width="100%" height="100%" fill="#F4F4F4" /> 
  <path id="oval"  d="m661.6 98.6c39.6 16.9 73.9 49.5 81.5 100.2 11.8 78-34.7 158.6-81.5 222.1-59.1 80.1-145 139.2-237.6 180.9-66.9 30.2-138.9 42.9-218.4 28.8-43.9-7.8-89.1-46.4-101.5-90.9C78.2 446.6 146.8 330.5 205 268.7 263.1 206.9 343.6 150.3 424 117.2 497.4 87 588.5 67.3 661.6 98.6Z"> 
    <animate id="an_oval" attributeName="stroke-dasharray" dur="4s" begin="0s" values="0 1859;1859 0" fill="freeze" /> 
    </path> 
<text x="225" y="350">МУЖСКАЯ КОЛЛЕКЦИЯ </text> 
</svg> 
</div>

Туда - обратно 

.container { 
 width:50vw; 
 height:50vh; 
 } 
 #oval { 
 fill:none; 
 stroke:silver; 
 stroke-width:4px; 
 stroke-dasharray:0,1859; 
 stroke-dashoffset:-925; 
 filter:url(#dropshadow); 
  
 } 
 text { 
 font-size:36px; 
 font-family:sans-serif; 
 font-weight:400; 
 fill:silver; 
 text-decoration: underline; 
 filter:url(#dropshadow); 
 }
<div class="container"> 
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="0 0 813 733" preserveAspectRatio="xMinYMin meet"> 
<defs> 
    <filter id="dropshadow" height="150%" width="150%"> 
      <feGaussianBlur in="SourceAlpha" stdDeviation="1"/>  
      <feOffset dx="4" dy="4" result="offsetblur"/>  
      <feMerge>  
        <feMergeNode/> 
        <feMergeNode in="SourceGraphic"/>  
      </feMerge> 
    </filter> 
  </defs>  
  <rect width="100%" height="100%" fill="#F4F4F4" /> 
  <path id="oval"  d="m661.6 98.6c39.6 16.9 73.9 49.5 81.5 100.2 11.8 78-34.7 158.6-81.5 222.1-59.1 80.1-145 139.2-237.6 180.9-66.9 30.2-138.9 42.9-218.4 28.8-43.9-7.8-89.1-46.4-101.5-90.9C78.2 446.6 146.8 330.5 205 268.7 263.1 206.9 343.6 150.3 424 117.2 497.4 87 588.5 67.3 661.6 98.6Z"> 
    <animate id="an_oval" 
      attributeName="stroke-dasharray" 
      dur="8s" 
      begin="0s" 
      values=" 
      0 1859; 
      1859 0; 
      1859 0; 
      0 1859" 
      repeatCount="indefinite" 
      fill="freeze" /> 
    </path> 
<text x="225" y="350" font-size="36px" font-family="sans-serif" font-weight="500" fill="#151515" >МУЖСКАЯ КОЛЛЕКЦИЯ </text>	 
</svg> 
</div>

Анимация из одной точки 

.container { 
 width:50vw; 
 height:50vh; 
 } 
 #oval { 
 fill:none; 
 stroke:silver; 
 stroke-width:4px; 
 stroke-dasharray:0,1859; 
 stroke-dashoffset:-925; 
 filter:url(#dropshadow); 
  
 } 
 text { 
 font-size:36px; 
 font-family:sans-serif; 
 font-weight:400; 
 fill:silver; 
 text-decoration: underline; 
 filter:url(#dropshadow); 
 }
<div class="container"> 
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100vw" height="100vh" viewBox="0 0 813 733" preserveAspectRatio="xMinYMin meet"> 
<defs> 
    <filter id="dropshadow" height="150%" width="150%"> 
      <feGaussianBlur in="SourceAlpha" stdDeviation="1"/>  
      <feOffset dx="4" dy="4" result="offsetblur"/>  
      <feMerge>  
        <feMergeNode/> 
        <feMergeNode in="SourceGraphic"/>  
      </feMerge> 
    </filter> 
  </defs>  
  <rect width="100%" height="100%" fill="#F4F4F4" /> 
  <path id="oval"  d="m661.6 98.6c39.6 16.9 73.9 49.5 81.5 100.2 11.8 78-34.7 158.6-81.5 222.1-59.1 80.1-145 139.2-237.6 180.9-66.9 30.2-138.9 42.9-218.4 28.8-43.9-7.8-89.1-46.4-101.5-90.9C78.2 446.6 146.8 330.5 205 268.7 263.1 206.9 343.6 150.3 424 117.2 497.4 87 588.5 67.3 661.6 98.6Z"> 
    <animate 
	  id="an_oval" 
	  attributeName="stroke-dasharray" 
	  dur="5s" 
	  begin="0s" 
	  values=" 
	  0, 929.5 0, 929.5;0 0 1859,0;0, 929.5 0, 929.5" 
	  fill="freeze" 
	  repeatCount="indefinite" />  
   
  </path>   
    <text x="225" y="350"  >МУЖСКАЯ КОЛЛЕКЦИЯ </text> 
</svg> 
</div>

Answer 2

А может просто пусть что-нибудь летает типа планеты?

section { 
  height: 20em; 
  width: 20em; 
  border: 1px solid silver; 
  border-radius: 50%; 
  transform: skew(-10deg, -15deg); 
  margin: 2em auto; 
} 
 
div { 
  height: 100%; 
  width: 100%; 
  text-transform: uppercase; 
  text-align: center; 
  transform: skew(10deg, 15deg); 
} 
 
div::before { 
  content: ""; 
  display: inline-block; 
  height: 100%; 
  vertical-align: middle; 
} 
 
i { 
  position: absolute; 
  left: 0; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  animation: spin 5s linear infinite; 
} 
 
i::before { 
  content: ""; 
  position: absolute; 
  left: 14.645%; 
  top: 14.645%; 
  margin: -1em 0 0 -1em; 
  width: 2em; 
  height: 2em; 
  background: antiquewhite; 
  box-shadow: 0 0 10px 1px orange; 
  border-radius: 50%; 
  text-align: center; 
  animation: fix-circle 5s linear backwards infinite;  
} 
 
@keyframes spin { 
  from { transform: rotate(0)     } 
  to   { transform: rotate(1turn) } 
} 
 
@keyframes fix-circle { 
  from { transform: rotate(1turn) skew(10deg, 15deg) } 
  to   { transform: rotate(0)     skew(10deg, 15deg) } 
}
<section> 
  <i></i> 
  <div>Мужская коллекция</div> 
</section>

Answer 3

Вот такие вот часики с претензией на дискретность хода:

requestAnimationFrame(clock); 
 
function clock(t, t2) { 
  requestAnimationFrame(clock); 
  relocate(sec, calc(6e4, 1e3, 0.8)); 
  relocate(min, calc(36e5, 6e4, 0.99)); 
} 
 
function calc(k1, k2, k3){ 
  let t = Date.now() % k1; 
  let x = t%k2 / k2; 
  x = Math.max(0, x - k3); 
  x /= 1 - k3; 
  t = Math.floor(t/k2) + 3*x*x-2*x*x*x; 
  return t*Math.PI/30; 
} 
 
function relocate(el, rad) { 
  el.setAttribute('cx', Math.cos(rad)*50); 
  el.setAttribute('cy', Math.sin(rad)*30); 
}
<svg viewbox=-60,-60,120,120 height=90vh width=90vw> 
  <g transform=rotate(-55) stroke=black stroke-width=0.5 > 
    <ellipse rx=50 ry=30 fill=none /> 
    <circle id=min r=3 fill=white /> 
    <circle id=sec r=2 fill=black /> 
  </g> 
</svg>

Answer 4

Только как вариант возможной анимации для примера (без svg):

* { 
  box-sizing: border-box; 
} 
 
html, 
body { 
  padding: 0; 
  margin: 0; 
} 
 
.box { 
  position: relative; 
  display: block; 
  margin: 30px auto; 
  padding: 0; 
  color: #000; 
  overflow: visible; 
  transition: color 0.7s; 
  cursor: pointer; 
  height: 300px; 
} 
 
.box:after,  
.box:before { 
  content: ''; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  border-radius: 50%; 
  opacity: 0; 
  border: 4px solid rgba(0,0,0,.5); 
  margin: -150px 0 0 -150px; 
 
  width: 300px; 
  height: 300px; 
} 
 
 
.box:before { 
    animation-name: sAnim2, sAnim1; 
    animation-duration: 5s, 2s; 
    animation-iteration-count: infinite, infinite; 
    animation-timing-function: ease, linear; 
    animation-fill-mode: forwards; 
} 
 
.box:after { 
    animation-name: sAnim2, sAnim0; 
    animation-duration: 5s, 2s; 
    animation-iteration-count: infinite, infinite; 
    animation-timing-function: ease, linear; 
    animation-fill-mode: forwards; 
} 
 
 
 
@keyframes sAnim0 { 
  0% { 
    transform: perspective(1000px) rotate3d(1, 1, 1, 0deg); 
  } 
  100% { 
    transform: perspective(1000px) rotate3d(1, 1, 1, 360deg); 
  } 
} 
 
 
@keyframes sAnim1 { 
  0% { 
    transform: perspective(1000px) rotate3d(1, -1, 1, 0deg); 
  } 
  100% { 
    transform: perspective(1000px) rotate3d(1, -1, 1, 360deg); 
  } 
} 
 
 
@keyframes sAnim2 { 
  0%, 100% { 
    opacity: 0; 
  } 
  25%, 75% { 
    opacity: 1; 
  } 
} 
 
 
 
h2 { 
  position: absolute; 
  z-index: 10; 
  top:50%; 
  left:50%; 
  text-align: center; 
  transform:translate(-50%, -50%); 
  font-family: sans-serif; 
  text-transform: uppercase; 
  margin: 0; 
  font-size: 1.25rem;  
} 
 
h2:after { 
  content: ''; 
  position: absolute; 
  bottom: -10px; 
  left:50%; 
  width: 80%; 
  height: 1px; 
  background: #000; 
  margin-left: -40%; 
  transition: height .5s ease-in-out; 
} 
 
h2 a { 
  color: inherit; 
  text-decoration: none; 
} 
 
h2:hover:after { 
  height: 0; 
}
<div class="box"> 
  <h2><a href="#">Мужская коллекция</a></h2> 
</div>

Answer 5

Анимация вращения сегментов окружности

Полная длина окружности равна 1859px Используется stroke-dasharray для деления окружности на сегменты
stroke-dashoffset - для анимации вращения сегментов

Два сегмента

stroke-dasharray:910.5,19;
stroke-dashoffset:1859; 

.container { 
 width:50vw; 
 height:50vh; 
 } 
 #oval { 
 fill:none; 
 stroke:silver; 
 stroke-width:4px; 
 stroke-dasharray:910.5,19; 
 stroke-dashoffset:1859; 
 filter:url(#dropshadow); 
  
 } 
 text { 
 font-size:36px; 
 font-family:sans-serif; 
 font-weight:400; 
 fill:silver; 
 text-decoration: underline; 
 filter:url(#dropshadow); 
 }
<div class="container"> 
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="0 0 813 733" preserveAspectRatio="xMinYMin meet"> 
<defs> 
    <filter id="dropshadow" height="150%" width="150%"> 
      <feGaussianBlur in="SourceAlpha" stdDeviation="1"/>  
      <feOffset dx="4" dy="4" result="offsetblur"/>  
      <feMerge>  
        <feMergeNode/> 
        <feMergeNode in="SourceGraphic"/>  
      </feMerge> 
    </filter> 
  </defs>  
  <rect width="100%" height="100%" fill="#F4F4F4" /> 
  <path id="oval"  d="m661.6 98.6c39.6 16.9 73.9 49.5 81.5 100.2 11.8 78-34.7 158.6-81.5 222.1-59.1 80.1-145 139.2-237.6 180.9-66.9 30.2-138.9 42.9-218.4 28.8-43.9-7.8-89.1-46.4-101.5-90.9C78.2 446.6 146.8 330.5 205 268.7 263.1 206.9 343.6 150.3 424 117.2 497.4 87 588.5 67.3 661.6 98.6Z"> 
    <animate id="an_oval" 
	  attributeName="stroke-dashoffset" 
	  dur="5s" 
	  begin="0s" 
	  values="1859;0" 
	  fill="freeze" 
	  repeatCount="indefinite" /> 
    </path> 
<text x="225" y="350">МУЖСКАЯ КОЛЛЕКЦИЯ </text> 
</svg> 
</div>

Три сегмента

stroke-dasharray:600.7,19;

.container { 
 width:50vw; 
 height:50vh; 
 } 
 #oval { 
 fill:none; 
 stroke:silver; 
 stroke-width:4px; 
 stroke-dasharray:600.7,19; 
 stroke-dashoffset:1859; 
 filter:url(#dropshadow); 
  
 } 
 text { 
 font-size:36px; 
 font-family:sans-serif; 
 font-weight:400; 
 fill:silver; 
 text-decoration: underline; 
 filter:url(#dropshadow); 
 }
<div class="container"> 
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="0 0 813 733" preserveAspectRatio="xMinYMin meet"> 
<defs> 
    <filter id="dropshadow" height="150%" width="150%"> 
      <feGaussianBlur in="SourceAlpha" stdDeviation="1"/>  
      <feOffset dx="4" dy="4" result="offsetblur"/>  
      <feMerge>  
        <feMergeNode/> 
        <feMergeNode in="SourceGraphic"/>  
      </feMerge> 
    </filter> 
  </defs>  
  <rect width="100%" height="100%" fill="#F4F4F4" /> 
  <path id="oval"  d="m661.6 98.6c39.6 16.9 73.9 49.5 81.5 100.2 11.8 78-34.7 158.6-81.5 222.1-59.1 80.1-145 139.2-237.6 180.9-66.9 30.2-138.9 42.9-218.4 28.8-43.9-7.8-89.1-46.4-101.5-90.9C78.2 446.6 146.8 330.5 205 268.7 263.1 206.9 343.6 150.3 424 117.2 497.4 87 588.5 67.3 661.6 98.6Z"> 
    <animate id="an_oval" 
	  attributeName="stroke-dashoffset" 
	  dur="5s" 
	  begin="0s" 
	  values="1859;0" 
	  fill="freeze" 
	  repeatCount="indefinite" /> 
    </path> 
<text x="225" y="350">МУЖСКАЯ КОЛЛЕКЦИЯ </text> 
</svg> 
</div>

Четыре сегмента

stroke-dasharray:445.75,19;

.container { 
 width:50vw; 
 height:50vh; 
 } 
 #oval { 
 fill:none; 
 stroke:silver; 
 stroke-width:4px; 
 stroke-dasharray:445.75,19; 
 stroke-dashoffset:1859; 
 filter:url(#dropshadow); 
  
 } 
 text { 
 font-size:36px; 
 font-family:sans-serif; 
 font-weight:400; 
 fill:silver; 
 text-decoration: underline; 
 filter:url(#dropshadow); 
 }
<div class="container"> 
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="0 0 813 733" preserveAspectRatio="xMinYMin meet"> 
<defs> 
    <filter id="dropshadow" height="150%" width="150%"> 
      <feGaussianBlur in="SourceAlpha" stdDeviation="1"/>  
      <feOffset dx="4" dy="4" result="offsetblur"/>  
      <feMerge>  
        <feMergeNode/> 
        <feMergeNode in="SourceGraphic"/>  
      </feMerge> 
    </filter> 
  </defs>  
  <rect width="100%" height="100%" fill="#F4F4F4" /> 
  <path id="oval"  d="m661.6 98.6c39.6 16.9 73.9 49.5 81.5 100.2 11.8 78-34.7 158.6-81.5 222.1-59.1 80.1-145 139.2-237.6 180.9-66.9 30.2-138.9 42.9-218.4 28.8-43.9-7.8-89.1-46.4-101.5-90.9C78.2 446.6 146.8 330.5 205 268.7 263.1 206.9 343.6 150.3 424 117.2 497.4 87 588.5 67.3 661.6 98.6Z"> 
    <animate id="an_oval" 
	  attributeName="stroke-dashoffset" 
	  dur="5s" 
	  begin="0s" 
	  values="1859;0" 
	  fill="freeze" 
	  repeatCount="indefinite" /> 
    </path> 
<text x="225" y="350">МУЖСКАЯ КОЛЛЕКЦИЯ </text> 
</svg> 
</div>

Update 26.12.2019

Анимация вращения шарика с по орбите с одновременным вращением его вокруг своей оси

Чёрно-белый вариант

.container { 
 width:50vw; 
 height:50vh; 
 } 
 #oval { 
 fill:none; 
 stroke:silver; 
 stroke-width:4px; 
 filter:url(#dropshadow); 
  
 } 
 text { 
 font-size:40px; 
 font-family:sans-serif; 
 font-weight:500; 
 fill:silver; 
 text-decoration: underline; 
 filter:url(#dropshadow); 
 fill:url(#gradCirc); 
 } 
  
.circ{ 
   fill:url(#gradCirc); 
   } 
   
<div class="container"> 
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="0 0 813 733" preserveAspectRatio="xMinYMin meet"> 
<defs> 
    <filter id="dropshadow" height="150%" width="150%"> 
      <feGaussianBlur in="SourceAlpha" stdDeviation="1"/>  
      <feOffset dx="3" dy="3" result="offsetblur"/>  
      <feMerge>  
        <feMergeNode/> 
        <feMergeNode in="SourceGraphic"/>  
      </feMerge> 
    </filter>  
<linearGradient id="gradCirc"> 
			<stop offset="5%" stop-color="white"></stop> 
			<stop offset="40%" stop-color="silver"></stop> 
			<stop offset="100%" stop-color="#151515" ></stop> 
		</linearGradient> 
  </defs>   
   
   
  <rect width="100%" height="100%" fill="#F4F4F4" /> 
  <path id="oval"  d="m661.6 98.6c39.6 16.9 73.9 49.5 81.5 100.2 11.8 78-34.7 158.6-81.5 222.1-59.1 80.1-145 139.2-237.6 180.9-66.9 30.2-138.9 42.9-218.4 28.8-43.9-7.8-89.1-46.4-101.5-90.9C78.2 446.6 146.8 330.5 205 268.7 263.1 206.9 343.6 150.3 424 117.2 497.4 87 588.5 67.3 661.6 98.6Z"> 
    <animate id="an_oval" 
	  attributeName="stroke-dashoffset" 
	  dur="5s" 
	  begin="0s" 
	  values="1859;0" 
	  fill="freeze" 
	  repeatCount="indefinite" /> 
    </path> 
<text x="205" y="350">МУЖСКАЯ КОЛЛЕКЦИЯ </text> 
    
 <circle class="circ"  cx="0" cy="0" r="25"  >  
   
    <animateMotion 
	  dur="10s" 
	  repeatCount="indefinite" 
	  additive="sum" 
	  rotate="auto-reverse"> 
          <mpath xlink:href="#oval"/> 
    </animateMotion>  
<circle/>	 
</svg> 
</div>

ЦВЕТНОЙ ВАРИАНТ ЛОГОТИПА

Изменить цветовую гамму по своему вкусу довольно легко, - нужно поменять цвета у двух градиентов:

fill:url(#gradText); - градиент для текста и дуги

fill:url(#gradCirc); - градиент для шарика

В примере ниже сплошная линия заменена на пунктирную - stroke-dasharray:25 8;

Анимация вращения пунктирной линии в разные стороны достигается изменением
stroke-dashoffset от максимального значения до нуля и обратно до максимального значения - values="1859;0;0;1859"

Повторяющиеся значения обеспечивают паузу вращения в крайних точках

.container { 
 width:50vw; 
 height:50vh; 
 } 
 #oval { 
 fill:none; 
 stroke-width:4px; 
 stroke-dasharray:25 8; 
 stroke:url(#gradText); 
 } 
 text { 
 font-size:40px; 
 font-family:sans-serif; 
 font-weight:500; 
 stroke:silver; 
 text-decoration: underline; 
  fill:url(#gradText); 
 } 
  
.circ{ 
   fill:url(#gradCirc); 
    
    }
<div class="container"> 
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="0 0 813 733" preserveAspectRatio="xMinYMin meet"> 
<defs> 
    <filter id="dropshadow" height="150%" width="150%"> 
      <feGaussianBlur in="SourceAlpha" stdDeviation="1"/>  
      <feOffset dx="3" dy="3" result="offsetblur"/>  
      <feMerge>  
        <feMergeNode/> 
        <feMergeNode in="SourceGraphic"/>  
      </feMerge> 
    </filter>  
<linearGradient id="gradText"> 
			<stop offset="5%" stop-color="dodgerblue"></stop> 
			<stop offset="100%" stop-color="#B34EE9" ></stop> 
</linearGradient>  
  <linearGradient id="gradCirc"> 
			<stop offset="30%" stop-color="dodgerblue"></stop> 
			<stop offset="50%" stop-color="white" ></stop> 
			<stop offset="80%" stop-color="#B34EE9" ></stop> 
		</linearGradient>		 
  </defs>   
   
   
  <rect width="100%" height="100%" fill="#F4F4F4" /> 
  <path id="oval"  d="m661.6 98.6c39.6 16.9 73.9 49.5 81.5 100.2 11.8 78-34.7 158.6-81.5 222.1-59.1 80.1-145 139.2-237.6 180.9-66.9 30.2-138.9 42.9-218.4 28.8-43.9-7.8-89.1-46.4-101.5-90.9C78.2 446.6 146.8 330.5 205 268.7 263.1 206.9 343.6 150.3 424 117.2 497.4 87 588.5 67.3 661.6 98.6Z"> 
    <animate id="an_oval" 
	  attributeName="stroke-dashoffset" 
	  dur="16s" 
	  begin="0s" 
	  values="1859;0;0;1859" 
	  fill="freeze" 
	  repeatCount="indefinite" /> 
    </path> 
<text x="205" y="350">МУЖСКАЯ КОЛЛЕКЦИЯ </text> 
    
 <circle class="circ"  cx="0" cy="0" r="28"  >  
   
    <animateMotion 
	  dur="8s" 
	  repeatCount="indefinite" 
	  additive="sum" 
	  rotate="auto-reverse"> 
          <mpath xlink:href="#oval"/> 
    </animateMotion>  
<circle/>	 
</svg> 
</div>

Более подробно, как это делается здесь

READ ALSO
Странная задержка у input
CSS

Странная задержка у input

http://wwwstudita

 104
не правильно выводит плитки
c++

не правильно выводит плитки

Я что-то понаписывал кодСмотрю на него и не могу понять что в нём не так

 84
Очень быстрое движение фигуры sfml
c++

Очень быстрое движение фигуры sfml

У меня есть фигура(квадрат для примера):

 73
Найти количество символов в слове
c++

Найти количество символов в слове

Есть массив на 80В каждом элементе массива находится слово

 74