2

Нужно чтобы при наведении на объект возникла пульсация свечения глаза. Задача, - свечение Изнутри глаза, выходящеё за его пределы.

Думаю надо попробовать filter: blur() на шарике внутри глаза, тк думаю градиент будет не совсем к месту

Примерно как на фотографиях ниже, 1 - начальное состояние, 2 - конечное, и обратно, чтобы вот так пульсировать начало при наведении

.logoPath{
    fill: none;
    stroke-width: 30;
    stroke-linecap: round;
    stroke-miterlimit: 10;
}

.logoColor{
    stroke: #0adaf5;
}
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 2686 3591" style="enable-background:new 0 0 2686 3591;" xml:space="preserve">
<path class="logoPath logoColor" d="M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z"/>
<path class="logoPath logoColor" d="M680.7,2597.5c-72,420,195,594,195,594c-31.5-182.1,147-496,147-496c4,488,400,552,400,552
	c-204-196-116-690-116-690c272,304,248,952,248,952c336-644,74-1153,74-1153c236,188,252,568,252,568
	c248.7-313.5,152.1-630.7,63.4-803.5c-35.7-69.6-91.8-126.6-160.9-163.4c-282.5-150.2-309.6-366.7-309.6-366.7
	c196.9,132.3,616.7,193.8,771.5,212.6c81.6,9.9,164.4-7.9,233.8-51.8c170.8-108.1,186.6-321,186.6-321c-180-150-725.3-409-725.3-409
	S1758.7,481,1204.7,421.5c0,0-19.5-204.9,26-390c-11.5,4.4-274.6,75.2-378.9,341.9c-21.8,55.7-62,109.8-120.3,122.8
	C498.3,548.5,76.4,841.6,53.7,1257.5c0,0,162-134,214-146c0,0-354,617-214,906c0,0,63.9-163,194-240c0,0-230,588-54,932
	c0,0,78-224,166-276c0,0-105,454,247,1038C606.7,3471.5,498.7,3011.5,680.7,2597.5z"/>
<path class="logoPath logoColor" d="M2505,1321c0,0,72.9,259.2,114.3,269.1"/>
<path class="logoPath logoColor" d="M1204.7,213.5c0,0,36-128,158-174c0,0-50,339,47,430"/>
<circle cx="1498" cy="1002" r="80" style="fill: #0adaf5;"/>
</svg>

Начальное состояниеконечное состояние

3
  • @MaximLensky, он нужен был для других целей. Да и вообще, выглядело максимально странно)
    – DarkRou
    4 апр 2020 в 13:44
  • @Alexandr_TT Любой) Но планировал того же цвета что и сам волк, но немного ярче
    – DarkRou
    4 апр 2020 в 15:06
  • @MaximLensky нет, я себе это представляю как шарик внутри глаза, из которого исходит свчение, как бы box-shadow но для свг
    – DarkRou
    4 апр 2020 в 17:49

2 ответа 2

4

Если сделать пульсацию только глазницы, то это будет выглядеть, как-то неестественно.

Поэтому решил сначала добавить зрачок. Для придания объемности использовал радиальные градиенты. Добавил ненавязчивую анимацию движения зрачка внутри глазного яблока.

<animate attributeName="fx" begin="0s" dur="8s" values="35%;65%;35%" repeatcount="indefinite" />
          <animate attributeName="fy" begin="0s" dur="4s" values="35%;65%;35%" repeatcount="indefinite" /> 

.logoPath{
    fill: none;
    stroke-width: 30;
    stroke-linecap: round;
    stroke-miterlimit: 10;
}

