I'm trying to apply the css change to all 'class="shape"' elements when any of them are in 'mouseover' / 'mouseout' state:
var shapes = document.getElementsByClassName('shape');
for (var i=0; i<shapes.length; i++){
shapes[i].addEventListener('mouseover', mouseOver);
shapes[i].addEventListener('mouseout', mouseOut);
}
function mouseOver(event) {
event.target.style.fill = 'red';
}
function mouseOut(event) {
event.target.style.fill = '#333333';
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="160px" height="43px" viewBox="0 0 224.746 60" enable-background="new 0 0 224.746 60" xml:space="preserve"
onmouseover="this.style['cursor'] = 'pointer'">
<g id="Fimd_out_more">
<g>
<path class="shape" fill="#333333" d="M42.373,19.515h9.488v1.908h-7.188v5.855h6.639v1.882h-6.639v7.972h-2.3V19.515z"/>
<path class="shape" fill="#333333" d="M56.148,20.926c0,0.784-0.549,1.411-1.464,1.411c-0.836,0-1.385-0.627-1.385-1.411
s0.575-1.438,1.438-1.438C55.573,19.488,56.148,20.116,56.148,20.926z M53.587,37.132V24.481h2.3v12.651H53.587z"/>
<path class="shape" fill="#333333" d="M58.919,27.905c0-1.333-0.026-2.378-0.104-3.424h2.039l0.131,2.091h0.052
c0.627-1.176,2.091-2.352,4.182-2.352c1.751,0,4.47,1.045,4.47,5.384v7.528h-2.3v-7.292c0-2.039-0.758-3.738-2.928-3.738
c-1.49,0-2.666,1.072-3.084,2.353c-0.104,0.287-0.157,0.679-0.157,1.071v7.606h-2.3V27.905z"/>
<path class="shape" fill="#333333" d="M83.542,18.574v15.291c0,1.124,0.052,2.405,0.104,3.268h-2.039l-0.104-2.195h-0.079
c-0.68,1.411-2.195,2.482-4.26,2.482c-3.058,0-5.437-2.587-5.437-6.43c-0.026-4.208,2.614-6.77,5.672-6.77
c1.96,0,3.241,0.915,3.816,1.908h0.052v-7.554H83.542z M81.268,29.63c0-0.288-0.026-0.68-0.104-0.967
c-0.34-1.438-1.594-2.64-3.32-2.64c-2.378,0-3.79,2.091-3.79,4.862c0,2.562,1.281,4.679,3.738,4.679
c1.542,0,2.954-1.046,3.372-2.745c0.079-0.313,0.104-0.627,0.104-0.993V29.63z"/>
<path class="shape" fill="#333333" d="M102.806,30.702c0,4.679-3.267,6.717-6.299,6.717c-3.398,0-6.064-2.509-6.064-6.508
c0-4.208,2.797-6.691,6.273-6.691C100.35,24.22,102.806,26.859,102.806,30.702z M92.795,30.833c0,2.77,1.568,4.862,3.816,4.862
c2.195,0,3.842-2.065,3.842-4.914c0-2.144-1.072-4.835-3.79-4.835C93.972,25.945,92.795,28.454,92.795,30.833z"/>
<path class="shape" fill="#333333" d="M115.511,33.655c0,1.333,0.026,2.483,0.104,3.477h-2.039l-0.131-2.064h-0.052
c-0.575,1.019-1.934,2.352-4.182,2.352c-1.986,0-4.365-1.123-4.365-5.541v-7.397h2.3v6.979c0,2.404,0.758,4.052,2.823,4.052
c1.542,0,2.614-1.072,3.032-2.118c0.131-0.313,0.209-0.731,0.209-1.176v-7.737h2.3V33.655z"/>
<path class="shape" fill="#333333" d="M121.314,21.449v3.032h3.293v1.751h-3.293v6.822c0,1.568,0.444,2.458,1.725,2.458
c0.627,0,0.993-0.053,1.333-0.157l0.104,1.751c-0.444,0.157-1.15,0.313-2.039,0.313c-1.072,0-1.934-0.365-2.483-0.967
c-0.627-0.706-0.889-1.83-0.889-3.319v-6.901h-1.96v-1.751h1.96v-2.353L121.314,21.449z"/>
<path class="shape" fill="#333333" d="M131.168,27.905c0-1.333-0.053-2.378-0.104-3.424h2.013l0.104,2.065h0.078
c0.706-1.203,1.882-2.326,3.999-2.326c1.699,0,3.006,1.045,3.555,2.535h0.053c0.392-0.732,0.915-1.254,1.438-1.646
c0.758-0.575,1.568-0.889,2.771-0.889c1.699,0,4.183,1.098,4.183,5.489v7.423h-2.248v-7.136c0-2.457-0.915-3.895-2.745-3.895
c-1.333,0-2.326,0.967-2.744,2.065c-0.104,0.34-0.183,0.732-0.183,1.15v7.815h-2.248v-7.58c0-2.013-0.889-3.45-2.64-3.45
c-1.412,0-2.483,1.15-2.85,2.3c-0.131,0.313-0.183,0.731-0.183,1.124v7.606h-2.248V27.905z"/>
<path class="shape" fill="#333333" d="M163.633,30.702c0,4.679-3.267,6.717-6.299,6.717c-3.398,0-6.064-2.509-6.064-6.508
c0-4.208,2.797-6.691,6.273-6.691C161.176,24.22,163.633,26.859,163.633,30.702z M153.622,30.833c0,2.77,1.568,4.862,3.816,4.862
c2.195,0,3.842-2.065,3.842-4.914c0-2.144-1.071-4.835-3.79-4.835C154.798,25.945,153.622,28.454,153.622,30.833z"/>
<path class="shape" fill="#333333" d="M165.751,28.428c0-1.49-0.026-2.771-0.104-3.947h2.013l0.104,2.509h0.078
c0.575-1.699,1.986-2.771,3.529-2.771c0.234,0,0.418,0.026,0.627,0.052v2.169c-0.235-0.052-0.471-0.052-0.784-0.052
c-1.621,0-2.771,1.202-3.084,2.927c-0.053,0.314-0.079,0.706-0.079,1.072v6.744h-2.3V28.428z"/>
<path class="shape" fill="#333333" d="M174.533,31.225c0.053,3.11,2.013,4.392,4.34,4.392c1.646,0,2.666-0.288,3.502-0.654l0.418,1.647
c-0.81,0.365-2.222,0.81-4.234,0.81c-3.895,0-6.221-2.587-6.221-6.403s2.248-6.796,5.934-6.796c4.156,0,5.228,3.607,5.228,5.933
c0,0.471-0.026,0.811-0.078,1.072H174.533z M181.277,29.578c0.026-1.438-0.602-3.711-3.188-3.711
c-2.353,0-3.346,2.117-3.529,3.711H181.277z"/>
</g>
</g>
<g id="outline">
<path class="outline" fill="none" stroke="#333333" stroke-width="3" d="M222.496,29.95c0,15.832-12.704,28.667-28.377,28.667H30.377
C14.705,58.616,2,45.781,2,29.95l0,0C2,14.117,14.705,1.283,30.377,1.283h163.742C209.792,1.283,222.496,14.117,222.496,29.95
L222.496,29.95z"/>
</g>
</svg>
the current code applies style change to one path at a time (not the desired result)
Ideally, the outline path would change to red on mouseover also.
You can get rid of all of the JavaScript code and just use this CSS:
.shape {
fill: #333;
}
svg:hover .shape {
fill: red;
}
Are you looking for JS solution only? If not, here's a simpler CSS based solution.
svg {
cursor: pointer;
}
svg:hover path.shape {
fill: #f00;
}
svg:hover path.outline {
stroke: #f00;
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="160px" height="43px" viewBox="0 0 224.746 60" enable-background="new 0 0 224.746 60" xml:space="preserve">
<g id="find_out_more">
<path class="shape" fill="#333333" d="M42.373,19.515h9.488v1.908h-7.188v5.855h6.639v1.882h-6.639v7.972h-2.3V19.515z"/>
<path class="shape" fill="#333333" d="M56.148,20.926c0,0.784-0.549,1.411-1.464,1.411c-0.836,0-1.385-0.627-1.385-1.411
s0.575-1.438,1.438-1.438C55.573,19.488,56.148,20.116,56.148,20.926z M53.587,37.132V24.481h2.3v12.651H53.587z"/>
<path class="shape" fill="#333333" d="M58.919,27.905c0-1.333-0.026-2.378-0.104-3.424h2.039l0.131,2.091h0.052
c0.627-1.176,2.091-2.352,4.182-2.352c1.751,0,4.47,1.045,4.47,5.384v7.528h-2.3v-7.292c0-2.039-0.758-3.738-2.928-3.738
c-1.49,0-2.666,1.072-3.084,2.353c-0.104,0.287-0.157,0.679-0.157,1.071v7.606h-2.3V27.905z"/>
<path class="shape" fill="#333333" d="M83.542,18.574v15.291c0,1.124,0.052,2.405,0.104,3.268h-2.039l-0.104-2.195h-0.079
c-0.68,1.411-2.195,2.482-4.26,2.482c-3.058,0-5.437-2.587-5.437-6.43c-0.026-4.208,2.614-6.77,5.672-6.77
c1.96,0,3.241,0.915,3.816,1.908h0.052v-7.554H83.542z M81.268,29.63c0-0.288-0.026-0.68-0.104-0.967
c-0.34-1.438-1.594-2.64-3.32-2.64c-2.378,0-3.79,2.091-3.79,4.862c0,2.562,1.281,4.679,3.738,4.679
c1.542,0,2.954-1.046,3.372-2.745c0.079-0.313,0.104-0.627,0.104-0.993V29.63z"/>
<path class="shape" fill="#333333" d="M102.806,30.702c0,4.679-3.267,6.717-6.299,6.717c-3.398,0-6.064-2.509-6.064-6.508
c0-4.208,2.797-6.691,6.273-6.691C100.35,24.22,102.806,26.859,102.806,30.702z M92.795,30.833c0,2.77,1.568,4.862,3.816,4.862
c2.195,0,3.842-2.065,3.842-4.914c0-2.144-1.072-4.835-3.79-4.835C93.972,25.945,92.795,28.454,92.795,30.833z"/>
<path class="shape" fill="#333333" d="M115.511,33.655c0,1.333,0.026,2.483,0.104,3.477h-2.039l-0.131-2.064h-0.052
c-0.575,1.019-1.934,2.352-4.182,2.352c-1.986,0-4.365-1.123-4.365-5.541v-7.397h2.3v6.979c0,2.404,0.758,4.052,2.823,4.052
c1.542,0,2.614-1.072,3.032-2.118c0.131-0.313,0.209-0.731,0.209-1.176v-7.737h2.3V33.655z"/>
<path class="shape" fill="#333333" d="M121.314,21.449v3.032h3.293v1.751h-3.293v6.822c0,1.568,0.444,2.458,1.725,2.458
c0.627,0,0.993-0.053,1.333-0.157l0.104,1.751c-0.444,0.157-1.15,0.313-2.039,0.313c-1.072,0-1.934-0.365-2.483-0.967
c-0.627-0.706-0.889-1.83-0.889-3.319v-6.901h-1.96v-1.751h1.96v-2.353L121.314,21.449z"/>
<path class="shape" fill="#333333" d="M131.168,27.905c0-1.333-0.053-2.378-0.104-3.424h2.013l0.104,2.065h0.078
c0.706-1.203,1.882-2.326,3.999-2.326c1.699,0,3.006,1.045,3.555,2.535h0.053c0.392-0.732,0.915-1.254,1.438-1.646
c0.758-0.575,1.568-0.889,2.771-0.889c1.699,0,4.183,1.098,4.183,5.489v7.423h-2.248v-7.136c0-2.457-0.915-3.895-2.745-3.895
c-1.333,0-2.326,0.967-2.744,2.065c-0.104,0.34-0.183,0.732-0.183,1.15v7.815h-2.248v-7.58c0-2.013-0.889-3.45-2.64-3.45
c-1.412,0-2.483,1.15-2.85,2.3c-0.131,0.313-0.183,0.731-0.183,1.124v7.606h-2.248V27.905z"/>
<path class="shape" fill="#333333" d="M163.633,30.702c0,4.679-3.267,6.717-6.299,6.717c-3.398,0-6.064-2.509-6.064-6.508
c0-4.208,2.797-6.691,6.273-6.691C161.176,24.22,163.633,26.859,163.633,30.702z M153.622,30.833c0,2.77,1.568,4.862,3.816,4.862
c2.195,0,3.842-2.065,3.842-4.914c0-2.144-1.071-4.835-3.79-4.835C154.798,25.945,153.622,28.454,153.622,30.833z"/>
<path class="shape" fill="#333333" d="M165.751,28.428c0-1.49-0.026-2.771-0.104-3.947h2.013l0.104,2.509h0.078
c0.575-1.699,1.986-2.771,3.529-2.771c0.234,0,0.418,0.026,0.627,0.052v2.169c-0.235-0.052-0.471-0.052-0.784-0.052
c-1.621,0-2.771,1.202-3.084,2.927c-0.053,0.314-0.079,0.706-0.079,1.072v6.744h-2.3V28.428z"/>
<path class="shape" fill="#333333" d="M174.533,31.225c0.053,3.11,2.013,4.392,4.34,4.392c1.646,0,2.666-0.288,3.502-0.654l0.418,1.647
c-0.81,0.365-2.222,0.81-4.234,0.81c-3.895,0-6.221-2.587-6.221-6.403s2.248-6.796,5.934-6.796c4.156,0,5.228,3.607,5.228,5.933
c0,0.471-0.026,0.811-0.078,1.072H174.533z M181.277,29.578c0.026-1.438-0.602-3.711-3.188-3.711
c-2.353,0-3.346,2.117-3.529,3.711H181.277z"/>
</g>
<g id="outline">
<path class="outline" fill="none" stroke="#333333" stroke-width="3" d="M222.496,29.95c0,15.832-12.704,28.667-28.377,28.667H30.377
C14.705,58.616,2,45.781,2,29.95l0,0C2,14.117,14.705,1.283,30.377,1.283h163.742C209.792,1.283,222.496,14.117,222.496,29.95
L222.496,29.95z"/>
</g>
</svg>
I have a question regarding SVG Glow effect. I would like to set glow to group "suteki_201_" similar to the RED effect in this link: https://codepen.io/FelixRilling/pen/qzfoc (I would like his eyes to neon glow - blink animation in different color) i tried using different styles but no success... could you please help?
My code for SVG image is:
<svg version="1.1" id="Marko" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<style type="text/css">
.dane0{fill:#D3D3D3;}
.dane1{fill:#B0B0B0;}
.dane2{fill:#303347;}
.dane3{opacity:0.54;fill:#4A4D67;}
.dane4{opacity:0.54;fill:#5F6380;}
.dane5{opacity:0.37;fill:#010101;}
.dane6{opacity:0.67;fill:#4A4D67;}
.dane7{fill:#010101;}
.dane8{opacity:0.72;}
.dane9{fill:#77CFE2;}
.dane10{fill:#9BD9E2;}
.dane11{fill:#FBF5A9;}
.dane12{fill:#C6C473;}
.dane13{fill:#A3A061;}
.dane14{opacity:0.67;}
.dane15{fill:#242733;}
.dane16{opacity:0.25;fill:#17191F;}
</style>
<g id="suteki_202_">
<path id="suteki_73_" class="dane0" d="M176.5,174.3c-2.7-0.1-3.3,4.8-3.3,4.8c4,9.4,12.2,16.7,12.2,16.7c-3.9-15.1-1.6-17.3-1.6-17.3
S179.2,174.4,176.5,174.3z"/>
<path id="suteki_72_" class="dane1" d="M175.8,179.7c2.4,5.7,6.4,10.7,9.2,13.6c0.2,0.7,0.4,1.5,0.6,2.3c0,0-8.2-7.3-12.2-16.7
c0,0,0.6-4.8,3.3-4.8c0.7,0,1.6,0.3,2.4,0.8C176.4,174.9,175.8,179.7,175.8,179.7z"/>
<g id="suteki_283_">
<path id="suteki_71_" class="dane2" d="M184.3,207.6c0,0-27.3-29.9-16.4-28.8c55.5,7.9,104.7,50.7,104.7,50.7s21.9,18.8,25.8,65.7
c0,0-13.3,38.9-54.7,46.1c0,0-23.2-3.4-37-16.4c0,0,13.9,19.5,44.4,37.1c0,0,15.2,5.9,56.7-30.5l2.3-16.8c0,0,7.4-15.6,36.7-24.6
c0,0,35.4,8.4,66.1-6.2c31.9-15.2,36.7-29.2,23-65.6c-44.6-27.2-121.9-61.5-121.9-61.5c-71.9-16.4-184.5-11.7-184.5-11.7
S129.6,184.2,184.3,207.6z"/>
</g>
<path id="suteki_70_" class="dane3" d="M350.8,226.7c0,0-6.3,11.2-16.2,8.6c-9.9-2.6-30.8-30.7-30.8-30.7s22.2,21.6,31.5,23.7
C344.5,230.6,350.8,226.7,350.8,226.7z"/>
<path id="suteki_69_" class="dane4" d="M340,239.8c0,0-6.9,8.6-22.1-1.7c-11.1-7.5-13.5-22.3-27-43.2c17.3,18.7,20.4,30.1,30.6,37.1
C335.4,241.6,340,239.8,340,239.8z"/>
<path id="suteki_68_" class="dane5" d="M362.1,227.6C349.9,239,326,252.3,326,252.3s2.7,16-0.5,22c-3.3,6-8.5,3.1-8.5,3.1
s-4.9-25.6-32.8-54.7c-86-75.6-118-43.7-118-43.7c55.1,4.4,106.6,50.4,106.6,50.4s21.9,18.8,25.8,65.7c0,0-13.3,38.9-54.7,46.1
c0,0-23.2-3.4-37-16.4c0,0,13.9,19.5,44.4,37.1c0,0,15.2,5.9,56.7-30.5l2.3-16.8c0,0,7.4-15.6,36.7-24.6c0,0,32.8,7,64.1-6.3
c0,0,6.3-2.3,19.2-10.5C411.1,257.1,362.1,227.6,362.1,227.6z"/>
<path id="suteki_67_" class="dane6" d="M165.3,162.3c54.2-4.7,122.7,27.2,122.7,27.2l62.5,11.8c0,0,1.1,10.7,5.7,22.4l74.1,49.6
c14.3-10.9,15.8-26.6,5.7-55c0,0-29.6-20-121.9-61.5c-68.6-16.3-184.5-11.7-184.5-11.7s0,39.1,54.7,62.5
C184.3,207.6,135.6,168.3,165.3,162.3z"/>
<path id="suteki_66_" class="dane7" d="M356.2,223.7l-22.2,0.2l-46-34.4l10.2,1.9c0,0-0.4-1.7,2.6-5c0,0-1.6,3.9-0.1,5.4l5,0.9
c0,0-0.3-5.1,3.3-6.8c0,0-2.8,3.1-0.2,7.4l41.8,7.7L356.2,223.7z"/>
<g id="suteki_201_">
<g id="suteki_276_" class="dane8">
<path id="suteki_65_" class="dane9" d="M330,211.5c5.5,0,10-4.5,10-10c0-0.9-0.2-1.7-0.4-2.6l-17.7-3.2c-1.2,1.7-1.9,3.6-1.9,5.8
C320,207,324.5,211.5,330,211.5z"/>
</g>
<g id="suteki_274_" class="dane8">
<path id="suteki_64_" class="dane9" d="M329,207.9c3.5,0,6.3-2.8,6.3-6.3c0-0.6-0.1-1.1-0.2-1.6l-11.2-2.1c-0.8,1-1.2,2.3-1.2,3.7
C322.6,205.1,325.5,207.9,329,207.9z"/>
</g>
<g id="suteki_272_" class="dane8">
<path id="suteki_63_" class="dane10" d="M334,204.7c2,0,3.6-1.6,3.6-3.6c0-0.3-0.1-0.6-0.1-0.9l-6.4-1.2c-0.4,0.6-0.7,1.3-0.7,2.1
C330.4,203.1,332,204.7,334,204.7z"/>
</g>
</g>
<path id="suteki_62_" class="dane0" d="M190.3,174c-3.9-0.1-4.8,6.9-4.8,6.9c5.8,13.6,17.7,24.2,17.7,24.2
c-5.6-21.8-2.4-25.1-2.4-25.1S194.2,174.1,190.3,174z"/>
<path id="suteki_61_" class="dane1" d="M189.3,181.8c3.5,8.3,9.3,15.4,13.3,19.8c0.2,1.1,0.5,2.1,0.8,3.3c0,0-11.9-10.6-17.7-24.2
c0,0,0.8-7,4.8-6.9c1,0,2.3,0.5,3.5,1.1C190.1,174.9,189.3,181.8,189.3,181.8z"/>
<path id="suteki_60_" class="dane11" d="M434.8,269.4c0,0-53.7-41.9-72.8-50.3c0,0-1.9-16-5.8-24c0,0-11.9-12.2-69.2-10.5
c0,0-82.3-34-131.3-23.3l3.3-2c51.3-8.3,128.8,21.7,128.8,21.7c37.1-2.1,72.2,8.4,72.2,8.4c5.2,8.8,7.2,26.4,7.2,26.4
c25.4,12.8,71,49.8,71,49.8S436.7,267.6,434.8,269.4z"/>
<g id="suteki_266_">
<path id="suteki_59_" class="dane12" d="M364.8,217c0,0-1.2-17-6.4-25.8c0,0-29-11.4-71-8.1c0,0-46.3-16.9-87.3-23l-2.5,1.1
c41,5.9,89.4,23.5,89.4,23.5c57.3-1.8,69.2,10.5,69.2,10.5c3.9,7.9,5.8,24,5.8,24c19.1,8.5,72.8,50.3,72.8,50.3
c2-2.1,3.4-3.8,3.4-3.8S390.2,229.7,364.8,217z"/>
<path id="suteki_58_" class="dane13" d="M157.2,160.5l-1.5,0.9c14.5-2.6,25.6-2.6,41.9-0.2l2.5-1.1
C184.2,157.7,168.1,158,157.2,160.5z"/>
</g>
<g id="suteki_263_" class="dane14">
<path id="suteki_57_" class="dane15" d="M363.9,217.8c0,0-1.2-17-6.4-25.8c0,0-29-11.4-71-8.1c0,0-46.3-16.9-87.3-23l-2.5,1.1
c41,5.9,89.4,23.5,89.4,23.5c57.3-1.8,69.2,10.5,69.2,10.5c3.9,7.9,5.8,24,5.8,24c19.1,8.5,72.8,50.3,72.8,50.3
c1.9-1.4,3.7-3.6,3.7-3.6S389.3,230.5,363.9,217.8z"/>
<path id="suteki_56_" class="dane15" d="M155.7,161.4l-1.4,0.7c15-2.2,26.1-2.5,42.3-0.2l2.5-1.1
C183.3,158.5,166.6,158.9,155.7,161.4z"/>
</g>
<path id="suteki_55_" class="dane16" d="M436.2,218.6c11.6,39.4-17.1,70.5-93,56.6c-43.3,21-56.6,74.4-56.6,74.4l21.7-17.1l1.9-17.8
c0,0,7.4-15.6,36.7-24.6c0,0,33.3,7.7,64.6-5.6C417.2,280.4,460.8,270.4,436.2,218.6z"/>
<path id="suteki_54_" class="dane5" d="M350.6,201c-2.8-0.5-62.6-11.5-62.6-11.5c-37.3-15.4-69.2-25-99.9-27.2
c-55.8-5.4-27.8,23.7-5.3,44.3l1.5,1c0,0-54.7-46.5-7.6-44.2c55-0.5,111.3,29.1,111.3,29.1l58.9,11.7c0,0,2.6,7,3.6,19.4l75.7,52.2
c1.8-1.2,2.7-1.7,4.2-2.7l-74.1-49.6C353.2,211.6,350.6,201,350.6,201z"/>
<path id="suteki_53_" class="dane7" d="M430.9,273.3c0,0-23.3,22.1-72.6,18.3c0,0,51.7-6.3,62.4-24.7L430.9,273.3z"/>
<g id="suteki_252_">
<path id="suteki_51_" class="dane0" d="M270.2,365.1c-2.5,1.2-4.9-3-4.9-3c-0.1-10.2,4.5-20.2,4.5-20.2c2.5,15.4,5.4,16.5,5.4,16.5
S272.7,363.9,270.2,365.1z"/>
<path id="suteki_50_" class="dane0" d="M308.3,339.8c-2.6,3.1-8.6-1-8.6-1c-6.5-13.8-6.5-30.2-6.5-30.2c13,19.3,17.7,19,17.7,19
S310.9,336.7,308.3,339.8z"/>
<path id="suteki_49_" class="dane0" d="M291.4,358.6c-2.9,2.8-8.4-1.9-8.4-1.9c-5-14.4-3.3-30.7-3.3-30.7
c11,20.5,15.6,20.8,15.6,20.8S294.3,355.7,291.4,358.6z"/>
<path id="suteki_48_" class="dane1" d="M301.9,335.5c-3.9-8.2-5.4-17.4-6.1-23.5c-0.8-1.1-1.6-2.2-2.4-3.4c0,0,0,16.4,6.5,30.2
c0,0,6,4.2,8.6,1c0.6-0.7,1-1.7,1.4-2.9C307.1,339.1,301.9,335.5,301.9,335.5z"/>
<path id="suteki_47_" class="dane1" d="M267.4,360.5c-0.1-6.2,1.6-12.3,3-16.2c-0.1-0.7-0.3-1.5-0.4-2.3c0,0-4.6,10-4.5,20.2
c0,0,2.5,4.2,4.9,3c0.7-0.3,1.3-0.9,1.9-1.7C269.9,364.6,267.4,360.5,267.4,360.5z"/>
<path id="suteki_46_" class="dane1" d="M284.9,353.3c-3.1-8.8-3.6-18.3-3.6-24.3c-0.5-1-1.1-2-1.7-3.1c0,0-1.7,16.3,3.3,30.7
c0,0,5.5,4.8,8.4,1.9c0.8-0.8,1.4-2,1.9-3.3C290.4,358,284.9,353.3,284.9,353.3z"/>
</g>
</g>
</svg>
Thank you for your time!!!
Here is my solution, Its not perfect, but you can play with the colors,opacity and timings.
To get the blur efects, I added Gaussian blur to svg
More info on Gauusian Blur effect here here
<defs>
<filter id="f1">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
Then, to apply the blur to any path / g add filter="url(#f1)".
Notice the id: ( f1 )
I had to apply the filter to suteki_65_ to make the outer circle glow and also had to duplicate the circle in order to retain the shape of the eye, as the filter effect blurs the shape.
And finally I applied CSS animation, to suteki_65_ in order to make it blink
by changing the opacity.
#keyframes blink {
0% {
opacity: 1;
fill:red;
}
25% {
opacity: 0.5;
fill:pink;
}
50% {
opacity: 1;
fill:orange;
}
75% {
opacity: 0.5;
fill:blue;
}
100% {
opacity:1;
fill:yellow;
}
}
#suteki_65_ {
animation: blink 1500ms infinite;
}
#suteki_65a_ {
opacity: 0.3;
}
<svg version="1.1" id="Marko" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<defs>
<filter id="f1">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<style type="text/css">
.dane0{fill:#D3D3D3;}
.dane1{fill:#B0B0B0;}
.dane2{fill:#303347;}
.dane3{opacity:0.54;fill:#4A4D67;}
.dane4{opacity:0.54;fill:#5F6380;}
.dane5{opacity:0.37;fill:#010101;}
.dane6{opacity:0.67;fill:#4A4D67;}
.dane7{fill:#010101;}
.dane8{opacity:0.72;}
.dane9{fill:#77CFE2;}
.dane10{fill:#9BD9E2;}
.dane11{fill:#FBF5A9;}
.dane12{fill:#C6C473;}
.dane13{fill:#A3A061;}
.dane14{opacity:0.67;}
.dane15{fill:#242733;}
.dane16{opacity:0.25;fill:#17191F;}
</style>
<g id="suteki_202_">
<path id="suteki_73_" class="dane0" d="M176.5,174.3c-2.7-0.1-3.3,4.8-3.3,4.8c4,9.4,12.2,16.7,12.2,16.7c-3.9-15.1-1.6-17.3-1.6-17.3
S179.2,174.4,176.5,174.3z"/>
<path id="suteki_72_" class="dane1" d="M175.8,179.7c2.4,5.7,6.4,10.7,9.2,13.6c0.2,0.7,0.4,1.5,0.6,2.3c0,0-8.2-7.3-12.2-16.7
c0,0,0.6-4.8,3.3-4.8c0.7,0,1.6,0.3,2.4,0.8C176.4,174.9,175.8,179.7,175.8,179.7z"/>
<g id="suteki_283_">
<path id="suteki_71_" class="dane2" d="M184.3,207.6c0,0-27.3-29.9-16.4-28.8c55.5,7.9,104.7,50.7,104.7,50.7s21.9,18.8,25.8,65.7
c0,0-13.3,38.9-54.7,46.1c0,0-23.2-3.4-37-16.4c0,0,13.9,19.5,44.4,37.1c0,0,15.2,5.9,56.7-30.5l2.3-16.8c0,0,7.4-15.6,36.7-24.6
c0,0,35.4,8.4,66.1-6.2c31.9-15.2,36.7-29.2,23-65.6c-44.6-27.2-121.9-61.5-121.9-61.5c-71.9-16.4-184.5-11.7-184.5-11.7
S129.6,184.2,184.3,207.6z"/>
</g>
<path id="suteki_70_" class="dane3" d="M350.8,226.7c0,0-6.3,11.2-16.2,8.6c-9.9-2.6-30.8-30.7-30.8-30.7s22.2,21.6,31.5,23.7
C344.5,230.6,350.8,226.7,350.8,226.7z"/>
<path id="suteki_69_" class="dane4" d="M340,239.8c0,0-6.9,8.6-22.1-1.7c-11.1-7.5-13.5-22.3-27-43.2c17.3,18.7,20.4,30.1,30.6,37.1
C335.4,241.6,340,239.8,340,239.8z"/>
<path id="suteki_68_" class="dane5" d="M362.1,227.6C349.9,239,326,252.3,326,252.3s2.7,16-0.5,22c-3.3,6-8.5,3.1-8.5,3.1
s-4.9-25.6-32.8-54.7c-86-75.6-118-43.7-118-43.7c55.1,4.4,106.6,50.4,106.6,50.4s21.9,18.8,25.8,65.7c0,0-13.3,38.9-54.7,46.1
c0,0-23.2-3.4-37-16.4c0,0,13.9,19.5,44.4,37.1c0,0,15.2,5.9,56.7-30.5l2.3-16.8c0,0,7.4-15.6,36.7-24.6c0,0,32.8,7,64.1-6.3
c0,0,6.3-2.3,19.2-10.5C411.1,257.1,362.1,227.6,362.1,227.6z"/>
<path id="suteki_67_" class="dane6" d="M165.3,162.3c54.2-4.7,122.7,27.2,122.7,27.2l62.5,11.8c0,0,1.1,10.7,5.7,22.4l74.1,49.6
c14.3-10.9,15.8-26.6,5.7-55c0,0-29.6-20-121.9-61.5c-68.6-16.3-184.5-11.7-184.5-11.7s0,39.1,54.7,62.5
C184.3,207.6,135.6,168.3,165.3,162.3z"/>
<path id="suteki_66_" class="dane7" d="M356.2,223.7l-22.2,0.2l-46-34.4l10.2,1.9c0,0-0.4-1.7,2.6-5c0,0-1.6,3.9-0.1,5.4l5,0.9
c0,0-0.3-5.1,3.3-6.8c0,0-2.8,3.1-0.2,7.4l41.8,7.7L356.2,223.7z"/>
<g id="suteki_201_" >
<g id="suteki_276_" class="dane8">
<path id="suteki_65a_" class="dane9" d="M330,211.5c5.5,0,10-4.5,10-10c0-0.9-0.2-1.7-0.4-2.6l-17.7-3.2c-1.2,1.7-1.9,3.6-1.9,5.8
C320,207,324.5,211.5,330,211.5z"/>
<path id="suteki_65_" filter="url(#f1)" class="dane9" d="M330,211.5c5.5,0,10-4.5,10-10c0-0.9-0.2-1.7-0.4-2.6l-17.7-3.2c-1.2,1.7-1.9,3.6-1.9,5.8
C320,207,324.5,211.5,330,211.5z"/>
</g>
<g id="suteki_274_" class="dane8">
<path id="suteki_64_" class="dane9" d="M329,207.9c3.5,0,6.3-2.8,6.3-6.3c0-0.6-0.1-1.1-0.2-1.6l-11.2-2.1c-0.8,1-1.2,2.3-1.2,3.7
C322.6,205.1,325.5,207.9,329,207.9z"/>
</g>
<g id="suteki_272_" class="dane8">
<path id="suteki_63_" class="dane10" d="M334,204.7c2,0,3.6-1.6,3.6-3.6c0-0.3-0.1-0.6-0.1-0.9l-6.4-1.2c-0.4,0.6-0.7,1.3-0.7,2.1
C330.4,203.1,332,204.7,334,204.7z"/>
</g>
</g>
<path id="suteki_62_" class="dane0" d="M190.3,174c-3.9-0.1-4.8,6.9-4.8,6.9c5.8,13.6,17.7,24.2,17.7,24.2
c-5.6-21.8-2.4-25.1-2.4-25.1S194.2,174.1,190.3,174z"/>
<path id="suteki_61_" class="dane1" d="M189.3,181.8c3.5,8.3,9.3,15.4,13.3,19.8c0.2,1.1,0.5,2.1,0.8,3.3c0,0-11.9-10.6-17.7-24.2
c0,0,0.8-7,4.8-6.9c1,0,2.3,0.5,3.5,1.1C190.1,174.9,189.3,181.8,189.3,181.8z"/>
<path id="suteki_60_" class="dane11" d="M434.8,269.4c0,0-53.7-41.9-72.8-50.3c0,0-1.9-16-5.8-24c0,0-11.9-12.2-69.2-10.5
c0,0-82.3-34-131.3-23.3l3.3-2c51.3-8.3,128.8,21.7,128.8,21.7c37.1-2.1,72.2,8.4,72.2,8.4c5.2,8.8,7.2,26.4,7.2,26.4
c25.4,12.8,71,49.8,71,49.8S436.7,267.6,434.8,269.4z"/>
<g id="suteki_266_">
<path id="suteki_59_" class="dane12" d="M364.8,217c0,0-1.2-17-6.4-25.8c0,0-29-11.4-71-8.1c0,0-46.3-16.9-87.3-23l-2.5,1.1
c41,5.9,89.4,23.5,89.4,23.5c57.3-1.8,69.2,10.5,69.2,10.5c3.9,7.9,5.8,24,5.8,24c19.1,8.5,72.8,50.3,72.8,50.3
c2-2.1,3.4-3.8,3.4-3.8S390.2,229.7,364.8,217z"/>
<path id="suteki_58_" class="dane13" d="M157.2,160.5l-1.5,0.9c14.5-2.6,25.6-2.6,41.9-0.2l2.5-1.1
C184.2,157.7,168.1,158,157.2,160.5z"/>
</g>
<g id="suteki_263_" class="dane14">
<path id="suteki_57_" class="dane15" d="M363.9,217.8c0,0-1.2-17-6.4-25.8c0,0-29-11.4-71-8.1c0,0-46.3-16.9-87.3-23l-2.5,1.1
c41,5.9,89.4,23.5,89.4,23.5c57.3-1.8,69.2,10.5,69.2,10.5c3.9,7.9,5.8,24,5.8,24c19.1,8.5,72.8,50.3,72.8,50.3
c1.9-1.4,3.7-3.6,3.7-3.6S389.3,230.5,363.9,217.8z"/>
<path id="suteki_56_" class="dane15" d="M155.7,161.4l-1.4,0.7c15-2.2,26.1-2.5,42.3-0.2l2.5-1.1
C183.3,158.5,166.6,158.9,155.7,161.4z"/>
</g>
<path id="suteki_55_" class="dane16" d="M436.2,218.6c11.6,39.4-17.1,70.5-93,56.6c-43.3,21-56.6,74.4-56.6,74.4l21.7-17.1l1.9-17.8
c0,0,7.4-15.6,36.7-24.6c0,0,33.3,7.7,64.6-5.6C417.2,280.4,460.8,270.4,436.2,218.6z"/>
<path id="suteki_54_" class="dane5" d="M350.6,201c-2.8-0.5-62.6-11.5-62.6-11.5c-37.3-15.4-69.2-25-99.9-27.2
c-55.8-5.4-27.8,23.7-5.3,44.3l1.5,1c0,0-54.7-46.5-7.6-44.2c55-0.5,111.3,29.1,111.3,29.1l58.9,11.7c0,0,2.6,7,3.6,19.4l75.7,52.2
c1.8-1.2,2.7-1.7,4.2-2.7l-74.1-49.6C353.2,211.6,350.6,201,350.6,201z"/>
<path id="suteki_53_" class="dane7" d="M430.9,273.3c0,0-23.3,22.1-72.6,18.3c0,0,51.7-6.3,62.4-24.7L430.9,273.3z"/>
<g id="suteki_252_">
<path id="suteki_51_" class="dane0" d="M270.2,365.1c-2.5,1.2-4.9-3-4.9-3c-0.1-10.2,4.5-20.2,4.5-20.2c2.5,15.4,5.4,16.5,5.4,16.5
S272.7,363.9,270.2,365.1z"/>
<path id="suteki_50_" class="dane0" d="M308.3,339.8c-2.6,3.1-8.6-1-8.6-1c-6.5-13.8-6.5-30.2-6.5-30.2c13,19.3,17.7,19,17.7,19
S310.9,336.7,308.3,339.8z"/>
<path id="suteki_49_" class="dane0" d="M291.4,358.6c-2.9,2.8-8.4-1.9-8.4-1.9c-5-14.4-3.3-30.7-3.3-30.7
c11,20.5,15.6,20.8,15.6,20.8S294.3,355.7,291.4,358.6z"/>
<path id="suteki_48_" class="dane1" d="M301.9,335.5c-3.9-8.2-5.4-17.4-6.1-23.5c-0.8-1.1-1.6-2.2-2.4-3.4c0,0,0,16.4,6.5,30.2
c0,0,6,4.2,8.6,1c0.6-0.7,1-1.7,1.4-2.9C307.1,339.1,301.9,335.5,301.9,335.5z"/>
<path id="suteki_47_" class="dane1" d="M267.4,360.5c-0.1-6.2,1.6-12.3,3-16.2c-0.1-0.7-0.3-1.5-0.4-2.3c0,0-4.6,10-4.5,20.2
c0,0,2.5,4.2,4.9,3c0.7-0.3,1.3-0.9,1.9-1.7C269.9,364.6,267.4,360.5,267.4,360.5z"/>
<path id="suteki_46_" class="dane1" d="M284.9,353.3c-3.1-8.8-3.6-18.3-3.6-24.3c-0.5-1-1.1-2-1.7-3.1c0,0-1.7,16.3,3.3,30.7
c0,0,5.5,4.8,8.4,1.9c0.8-0.8,1.4-2,1.9-3.3C290.4,358,284.9,353.3,284.9,353.3z"/>
</g>
</g>
</svg>
How to make this animated green bar visible only on circle?
<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="38px" height="38px" viewBox="0 0 38 38" xml:space="preserve">
<rect id="bar" y="10.962" fill="#02FF74" width="38" height="14.667">
Link to CodePen
With a clipPath you can create a mask.
you have a to create a <circle> inside a <defs> tag( it doesn't render element inside it and make it accessible )
you have to create a clipPath thate takes sizes and position from the circle using <use xlink:href="#circleID"...
you should add the attribute clipPath="url(#clipPathID)" to any element or group of element you want to mask.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 38 38" enable-background="new 0 0 37.833 37.833" xml:space="preserve">
<g>
<defs>
<circle id="SVGID_1_" cx="19" cy="19" r="19"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<rect id="bar" y="10.962" clip-path="url(#SVGID_2_)" fill="#02FF74" width="38" height="14.667">
<animate fill="freeze" from="40" to="-15" restart="always" dur="2s" attributeName="y" calcMode="linear" additive="replace" accumulate="none" repeatCount="indefinite">
</animate>
</rect>
<g clip-path="url(#SVGID_2_)">
<path d="M19,4.191c8.166,0,14.809,6.643,14.809,14.809S27.166,33.809,19,33.809S4.191,27.165,4.191,19S10.834,4.191,19,4.191
M19,0C8.508,0,0,8.507,0,19s8.508,19,19,19c10.493,0,19-8.507,19-19S29.493,0,19,0L19,0z"/>
<g>
<path d="M19,13.691c2.928,0,5.309,2.381,5.309,5.309S21.928,24.309,19,24.309S13.691,21.927,13.691,19S16.072,13.691,19,13.691
M19,9.5c-5.246,0-9.5,4.253-9.5,9.5s4.254,9.5,9.5,9.5s9.5-4.253,9.5-9.5S24.246,9.5,19,9.5L19,9.5z"/
</g>
</g>
</g>
</svg>
Just edited to show the animated element just inside the black fill of your circles. The process is the same of the previous example, but now The shape of the mask path has been created copying the d=".." attribute value from both black circles:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200" height="200" viewBox="0 0 38 38" enable-background="new 0 0 37.833 37.833" xml:space="preserve">
<g>
<g>
<path d="M19,4.191c8.167,0,14.809,6.643,14.809,14.809c0,8.167-6.643,14.809-14.809,14.809c-8.166,0-14.809-6.645-14.809-14.809
C4.191,10.835,10.834,4.191,19,4.191 M19,0C8.508,0,0,8.507,0,19c0,10.493,8.508,19,19,19c10.493,0,19-8.508,19-19
C38,8.507,29.493,0,19,0L19,0z"/>
<g>
<path d="M19,13.691c2.928,0,5.309,2.381,5.309,5.309c0,2.928-2.381,5.309-5.309,5.309S13.691,21.926,13.691,19
C13.691,16.073,16.072,13.691,19,13.691 M19,9.5c-5.246,0-9.5,4.253-9.5,9.5c0,5.247,4.254,9.5,9.5,9.5
c5.247,0,9.5-4.254,9.5-9.5C28.5,13.753,24.247,9.5,19,9.5L19,9.5z"/>
</g>
</g>
<g>
<defs>
<path id="SVGID_1_" d="M19,4.191c8.167,0,14.809,6.643,14.809,14.809c0,8.167-6.643,14.809-14.809,14.809
c-8.166,0-14.809-6.645-14.809-14.809C4.191,10.835,10.834,4.191,19,4.191 M19,0C8.508,0,0,8.507,0,19c0,10.493,8.508,19,19,19
c10.493,0,19-8.508,19-19C38,8.507,29.493,0,19,0L19,0z M19,13.691c2.928,0,5.309,2.381,5.309,5.309
c0,2.928-2.381,5.309-5.309,5.309S13.691,21.926,13.691,19C13.691,16.073,16.072,13.691,19,13.691 M19,9.5
c-5.246,0-9.5,4.253-9.5,9.5c0,5.247,4.254,9.5,9.5,9.5c5.247,0,9.5-4.254,9.5-9.5C28.5,13.753,24.247,9.5,19,9.5L19,9.5z"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<rect id="bar" y="10.962" clip-path="url(#SVGID_2_)" fill="#02FF74" width="38" height="14.667">
<animate fill="freeze" repeatCount="indefinite" accumulate="none" additive="replace" calcMode="linear" attributeName="y" dur="2s" restart="always" to="-15" from="40">
</animate>
</rect>
</g>
</g>
</svg>