Как сделать свечение внутри svg элемента?
Нужно чтобы при наведении на объект возникла пульсация свечения глаза. Задача, - свечение Изнутри глаза, выходящеё за его пределы.
Думаю надо попробовать 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>
Ответы (2 шт):
Автор решения: DarkRou
→ Ссылка
.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>
Автор решения: Alexandr_TT
→ Ссылка
Если сделать пульсацию только глазницы, то это будет выглядеть, как-то неестественно.
Поэтому решил сначала добавить зрачок. Для придания объемности использовал радиальные градиенты. Добавил ненавязчивую анимацию движения зрачка внутри глазного яблока.
<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>