.logoColor{
    stroke: #0adaf5;
}
.pupil {
stroke:red;
stroke-width:none;
fill: url(#eyeGrad);
 filter:url(#dropshadow)"
}
<svg version="1.1" id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlinkw"
	 width="100%" height="100%" viewBox="0 0 2686 3591" style="background:#151515;" xml:space="preserve">
	 <defs>  
	      <!-- Градиент для зрачка -->
    <radialGradient id="eyeGrad" 
                    fx="50%" fy="50%" r="100%" >
      <stop offset="0%" stop-color="black"/>
      <stop offset="100%" stop-color="#0ADAF5"/>
           <!-- Анимация движения зрачка	    -->
	   <animate attributeName="fx" begin="0s" dur="8s" values="35%;65%;35%" repeatcount="indefinite" />
		  <animate attributeName="fy" begin="0s" dur="4s" values="35%;65%;35%" repeatcount="indefinite" />
    </radialGradient> 
	  <filter id="dropshadow" height="150%" width="150%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="18"/> 
      <feOffset dx="2" dy="2" result="offsetblur">
      </feoffset>	  
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  </defs>
	    <!-- Обводка глза (глазница)  -->
<path id="eye"  class="logoPath logoColor" d="M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z" style="fill:#d3d3d3"/>
         <!-- Зрачок -->
<circle class="pupil" cx="1490" cy="1004" r="60" />
<path class="logoPath logoColor" d="M680.7,2597.5c-72,420,195,594,195,594c-31.5-182.1,147-496,147-496c4,488,400,552,400,552
	c-204-196-116-690-116-690c272,304,248,952,248,952c336-644,74-1153,74-1153c236,188,252,568,252,568
	c248.7-313.5,152.1-630.7,63.4-803.5c-35.7-69.6-91.8-126.6-160.9-163.4c-282.5-150.2-309.6-366.7-309.6-366.7
	c196.9,132.3,616.7,193.8,771.5,212.6c81.6,9.9,164.4-7.9,233.8-51.8c170.8-108.1,186.6-321,186.6-321c-180-150-725.3-409-725.3-409
	S1758.7,481,1204.7,421.5c0,0-19.5-204.9,26-390c-11.5,4.4-274.6,75.2-378.9,341.9c-21.8,55.7-62,109.8-120.3,122.8
	C498.3,548.5,76.4,841.6,53.7,1257.5c0,0,162-134,214-146c0,0-354,617-214,906c0,0,63.9-163,194-240c0,0-230,588-54,932
	c0,0,78-224,166-276c0,0-105,454,247,1038C606.7,3471.5,498.7,3011.5,680.7,2597.5z"/>
<path id="nose" class="logoPath logoColor" d="M2505,1321c0,0,72.9,259.2,114.3,269.1"/>
<path class="logoPath logoColor" d="M1204.7,213.5c0,0,36-128,158-174c0,0-50,339,47,430"/>

</svg>

Анимация глазного яблока

Сочетание цветов задается градиентом для глазного яблока. При настройке своего приложения всегда есть возможность настроить по своему вкусу

       <!-- Градиент для глазного яблока -->
    <radialGradient id="eyeballGrad" fx="50%" fy="50%" r="100%" 
                    fx="50%" fy="50%" r="100%" >
      <stop offset="10%" stop-color="#FFD877"/>
        <stop offset="90%" stop-color="red"/>     
   </radialGradient>      

Добавил вторую окружность которая будет наполняться градиентом, создавая эффект цветовых вспышек.

<circle class="eyeball" cx="1490" cy="1004" r="60"  >
        <!-- Анимация глазного яблока   -->
  <animate id="an_R" attributeName="r" begin="svg1.click" dur="2s" 
     values="60;100;80;100;60" keyTimes="0;0.15;0.25;0.75;1" repeatCount="3"
     />
 </circle>  

атрибут keyTimes="0;0.15;0.25;0.75;1" служит для настройки неравномерности увеличения радиуса.

Note

Количество параметров в этих атрибутах должно совпадать, иначе не будет работать:
values="60;100;80;100;60" keyTimes="0;0.15;0.25;0.75;1"

Запуск анимации по клику на svg холсте

.logoPath{
    fill: none;
    stroke-width: 30;
    stroke-linecap: round;
    stroke-miterlimit: 10;
}

.logoColor{
    stroke: #0adaf5;
}
.pupil {
stroke:none;
stroke-width:none;
fill: url(#eyeGrad);
 filter:url(#dropshadow)"
} 
.eyeball {
stroke:none;
stroke-width:none;
fill: url(#eyeballGrad);
 filter:url(#dropshadow)"
} 
<svg  id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlinkw"
	 width="100%" height="100%" viewBox="0 0 2686 3591" style="background:#151515;" xml:space="preserve">
	 <defs>   
	        <!-- Градиент для зрачка -->
    <radialGradient id="eyeGrad" 
                    fx="50%" fy="50%" r="80%" >
      <stop offset="0%" stop-color="#111111"/>
      <stop offset="100%" stop-color="#0ADAF5"/>
	    <animate attributeName="fx" begin="0s" dur="8s" values="35%;55%;35%" repeatcount="indefinite" />
		  <animate attributeName="fy" begin="0s" dur="4s" values="35%;55%;35%" repeatcount="indefinite" />
    </radialGradient>  
	       <!-- Градиент для глазного яблока -->
	<radialGradient id="eyeballGrad" fx="50%" fy="50%" r="100%" 
                    fx="50%" fy="50%" r="100%" >
      <stop offset="10%" stop-color="#FFD877"/>
        <stop offset="90%" stop-color="red"/>	  
   </radialGradient>	  
	  
	  <filter id="dropshadow" height="150%" width="150%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="12"/> 
      <feOffset dx="2" dy="2" result="offsetblur">
       </feoffset>	  
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  </defs>
	   <!-- Обводка глза  -->
<path id="eye"  class="logoPath logoColor" d="M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z" style="fill:#d3d3d3"/> 
      <!-- Глазное яблоко -->
<circle class="eyeball" cx="1490" cy="1004" r="60"  >
        <!-- Анимация глазного яблока   -->
  <animate id="an_R" attributeName="r" begin="svg1.click" dur="2s" 
     values="60;100;80;100;60" keyTimes="0;0.15;0.25;0.75;1" repeatCount="3"
     />
 </circle>  
     
 <!-- Зрачок  -->
 <circle class="pupil" cx="1490" cy="1004" r="60" />
<path class="logoPath logoColor" d="M680.7,2597.5c-72,420,195,594,195,594c-31.5-182.1,147-496,147-496c4,488,400,552,400,552
	c-204-196-116-690-116-690c272,304,248,952,248,952c336-644,74-1153,74-1153c236,188,252,568,252,568
	c248.7-313.5,152.1-630.7,63.4-803.5c-35.7-69.6-91.8-126.6-160.9-163.4c-282.5-150.2-309.6-366.7-309.6-366.7
	c196.9,132.3,616.7,193.8,771.5,212.6c81.6,9.9,164.4-7.9,233.8-51.8c170.8-108.1,186.6-321,186.6-321c-180-150-725.3-409-725.3-409
	S1758.7,481,1204.7,421.5c0,0-19.5-204.9,26-390c-11.5,4.4-274.6,75.2-378.9,341.9c-21.8,55.7-62,109.8-120.3,122.8
	C498.3,548.5,76.4,841.6,53.7,1257.5c0,0,162-134,214-146c0,0-354,617-214,906c0,0,63.9-163,194-240c0,0-230,588-54,932
	c0,0,78-224,166-276c0,0-105,454,247,1038C606.7,3471.5,498.7,3011.5,680.7,2597.5z"/>
<path id="nose" class="logoPath logoColor" d="M2505,1321c0,0,72.9,259.2,114.3,269.1"/>
<path class="logoPath logoColor" d="M1204.7,213.5c0,0,36-128,158-174c0,0-50,339,47,430"/>

</svg>

Зацикливание анимации с наличием паузы между циклами

<animate id="an_R" attributeName="r" begin="svg1.click;an_R.end+2s" dur="2s" 
     values="60;100;80;100;60" keyTimes="0;0.15;0.25;0.75;1" repeatCount="3"
     />

Зацикливание осуществляется логической цепочкой begin="svg1.click;an_R.end+2s", где

svg1.click первый запуск анимации по клику

an_R.end+2s повторный запуск после паузы 2 секунды, после окончания первой анимации

.logoPath{
    fill: none;
    stroke-width: 30;
    stroke-linecap: round;
    stroke-miterlimit: 10;
}

.logoColor{
    stroke: #0adaf5;
}
.pupil {
stroke:none;
stroke-width:none;
fill: url(#eyeGrad);
 filter:url(#dropshadow)"
} 
.eyeball {
stroke:none;
stroke-width:none;
fill: url(#eyeballGrad);
 filter:url(#dropshadow)"
} 
<svg  id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlinkw"
	 width="100%" height="100%" viewBox="0 0 2686 3591" style="background:#151515;" xml:space="preserve">
	 <defs>   
	        <!-- Градиент для зрачка -->
    <radialGradient id="eyeGrad" 
                    fx="50%" fy="50%" r="80%" >
      <stop offset="0%" stop-color="#111111"/>
      <stop offset="100%" stop-color="#0ADAF5"/>
	    <animate attributeName="fx" begin="0s" dur="8s" values="35%;55%;35%" repeatcount="indefinite" />
		  <animate attributeName="fy" begin="0s" dur="4s" values="35%;55%;35%" repeatcount="indefinite" />
    </radialGradient>  
	       <!-- Градиент для глазного яблока -->
	<radialGradient id="eyeballGrad" fx="50%" fy="50%" r="100%" 
                    fx="50%" fy="50%" r="100%" >
      <stop offset="10%" stop-color="#FFD877"/>
        <stop offset="90%" stop-color="yellowgreen"/>	  
   </radialGradient>	  
	  
	  <filter id="dropshadow" height="150%" width="150%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="12"/> 
      <feOffset dx="2" dy="2" result="offsetblur">
       </feoffset>	  
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  </defs>
	   <!-- Обводка глза  -->
<path id="eye"  class="logoPath logoColor" d="M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z" style="fill:#d3d3d3"/> 
      <!-- Глазное яблоко -->
<circle class="eyeball" cx="1490" cy="1004" r="60"  >
        <!-- Анимация глазного яблока   -->
  <animate id="an_R" attributeName="r" begin="svg1.click;an_R.end+2s" dur="2s" 
     values="60;100;80;100;60" keyTimes="0;0.15;0.25;0.75;1" repeatCount="3"
     />
 </circle>  
     
 <!-- Зрачок  -->
 <circle class="pupil" cx="1490" cy="1004" r="60" />
<path class="logoPath logoColor" d="M680.7,2597.5c-72,420,195,594,195,594c-31.5-182.1,147-496,147-496c4,488,400,552,400,552
	c-204-196-116-690-116-690c272,304,248,952,248,952c336-644,74-1153,74-1153c236,188,252,568,252,568
	c248.7-313.5,152.1-630.7,63.4-803.5c-35.7-69.6-91.8-126.6-160.9-163.4c-282.5-150.2-309.6-366.7-309.6-366.7
	c196.9,132.3,616.7,193.8,771.5,212.6c81.6,9.9,164.4-7.9,233.8-51.8c170.8-108.1,186.6-321,186.6-321c-180-150-725.3-409-725.3-409
	S1758.7,481,1204.7,421.5c0,0-19.5-204.9,26-390c-11.5,4.4-274.6,75.2-378.9,341.9c-21.8,55.7-62,109.8-120.3,122.8
	C498.3,548.5,76.4,841.6,53.7,1257.5c0,0,162-134,214-146c0,0-354,617-214,906c0,0,63.9-163,194-240c0,0-230,588-54,932
	c0,0,78-224,166-276c0,0-105,454,247,1038C606.7,3471.5,498.7,3011.5,680.7,2597.5z"/>
<path id="nose" class="logoPath logoColor" d="M2505,1321c0,0,72.9,259.2,114.3,269.1"/>
<path class="logoPath logoColor" d="M1204.7,213.5c0,0,36-128,158-174c0,0-50,339,47,430"/>

</svg>

1

.logoPath{
    fill: none;
    stroke-width: 30;
    stroke-linecap: round;
    stroke-miterlimit: 10;
}

.logoColor{
    stroke: #0adaf5;
}

.eye{
    fill: #0adaf5;
}
<?xml-stylesheet type="text/css" href="/css/style.css"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2686 3591" id="svg">
	<defs>
		<filter id="blurCircle" x="-50%" y="-50%" width="200%" height="200%">
			<feGaussianBlur id="blur" in="SourceGraphic" stdDeviation="50"/>
		</filter>
	</defs>
	<path class="logoPath logoColor" d="M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z" style="stroke=35"/>
	<path class="logoPath logoColor" d="M680.7,2597.5c-72,420,195,594,195,594c-31.5-182.1,147-496,147-496c4,488,400,552,400,552
		c-204-196-116-690-116-690c272,304,248,952,248,952c336-644,74-1153,74-1153c236,188,252,568,252,568
		c248.7-313.5,152.1-630.7,63.4-803.5c-35.7-69.6-91.8-126.6-160.9-163.4c-282.5-150.2-309.6-366.7-309.6-366.7
		c196.9,132.3,616.7,193.8,771.5,212.6c81.6,9.9,164.4-7.9,233.8-51.8c170.8-108.1,186.6-321,186.6-321c-180-150-725.3-409-725.3-409
		S1758.7,481,1204.7,421.5c0,0-19.5-204.9,26-390c-11.5,4.4-274.6,75.2-378.9,341.9c-21.8,55.7-62,109.8-120.3,122.8
		C498.3,548.5,76.4,841.6,53.7,1257.5c0,0,162-134,214-146c0,0-354,617-214,906c0,0,63.9-163,194-240c0,0-230,588-54,932
		c0,0,78-224,166-276c0,0-105,454,247,1038C606.7,3471.5,498.7,3011.5,680.7,2597.5z"/>
	<path class="logoPath logoColor" d="M2505,1321c0,0,72.9,259.2,114.3,269.1"/>
	<path class="logoPath logoColor" d="M1204.7,213.5c0,0,36-128,158-174c0,0-50,339,47,430"/>
	<circle cx="1498" cy="990" r="50" class="eye" filter="url(#blurCircle)">
		<animate
				id="blurAnimation"
				attributeName="r"
				values="50; 100; 50"
				dur="3s"
				repeatCount="indefinite"
				fill="remove"
		/>
	</circle>
</svg>

8
  • begin не указал 5 апр 2020 в 8:47
  • @MaximLensky он не нужен, изначально у него opacity: 0 и при ховере, меняется на 1
    – DarkRou
    9 апр 2020 в 5:01
  • а как же он тогда будет запускаться ? 9 апр 2020 в 5:04
  • @MaximLensky он всегда в запущенном состоянии, но скрыт посредством css
    – DarkRou
    9 апр 2020 в 5:05
  • 1
    дело конечно ваше но решение не красивое 9 апр 2020 в 5:08

Ваш ответ

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

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