2

Estoy teniendo un problemas con la animación izquierda que no me funciona y con el tamaño que no me esta aplicando como el de al lado. ¿Por qué puede ser?

	body{
		padding: 40px;
		margin: 0;
	}
	.container{
	    width: 1170px;
	    margin: auto;

	    height: 391px;
	}
	.col{
		height: 250px;
    background: -moz-linear-gradient(45deg, rgba(112, 198, 171, 0.7) 0%, rgba(70, 166, 195, 0.7) 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(112, 198, 171, 0.7)), color-stop(100%, rgba(70, 166, 195, 0.7)));
    background: -webkit-linear-gradient(45deg, rgba(112, 198, 171, 0.7) 0%, rgba(70, 166, 195, 0.7) 100%);
    background: -o-linear-gradient(45deg, rgba(112, 198, 171, 0.7) 0%, rgba(70, 166, 195, 0.7) 100%);
    background: -ms-linear-gradient(45deg, rgba(112, 198, 171, 0.7) 0%, rgba(70, 166, 195, 0.7) 100%);
    background: linear-gradient(45deg, rgba(112, 198, 171, 0.7) 0%, rgba(70, 166, 195, 0.7) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc70c6ab', endColorstr='#cc46a6c3',GradientType=1 );	width: 48%;	
    margin: 10px;
    -webkit-border-radius: 20px;
	-webkit-border-top-left-radius: 0;
	-moz-border-radius: 20px;
	-moz-border-radius-topleft: 0;
	border-radius: 20px;
	border-top-left-radius: 0;
   	float: left;	
   	box-shadow: 0 2px 18px 0 rgba(0,0,0,0.21);
	}
	.col h2{
		float: left;
		color: #fff;
		font-family: 'Raleway', sans-serif;
		font-weight: 400;
		text-transform: uppercase;
		padding-top: 12%;
		font-size: 24px;
	}
	svg{
		padding: 40px 20px 40px 40px;
	    margin: auto;
	    display: block;
	
	}
	.path {
  		stroke-dasharray: 1000;
  		stroke-dashoffset: 1000;
  		animation: dash 5s linear alternate infinite;
	}

	@keyframes dash {
	  from {
	    stroke-dashoffset: 1000;
	  }
	  to {
	    stroke-dashoffset: 0;
	  }
	}
<div class="container">
	<div class="col">
		<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
			 width="121px" height="122px" viewBox="0 0 121 122" enable-background="new 0 0 121 122" xml:space="preserve" style="float:left">
		<path fill="none" stroke="#fff" stroke-width="2.5" stroke-miterlimit="10" d="M60.783,2.302
			C28.722,2.302,2.73,28.294,2.73,60.355c0,32.063,25.992,58.054,58.053,58.054c32.063,0,58.054-25.991,58.054-58.054
			C118.837,28.294,92.846,2.302,60.783,2.302L60.783,2.302z"/>
		<g>
			<path class="path" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" d="M42.073,56.853c-4.032,0-7.313-3.281-7.313-7.312
				c0-4.033,3.28-7.313,7.313-7.313c4.031,0,7.312,3.281,7.312,7.313C49.385,53.572,46.104,56.853,42.073,56.853z"/>
			<path class="path" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" d="M42.073,75.667c-2.622,0-4.755-2.215-4.755-4.939
				v-2.796c-1.718-0.442-3.354-1.12-4.883-2.025l-1.979,1.98c-0.956,0.954-2.214,1.481-3.546,1.481c-1.262,0-2.436-0.481-3.307-1.352
				c-1.854-1.854-1.795-4.928,0.13-6.854l1.978-1.979c-0.905-1.531-1.585-3.167-2.027-4.884h-2.794c-2.722,0-4.938-2.132-4.938-4.753
				s2.216-4.753,4.938-4.753h2.793c0.442-1.718,1.121-3.355,2.024-4.887l-1.974-1.975c-1.925-1.925-1.984-4.998-0.131-6.853
				c0.873-0.872,2.047-1.351,3.308-1.351c1.312,0,2.604,0.54,3.546,1.481l1.973,1.974c1.532-0.906,3.17-1.586,4.89-2.028v-2.789
				c0-2.723,2.134-4.938,4.755-4.938c2.621,0,4.753,2.216,4.753,4.938v2.789c1.72,0.442,3.358,1.122,4.888,2.027l1.973-1.973
				c0.958-0.957,2.216-1.481,3.549-1.481c1.261,0,2.435,0.479,3.305,1.35c1.854,1.855,1.792,4.928-0.13,6.854l-1.975,1.975
				c0.905,1.533,1.583,3.169,2.024,4.887h2.793c2.723,0,4.939,2.132,4.939,4.753S65.979,54.3,63.255,54.3h-2.793
				c-0.444,1.718-1.122,3.354-2.027,4.885l1.976,1.978c1.927,1.924,1.984,4.999,0.132,6.854c-0.873,0.87-2.046,1.352-3.307,1.352
				c-1.332,0-2.591-0.527-3.548-1.481l-1.98-1.98c-1.529,0.905-3.167,1.581-4.881,2.023v2.8
				C46.827,73.452,44.694,75.667,42.073,75.667z"/>
			<path class="path" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" d="M85.728,84.026c-3.659,0-6.638-2.979-6.638-6.639
				c0-3.658,2.977-6.637,6.638-6.637c3.66,0,6.637,2.979,6.637,6.637C92.364,81.048,89.386,84.026,85.728,84.026z"/>
			<path class="path" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" d="M85.728,97.283c-2.135,0-3.872-1.798-3.872-4.009
				v-1.862c-1.155-0.318-2.261-0.775-3.306-1.37l-1.315,1.315c-0.776,0.775-1.797,1.204-2.878,1.204c-1.027,0-1.986-0.393-2.696-1.105
				c-1.508-1.51-1.466-4.009,0.097-5.57l1.317-1.32c-0.594-1.041-1.053-2.148-1.371-3.304h-1.857c-2.212,0-4.01-1.737-4.01-3.871
				s1.798-3.872,4.01-3.872h1.855c0.32-1.155,0.777-2.263,1.371-3.307l-1.315-1.315c-1.563-1.563-1.604-4.062-0.099-5.571
				c0.712-0.714,1.672-1.105,2.699-1.105c1.08,0,2.102,0.428,2.877,1.2l1.312,1.313c1.045-0.594,2.152-1.054,3.308-1.37v-1.855
				c0-2.21,1.739-4.009,3.873-4.009s3.871,1.799,3.871,4.009v1.855c1.156,0.318,2.265,0.776,3.307,1.37l1.313-1.313
				c0.775-0.773,1.796-1.2,2.878-1.2c1.026,0,1.984,0.392,2.695,1.104c1.509,1.511,1.466,4.009-0.098,5.573L98.38,70.21
				c0.594,1.043,1.054,2.15,1.37,3.307h1.856c2.212,0,4.01,1.738,4.01,3.871c0,2.136-1.799,3.874-4.01,3.874h-1.858
				c-0.318,1.154-0.776,2.261-1.371,3.304l1.316,1.315c1.564,1.566,1.606,4.065,0.098,5.573c-0.711,0.713-1.669,1.105-2.696,1.105
				c-1.08,0-2.104-0.428-2.877-1.202L92.9,90.04c-1.044,0.594-2.148,1.052-3.303,1.369v1.863
				C89.599,95.485,87.86,97.283,85.728,97.283z"/>
			<path class="path" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
				M30.104,48.726c0,0,0.794-11.238,11.309-10.909"/>
		</g>
		<h2>Geolocalización 1.0 0</h2>
		</svg>

	</div>	
	<div class="col">
		<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
			 width="121px" height="122px" viewBox="0 0 121 122" enable-background="new 0 0 121 122" xml:space="preserve" style="float:left">
		<path class="path" fill="none" stroke="#fff" stroke-width="2.5" stroke-miterlimit="10" d="M60.783,2.302
			C28.722,2.302,2.73,28.294,2.73,60.355c0,32.063,25.992,58.054,58.053,58.054c32.063,0,58.054-25.991,58.054-58.054
			C118.837,28.294,92.846,2.302,60.783,2.302L60.783,2.302z"/>
		<g>
			<path class="path" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" d="M85.754,45.762H35.813
				c-2.115,0-3.676-0.538-4.77-1.644c-1.849-1.869-1.818-4.723-1.783-8.027c0.006-0.454,0.01-0.918,0.01-1.392
				c0-0.474-0.004-0.938-0.01-1.391c-0.035-3.305-0.065-6.159,1.783-8.027c1.094-1.106,2.654-1.645,4.77-1.645h49.941
				c2.115,0,3.676,0.538,4.771,1.645c1.849,1.868,1.816,4.722,1.781,8.027c-0.006,0.454-0.01,0.918-0.01,1.391
				c0,0.473,0.004,0.938,0.01,1.392c0.035,3.304,0.065,6.158-1.781,8.027C89.43,45.224,87.869,45.762,85.754,45.762z"/>
			<path class="path" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" d="M85.754,71.651H35.813
				c-2.115,0-3.676-0.537-4.77-1.645c-1.849-1.869-1.818-4.725-1.783-8.025c0.006-0.455,0.01-0.92,0.01-1.393
				c0-0.475-0.004-0.938-0.01-1.394c-0.035-3.304-0.065-6.158,1.783-8.027c1.094-1.106,2.654-1.644,4.77-1.644h49.941
				c2.115,0,3.676,0.538,4.771,1.644c1.849,1.869,1.816,4.723,1.781,8.027c-0.006,0.454-0.01,0.918-0.01,1.394
				c0,0.473,0.004,0.938,0.01,1.393c0.035,3.303,0.065,6.156-1.781,8.025C89.43,71.114,87.869,71.651,85.754,71.651z"/>
			<path class="path" fill="#fff" d="M69.284,61.12c0,0.646-0.524,1.172-1.17,1.172H62.69c-0.646,0-1.171-0.522-1.171-1.172l0,0
				c0-0.646,0.525-1.169,1.171-1.169h5.424C68.762,59.951,69.284,60.476,69.284,61.12L69.284,61.12z"/>
			<path class="path" fill="#fff" d="M74.021,63.834c-0.646,0-1.172-0.366-1.172-0.817v-3.79c0-0.451,0.522-0.818,1.172-0.818l0,0
				c0.646,0,1.169,0.367,1.169,0.818v3.79C75.189,63.469,74.665,63.834,74.021,63.834L74.021,63.834z"/>
			<path class="path" fill="#fff" d="M86.198,61.12c0,0.646-0.524,1.172-1.17,1.172h-5.424c-0.646,0-1.171-0.522-1.171-1.172l0,0
				c0-0.646,0.525-1.169,1.171-1.169h5.424C85.676,59.951,86.198,60.476,86.198,61.12L86.198,61.12z"/>
			<path class="path" fill="#fff" d="M69.284,87.245c0,0.646-0.524,1.172-1.17,1.172H62.69c-0.646,0-1.171-0.522-1.171-1.172l0,0c0-0.646,0.525-1.17,1.171-1.17
				h5.424C68.762,86.075,69.284,86.601,69.284,87.245L69.284,87.245z"/>
			<path class="path" fill="#fff" d="M74.021,89.959c-0.646,0-1.172-0.366-1.172-0.817v-3.789c0-0.451,0.522-0.818,1.172-0.818l0,0
				c0.646,0,1.169,0.367,1.169,0.818v3.789C75.189,89.594,74.665,89.959,74.021,89.959L74.021,89.959z"/>
			<path class="path" fill="#fff" d="M86.198,87.245c0,0.646-0.524,1.172-1.17,1.172h-5.424c-0.646,0-1.171-0.522-1.171-1.172l0,0
				c0-0.646,0.525-1.17,1.171-1.17h5.424C85.676,86.075,86.198,86.601,86.198,87.245L86.198,87.245z"/>
			<path class="path" fill="#fff" d="M69.284,34.697c0,0.646-0.524,1.172-1.17,1.172H62.69c-0.646,0-1.171-0.522-1.171-1.172l0,0
				c0-0.646,0.525-1.169,1.171-1.169h5.424C68.762,33.528,69.284,34.053,69.284,34.697L69.284,34.697z"/>
			<path class="path" fill="#fff" d="M74.021,37.411c-0.646,0-1.172-0.366-1.172-0.817v-3.79c0-0.451,0.522-0.818,1.172-0.818l0,0
				c0.646,0,1.169,0.367,1.169,0.818v3.79C75.189,37.046,74.665,37.411,74.021,37.411L74.021,37.411z"/>
			<path class="path" fill="#fff" d="M86.198,34.697c0,0.646-0.524,1.172-1.17,1.172h-5.424c-0.646,0-1.171-0.522-1.171-1.172l0,0
				c0-0.646,0.525-1.169,1.171-1.169h5.424C85.676,33.528,86.198,34.053,86.198,34.697L86.198,34.697z"/>
			<path class="path" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" d="M85.754,97.075H35.813
				c-2.115,0-3.676-0.537-4.77-1.645c-1.849-1.867-1.818-4.725-1.783-8.025c0.006-0.455,0.01-0.918,0.01-1.393
				c0-0.477-0.004-0.938-0.01-1.393c-0.035-3.305-0.065-6.16,1.783-8.025c1.094-1.105,2.654-1.646,4.77-1.646h49.941
				c2.115,0,3.676,0.539,4.771,1.646c1.849,1.869,1.816,4.723,1.781,8.025c-0.006,0.453-0.01,0.918-0.01,1.393
				c0,0.473,0.004,0.938,0.01,1.393c0.035,3.303,0.065,6.158-1.781,8.025C89.43,96.538,87.869,97.075,85.754,97.075z"/>
			<line class="path" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" x1="60.783" y1="45.762" x2="60.783" y2="48.729"/>
			<line class="path" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" x1="60.783" y1="71.651" x2="60.783" y2="74.354"/>
		</g>
		<h2>ATMService 1.0 0</h2>
		</svg>		
	</div>
</div>

1
  • ¿Cuál es el problema exacto? ¿Cómo "no funciona"?
    – Alvaro Montoro
    Commented el 17 sept. 2018 a las 20:40

1 respuesta 1

1

Diferencias entre los dos SVG que tienes:

  • Uno tiene viewBox="0 0 121 122" y el otro no tiene nada.
  • Uno tiene un tamaño de 190x190 y el otro tiene un tamaño de 150x150
  • Uno tiene un stroke de 3 en blanco y el otro de 1.1 en negro

Si le añadimos viewBox al que le falta, ponemos los dos con el mismo tamaño (190x190) y cambiamos el ancho del stroke a 3 en blanco para los dos, las animaciones se ven iguales:

body {
  padding: 50px;
  margin: 0;
}

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear alternate 1;
  animation-fill-mode: forwards;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="200.69289" x="102.70579" height="190.90512" width="190.90512" enable-background="new 0 0 121 120.5" xml:space="preserve" viewBox="0 0 121 122">
  <g>
    <path d="M85.346,45.657H35.404c-2.115,0-3.675-0.538-4.769-1.644c-1.849-1.869-1.818-4.723-1.783-8.027
      c0.005-0.454,0.01-0.918,0.01-1.392s-0.005-0.938-0.01-1.391c-0.036-3.305-0.066-6.159,1.783-8.027
      c1.094-1.106,2.654-1.645,4.769-1.645h49.942c2.115,0,3.676,0.538,4.771,1.645c1.849,1.868,1.817,4.722,1.782,8.027
      c-0.006,0.454-0.01,0.918-0.01,1.391s0.004,0.938,0.01,1.392c0.035,3.304,0.065,6.158-1.782,8.027
      C89.021,45.119,87.461,45.657,85.346,45.657z M35.404,26.723c-1.218,0-2.037,0.228-2.5,0.697c-0.912,0.922-0.887,3.267-0.86,5.749
      c0.005,0.465,0.01,0.941,0.01,1.426s-0.005,0.96-0.01,1.426c-0.027,2.482-0.052,4.826,0.86,5.749
      c0.464,0.469,1.282,0.697,2.5,0.697h49.942c1.219,0,2.037-0.228,2.5-0.697c0.913-0.923,0.887-3.267,0.86-5.749
      c-0.005-0.466-0.011-0.942-0.011-1.426s0.006-0.96,0.011-1.426c0.026-2.482,0.053-4.826-0.86-5.749
      c-0.464-0.469-1.281-0.697-2.5-0.697H35.404z"/>
    <g>
      <path d="M68.876,35.125c0,0.646-0.524,1.17-1.17,1.17h-5.424c-0.646,0-1.171-0.524-1.171-1.17l0,0c0-0.646,0.525-1.17,1.171-1.17
        h5.424C68.354,33.956,68.876,34.48,68.876,35.125L68.876,35.125z"/>
      <path d="M67.706,36.935h-5.424c-0.997,0-1.809-0.812-1.809-1.809c0-0.997,0.812-1.808,1.809-1.808h5.424
        c0.997,0,1.81,0.811,1.81,1.808C69.516,36.123,68.703,36.935,67.706,36.935z M62.282,34.594c-0.294,0-0.532,0.239-0.532,0.532
        c0,0.293,0.238,0.532,0.532,0.532h5.424c0.293,0,0.532-0.239,0.532-0.532c0-0.293-0.239-0.532-0.532-0.532H62.282z"/>
    </g>
    <g>
      <path d="M74.727,36.35c0,0.617-0.5,1.117-1.117,1.117l0,0c-0.615,0-1.115-0.5-1.115-1.117v-2.021c0-0.617,0.5-1.117,1.115-1.117
        l0,0c0.617,0,1.117,0.5,1.117,1.117V36.35z"/>
      <path d="M73.609,38.104c-0.967,0-1.754-0.787-1.754-1.755v-2.021c0-0.968,0.787-1.755,1.754-1.755
        c0.968,0,1.756,0.787,1.756,1.755v2.021C75.365,37.317,74.578,38.104,73.609,38.104z M73.609,33.85
        c-0.264,0-0.479,0.215-0.479,0.479v2.021c0,0.264,0.216,0.479,0.479,0.479c0.265,0,0.479-0.215,0.479-0.479v-2.021
        C74.089,34.064,73.874,33.85,73.609,33.85z"/>
    </g>
    <g>
      <path d="M85.258,35.125c0,0.646-0.523,1.17-1.17,1.17h-4.361c-0.646,0-1.17-0.524-1.17-1.17l0,0c0-0.646,0.523-1.17,1.17-1.17
        h4.361C84.734,33.956,85.258,34.48,85.258,35.125L85.258,35.125z"/>
      <path d="M84.088,36.935h-4.361c-0.998,0-1.809-0.812-1.809-1.809c0-0.997,0.811-1.808,1.809-1.808h4.361
        c0.997,0,1.809,0.811,1.809,1.808C85.896,36.123,85.085,36.935,84.088,36.935z M79.727,34.594c-0.293,0-0.531,0.239-0.531,0.532
        c0,0.293,0.238,0.532,0.531,0.532h4.362c0.293,0,0.531-0.239,0.531-0.532c0-0.293-0.238-0.532-0.531-0.532H79.727z"/>
    </g>
    <path d="M85.346,71.547H35.404c-2.115,0-3.675-0.537-4.769-1.645c-1.849-1.869-1.818-4.724-1.783-8.025
      c0.005-0.455,0.01-0.92,0.01-1.393c0-0.475-0.005-0.938-0.01-1.394c-0.036-3.304-0.066-6.158,1.783-8.027
      c1.094-1.106,2.654-1.644,4.769-1.644h49.942c2.115,0,3.676,0.538,4.771,1.644c1.849,1.869,1.817,4.723,1.782,8.027
      c-0.006,0.454-0.01,0.918-0.01,1.394c0,0.473,0.004,0.938,0.01,1.393c0.035,3.303,0.065,6.156-1.782,8.025
      C89.021,71.01,87.461,71.547,85.346,71.547z M35.404,52.613c-1.218,0-2.037,0.228-2.5,0.697c-0.912,0.922-0.887,3.267-0.86,5.749
      c0.005,0.465,0.01,0.941,0.01,1.426c0,0.483-0.005,0.961-0.01,1.426c-0.027,2.481-0.052,4.826,0.86,5.75
      c0.464,0.469,1.282,0.696,2.5,0.696h49.942c1.219,0,2.037-0.229,2.5-0.696c0.913-0.922,0.887-3.269,0.86-5.75
      c-0.005-0.465-0.011-0.941-0.011-1.426s0.006-0.961,0.011-1.426c0.026-2.482,0.053-4.826-0.86-5.749
      c-0.464-0.469-1.281-0.697-2.5-0.697H35.404z"/>
    <g>
      <path d="M68.876,61.016c0,0.646-0.524,1.172-1.17,1.172h-5.424c-0.646,0-1.171-0.523-1.171-1.172l0,0
        c0-0.646,0.525-1.17,1.171-1.17h5.424C68.354,59.846,68.876,60.371,68.876,61.016L68.876,61.016z"/>
      <path d="M67.706,62.824h-5.424c-0.997,0-1.809-0.811-1.809-1.809c0-0.997,0.812-1.808,1.809-1.808h5.424
        c0.997,0,1.81,0.811,1.81,1.808C69.516,62.014,68.703,62.824,67.706,62.824z M62.282,60.484c-0.294,0-0.532,0.238-0.532,0.531
        c0,0.295,0.238,0.533,0.532,0.533h5.424c0.293,0,0.532-0.238,0.532-0.533c0-0.293-0.239-0.531-0.532-0.531H62.282z"/>
    </g>
    <g>
      <path d="M74.727,62.24c0,0.617-0.5,1.117-1.117,1.117l0,0c-0.615,0-1.115-0.5-1.115-1.117V60.22c0-0.617,0.5-1.117,1.115-1.117
        l0,0c0.617,0,1.117,0.5,1.117,1.117V62.24z"/>
      <path d="M73.609,63.994c-0.967,0-1.754-0.787-1.754-1.754v-2.021c0-0.968,0.787-1.755,1.754-1.755
        c0.968,0,1.756,0.787,1.756,1.755v2.021C75.365,63.209,74.578,63.994,73.609,63.994z M73.609,59.74
        c-0.264,0-0.479,0.215-0.479,0.479v2.021c0,0.264,0.216,0.479,0.479,0.479c0.265,0,0.479-0.215,0.479-0.479v-2.021
        C74.089,59.955,73.874,59.74,73.609,59.74z"/>
    </g>
    <g>
      <path d="M85.258,61.016c0,0.646-0.523,1.172-1.17,1.172h-4.361c-0.646,0-1.17-0.523-1.17-1.172l0,0c0-0.646,0.523-1.17,1.17-1.17
        h4.361C84.734,59.846,85.258,60.371,85.258,61.016L85.258,61.016z"/>
      <path d="M84.088,62.824h-4.361c-0.998,0-1.809-0.811-1.809-1.809c0-0.997,0.811-1.808,1.809-1.808h4.361
        c0.997,0,1.809,0.811,1.809,1.808C85.896,62.014,85.085,62.824,84.088,62.824z M79.727,60.484c-0.293,0-0.531,0.238-0.531,0.531
        c0,0.295,0.238,0.533,0.531,0.533h4.362c0.293,0,0.531-0.238,0.531-0.533c0-0.293-0.238-0.531-0.531-0.531H79.727z"/>
    </g>
    <path d="M85.346,96.971H35.404c-2.115,0-3.675-0.537-4.769-1.645c-1.849-1.867-1.818-4.724-1.783-8.025
      c0.005-0.455,0.01-0.918,0.01-1.393c0-0.476-0.005-0.938-0.01-1.392c-0.036-3.305-0.066-6.16,1.783-8.026
      c1.094-1.105,2.654-1.646,4.769-1.646h49.942c2.115,0,3.676,0.539,4.771,1.646c1.849,1.869,1.817,4.723,1.782,8.026
      c-0.006,0.453-0.01,0.918-0.01,1.392c0,0.473,0.004,0.938,0.01,1.393c0.035,3.303,0.065,6.158-1.782,8.025
      C89.021,96.434,87.461,96.971,85.346,96.971z M35.404,78.037c-1.218,0-2.037,0.229-2.5,0.697c-0.912,0.922-0.887,3.268-0.86,5.747
      c0.005,0.468,0.01,0.943,0.01,1.427s-0.005,0.961-0.01,1.428c-0.027,2.479-0.052,4.824,0.86,5.748
      c0.464,0.469,1.282,0.697,2.5,0.697h49.942c1.219,0,2.037-0.229,2.5-0.697c0.913-0.922,0.887-3.269,0.86-5.748
      c-0.005-0.467-0.011-0.941-0.011-1.428c0-0.484,0.006-0.959,0.011-1.427c0.026-2.479,0.053-4.825-0.86-5.747
      c-0.464-0.47-1.281-0.697-2.5-0.697H35.404z"/>
    <g>
      <path d="M68.876,86.439c0,0.646-0.524,1.17-1.17,1.17h-5.424c-0.646,0-1.171-0.522-1.171-1.17l0,0c0-0.645,0.525-1.17,1.171-1.17
        h5.424C68.354,85.27,68.876,85.795,68.876,86.439L68.876,86.439z"/>
      <path d="M67.706,88.25h-5.424c-0.997,0-1.809-0.813-1.809-1.812s0.812-1.807,1.809-1.807h5.424c0.997,0,1.81,0.812,1.81,1.807
        C69.516,87.438,68.703,88.25,67.706,88.25z M62.282,85.908c-0.294,0-0.532,0.238-0.532,0.531s0.238,0.533,0.532,0.533h5.424
        c0.293,0,0.532-0.24,0.532-0.533s-0.239-0.531-0.532-0.531H62.282z"/>
    </g>
    <g>
      <path d="M74.727,87.664c0,0.615-0.5,1.115-1.117,1.115l0,0c-0.615,0-1.115-0.5-1.115-1.115v-2.021c0-0.617,0.5-1.117,1.115-1.117
        l0,0c0.617,0,1.117,0.5,1.117,1.117V87.664z"/>
      <path d="M73.609,89.42c-0.967,0-1.754-0.787-1.754-1.756v-2.021c0-0.967,0.787-1.754,1.754-1.754c0.968,0,1.756,0.787,1.756,1.754
        v2.021C75.365,88.631,74.578,89.42,73.609,89.42z M73.609,85.164c-0.264,0-0.479,0.215-0.479,0.479v2.021
        c0,0.264,0.216,0.479,0.479,0.479c0.265,0,0.479-0.215,0.479-0.479v-2.021C74.089,85.379,73.874,85.164,73.609,85.164z"/>
    </g>
    <g>
      <path d="M85.258,86.439c0,0.646-0.523,1.17-1.17,1.17h-4.361c-0.646,0-1.17-0.522-1.17-1.17l0,0c0-0.645,0.523-1.17,1.17-1.17
        h4.361C84.734,85.27,85.258,85.795,85.258,86.439L85.258,86.439z"/>
      <path d="M84.088,88.25h-4.361c-0.998,0-1.809-0.813-1.809-1.812s0.811-1.807,1.809-1.807h4.361c0.997,0,1.809,0.812,1.809,1.807
        C85.896,87.438,85.085,88.25,84.088,88.25z M79.727,85.908c-0.293,0-0.531,0.238-0.531,0.531s0.238,0.533,0.531,0.533h4.362
        c0.293,0,0.531-0.24,0.531-0.533s-0.238-0.531-0.531-0.531H79.727z"/>
    </g>
    <g>
      <line fill="none" x1="60.375" y1="44.061" x2="60.375" y2="51.284"/>
      <rect x="58.779" y="44.061" width="3.192" height="7.223"/>
    </g>
    <g>
      <line fill="none" x1="60.375" y1="69.475" x2="60.375" y2="76.441"/>
      <rect x="58.779" y="69.475" width="3.192" height="6.967"/>
    </g>
  </g>
  <g>
    <path class="path" fill="#fff" stroke="#000000" stroke-width="3" stroke-miterlimit="0" d="M60.375,3.5c31.292,0,56.75,25.458,56.75,56.75c0,31.293-25.458,56.75-56.75,56.75S3.625,91.543,3.625,60.25
      C3.625,28.958,29.083,3.5,60.375,3.5 M60.375,0C27.1,0,0.125,26.976,0.125,60.25c0,33.275,26.975,60.25,60.25,60.25
      c33.275,0,60.25-26.975,60.25-60.25S93.65,0,60.375,0L60.375,0z"/>
  </g>
  </svg>


  <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="200.69289" x="102.70579" height="190.90512" width="190.90512" viewBox="0 0 121 122" enable-background="new 0 0 121 122" xml:space="preserve">
  <g>
    <g>
      <path d="M44.159,59.904c-4.657,0-8.446-3.79-8.446-8.446c0-4.658,3.789-8.447,8.446-8.447s8.447,3.79,8.447,8.447
        C52.606,56.114,48.816,59.904,44.159,59.904z M44.159,45.761c-3.141,0-5.696,2.555-5.696,5.696c0,3.141,2.555,5.696,5.696,5.696
        c3.141,0,5.696-2.555,5.696-5.696C49.855,48.316,47.3,45.761,44.159,45.761z"/>
    </g>
    <g>
      <path d="M32.272,51.916c-0.758,0-1.375-0.616-1.375-1.375c0-6.806,5.537-12.344,12.343-12.344c0.759,0,1.375,0.616,1.375,1.375
        c0,0.762-0.617,1.375-1.375,1.375c-5.291,0-9.593,4.304-9.593,9.594C33.648,51.299,33.033,51.916,32.272,51.916z"/>
    </g>
    <g>
      <path  class="path" fill="#fff" stroke="#000000" stroke-width="2.4" stroke-miterlimit="0" d="M44.159,80.111c-2.875,0-5.215-2.43-5.215-5.417v-3.066c-1.884-0.485-3.678-1.23-5.356-2.222l-2.171,2.172
        c-1.047,1.047-2.428,1.624-3.889,1.624c-1.384,0-2.672-0.526-3.627-1.481c-2.033-2.033-1.968-5.405,0.143-7.517l2.17-2.171
        c-0.993-1.679-1.739-3.474-2.224-5.356h-3.064c-2.986,0-5.416-2.338-5.416-5.213s2.43-5.214,5.416-5.214h3.063
        c0.485-1.884,1.229-3.68,2.221-5.36l-2.166-2.166c-2.111-2.111-2.176-5.482-0.144-7.516c0.958-0.956,2.246-1.482,3.628-1.482
        c1.439,0,2.857,0.592,3.889,1.625l2.165,2.165c1.68-0.993,3.477-1.739,5.363-2.224v-3.059c0-2.986,2.34-5.416,5.215-5.416
        s5.214,2.43,5.214,5.416v3.059c1.886,0.485,3.682,1.23,5.361,2.223l2.165-2.164c1.049-1.049,2.43-1.625,3.891-1.625
        c1.383,0,2.671,0.526,3.626,1.481c2.032,2.034,1.966,5.405-0.144,7.517l-2.166,2.166c0.992,1.681,1.736,3.476,2.22,5.36h3.064
        c2.986,0,5.417,2.339,5.417,5.214s-2.43,5.213-5.417,5.213h-3.064c-0.486,1.884-1.23,3.679-2.224,5.357l2.169,2.17
        c2.113,2.111,2.175,5.483,0.144,7.517c-0.957,0.955-2.244,1.481-3.627,1.481c-1.46,0-2.842-0.577-3.891-1.624l-2.171-2.172
        c-1.678,0.992-3.473,1.735-5.355,2.22v3.069C49.374,77.682,47.034,80.111,44.159,80.111z M33.391,66.284
        c0.264,0,0.53,0.075,0.762,0.229c1.966,1.31,4.132,2.207,6.438,2.67c0.642,0.128,1.105,0.693,1.105,1.348v4.163
        c0,1.472,1.105,2.667,2.464,2.667s2.463-1.196,2.463-2.667v-4.165c0-0.655,0.463-1.219,1.105-1.348
        c2.306-0.462,4.471-1.358,6.437-2.668c0.545-0.362,1.271-0.29,1.735,0.172l2.946,2.947c0.994,0.993,2.71,1.062,3.628,0.143
        c0.959-0.96,0.895-2.587-0.144-3.627l-2.945-2.946c-0.464-0.463-0.536-1.19-0.172-1.734c1.311-1.965,2.21-4.131,2.671-6.438
        c0.129-0.643,0.693-1.105,1.349-1.105h4.16c1.472,0,2.666-1.105,2.666-2.463c0-1.357-1.196-2.464-2.666-2.464h-4.159
        c-0.656,0-1.221-0.462-1.35-1.106c-0.459-2.307-1.358-4.473-2.668-6.439c-0.363-0.546-0.292-1.272,0.172-1.735l2.942-2.941
        c1.039-1.04,1.102-2.667,0.143-3.627c-0.918-0.918-2.636-0.85-3.629,0.144l-2.939,2.94c-0.466,0.465-1.192,0.535-1.736,0.173
        c-1.966-1.311-4.132-2.209-6.44-2.672c-0.642-0.129-1.105-0.693-1.105-1.349v-4.155c0-1.47-1.104-2.666-2.463-2.666
        s-2.464,1.196-2.464,2.666v4.155c0,0.654-0.463,1.22-1.105,1.348c-2.309,0.462-4.478,1.361-6.443,2.673
        c-0.546,0.364-1.273,0.291-1.736-0.173l-2.939-2.94c-0.991-0.992-2.71-1.061-3.628-0.142c-0.959,0.96-0.896,2.587,0.143,3.626
        l2.941,2.942c0.463,0.463,0.535,1.188,0.172,1.734c-1.31,1.966-2.206,4.132-2.668,6.44c-0.128,0.643-0.693,1.106-1.348,1.106
        h-4.159c-1.471,0-2.666,1.105-2.666,2.463s1.196,2.464,2.666,2.464h4.162c0.655,0,1.219,0.461,1.348,1.104
        c0.462,2.306,1.361,4.472,2.67,6.438c0.363,0.544,0.292,1.271-0.172,1.734l-2.946,2.946c-1.039,1.04-1.103,2.667-0.143,3.627
        c0.918,0.917,2.635,0.85,3.627-0.144l2.946-2.946C32.685,66.419,33.037,66.284,33.391,66.284z"/>
    </g>
    <g>
      <path d="M83.252,84.289c-3.695,0-6.704-3.008-6.704-6.705c0-3.695,3.007-6.703,6.704-6.703c3.697,0,6.704,3.008,6.704,6.703
        C89.956,81.281,86.947,84.289,83.252,84.289z M83.252,73.633c-2.179,0-3.953,1.772-3.953,3.953c0,2.18,1.774,3.954,3.953,3.954
        s3.953-1.774,3.953-3.954C87.205,75.406,85.431,73.633,83.252,73.633z"/>
    </g>
    <g>
      <path class="path" fill="#fff" stroke="#000000" stroke-width="2.4" stroke-miterlimit="0"  d="M83.252,99.514c-2.353,0-4.268-1.982-4.268-4.419v-2.053c-1.273-0.35-2.492-0.855-3.643-1.51l-1.45,1.451
        c-0.856,0.854-1.98,1.325-3.173,1.325c-1.132,0-2.188-0.432-2.971-1.217c-1.663-1.664-1.616-4.419,0.107-6.141l1.451-1.454
        c-0.654-1.148-1.161-2.368-1.511-3.642h-2.047c-2.438,0-4.42-1.914-4.42-4.267c0-2.353,1.982-4.269,4.42-4.269h2.045
        c0.352-1.273,0.856-2.493,1.511-3.644l-1.449-1.45c-1.722-1.722-1.77-4.476-0.109-6.141c0.785-0.786,1.843-1.218,2.974-1.218
        c1.192,0,2.317,0.471,3.172,1.323l1.445,1.447c1.152-0.655,2.373-1.162,3.647-1.511v-2.045c0-2.436,1.915-4.419,4.268-4.419
        c2.353,0,4.267,1.983,4.267,4.419v2.045c1.275,0.35,2.496,0.856,3.645,1.511l1.448-1.447c0.855-0.853,1.979-1.323,3.171-1.323
        c1.132,0,2.188,0.432,2.972,1.216c1.663,1.665,1.615,4.419-0.108,6.143l-1.447,1.448c0.655,1.15,1.161,2.37,1.51,3.645h2.046
        c2.438,0,4.42,1.915,4.42,4.267c0,2.354-1.983,4.269-4.42,4.269h-2.048c-0.351,1.273-0.856,2.493-1.511,3.642l1.45,1.451
        c1.724,1.725,1.772,4.48,0.108,6.143c-0.783,0.785-1.84,1.217-2.973,1.217c-1.19,0-2.317-0.47-3.17-1.324l-1.453-1.452
        c-1.15,0.654-2.368,1.159-3.641,1.509v2.053C87.519,97.532,85.604,99.514,83.252,99.514z M75.138,88.417
        c0.263,0,0.529,0.076,0.761,0.231c1.445,0.961,3.036,1.621,4.729,1.959c0.643,0.129,1.107,0.693,1.107,1.349v3.139
        c0,0.92,0.679,1.669,1.517,1.669c0.836,0,1.516-0.749,1.516-1.669v-3.139c0-0.656,0.463-1.22,1.105-1.349
        c1.694-0.339,3.284-0.999,4.727-1.959c0.548-0.363,1.271-0.289,1.735,0.172l2.22,2.22c0.622,0.621,1.69,0.67,2.254,0.107
        c0.59-0.592,0.542-1.603-0.108-2.255l-2.22-2.218c-0.465-0.463-0.536-1.19-0.172-1.735c0.961-1.442,1.623-3.034,1.964-4.73
        c0.129-0.643,0.693-1.104,1.348-1.104h3.134c0.921,0,1.67-0.68,1.67-1.518c0-0.836-0.75-1.517-1.67-1.517h-3.134
        c-0.655,0-1.221-0.463-1.348-1.105c-0.339-1.694-0.999-3.285-1.962-4.732c-0.362-0.545-0.29-1.271,0.173-1.734l2.215-2.215
        c0.651-0.652,0.7-1.663,0.108-2.254c-0.564-0.563-1.632-0.514-2.254,0.108l-2.214,2.215c-0.463,0.463-1.189,0.536-1.736,0.172
        c-1.443-0.961-3.034-1.622-4.731-1.962c-0.642-0.128-1.106-0.693-1.106-1.347v-3.133c0-0.92-0.679-1.668-1.515-1.668
        c-0.838,0-1.518,0.748-1.518,1.668v3.131c0,0.655-0.463,1.22-1.105,1.349c-1.696,0.341-3.289,1-4.734,1.962
        c-0.545,0.364-1.271,0.292-1.734-0.172l-2.215-2.215c-0.623-0.62-1.69-0.67-2.254-0.107c-0.592,0.591-0.543,1.603,0.107,2.253
        l2.217,2.217c0.463,0.461,0.535,1.189,0.173,1.734c-0.964,1.446-1.624,3.038-1.962,4.732c-0.127,0.642-0.693,1.105-1.349,1.105
        h-3.133c-0.92,0-1.668,0.68-1.668,1.516c0,0.836,0.749,1.517,1.668,1.517h3.135c0.656,0,1.221,0.462,1.35,1.105
        c0.339,1.692,0.998,3.285,1.962,4.73c0.362,0.545,0.291,1.271-0.172,1.734l-2.22,2.22c-0.649,0.65-0.698,1.663-0.106,2.253
        c0.561,0.563,1.631,0.513,2.253-0.107l2.22-2.22C74.431,88.556,74.783,88.417,75.138,88.417z"/>
    </g>
  </g>
  <g>
    <path class="path" fill="#fff" stroke="#000" stroke-width="3" stroke-miterlimit="2"  d="M60.343,4.414c31.292,0,56.75,25.458,56.75,56.75s-25.458,56.75-56.75,56.75s-56.75-25.458-56.75-56.75
      S29.051,4.414,60.343,4.414 M60.343,0.914c-33.275,0-60.25,26.975-60.25,60.25c0,33.275,26.975,60.25,60.25,60.25
      s60.25-26.975,60.25-60.25C120.593,27.889,93.618,0.914,60.343,0.914L60.343,0.914z"/>
  </g>
</svg>

10
  • Perfecto alvaro ahi estuve probado, una consulta mas: como debería hacer para que por ejemplo los engranajes del ejemplo de la derecha tbn hicieran el mismo efecto que el circulo? Commented el 17 sept. 2018 a las 22:14
  • porque si miras tiene una animación pero redibuja sobre su misma forma yo le intente poner en blanco el stroke pero no me funciono Commented el 17 sept. 2018 a las 22:16
  • @MarianoAndresFranco Puedes ponerle el fondo blanco con la línea negra (ahora mismo tiene el fondo negro con la línea negra). De ese modo se vería algo "parecido" a lo del círculo exterior (tendrías que hacer el stroke más ancho, como de 2.4 o 2.5 en lugar de 1.1).
    – Alvaro Montoro
    Commented el 17 sept. 2018 a las 22:21
  • Bien! voy a probar entonces muchas gracias alvaro Commented el 17 sept. 2018 a las 22:46
  • Sabes que no me salio alvaro Commented el 18 sept. 2018 a las 12:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.