| <svg id="inner_circle_focus" xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" transform="scale(0.6)" > |
| <g id="outer_circle_focus_outlines_position" transform="translate(60,60)" > |
| <g id="outer_circle_focus_outlines_rotation" transform="rotate(0)" > |
| <g id="outer_circle_focus_outlines_scale_x" transform="scale(1.42353, 1)" > |
| <g id="outer_circle_focus_outlines_scale_y" transform="scale(1, 1.42353)" > |
| <g id="outer_circle_focus_outlines_pivot" transform="translate(-42.5,-42.5)" > |
| <g id="outer_circle_focus_outlines" opacity="0" > |
| <g id="group_1_transform" transform="translate(42.5,42.5)" > |
| <g id="group_1" > |
| <path id="path_1" d="M 0.0,40.0 c 22.091003418,0.0 40.0,-17.908996582 40.0,-40.0 c 0.0,-22.091003418 -17.908996582,-40.0 -40.0,-40.0 c -22.091003418,0.0 -40.0,17.908996582 -40.0,40.0 c 0.0,22.091003418 17.908996582,40.0 40.0,40.0 Z" stroke="#FFFFFF" stroke-width="1" fill="none" /> |
| </g> |
| </g> |
| </g> |
| </g> |
| </g> |
| </g> |
| </g> |
| </g> |
| <g id="inner_circle_focus_outlines_position" transform="translate(60,60)" > |
| <g id="inner_circle_focus_outlines_rotation" transform="rotate(0)" > |
| <g id="inner_circle_focus_outlines_scale_x" transform="scale(0.37324, 1)" > |
| <g id="inner_circle_focus_outlines_scale_y" transform="scale(1, 0.35973)" > |
| <g id="inner_circle_focus_outlines_pivot" transform="translate(-37,-37)" > |
| <g id="inner_circle_focus_outlines" opacity="0" > |
| <g id="group_1_transform_0" transform="translate(37.5,37.5)" > |
| <g id="group_2" > |
| <path id="path_2" d="M -32.5,-0.5 c 0.0,17.6730041504 14.3269958496,32.0 32.0,32.0 c 17.6730041504,0.0 32.0,-14.3269958496 32.0,-32.0 c 0.0,-17.6730041504 -14.3269958496,-32.0 -32.0,-32.0 c -17.6730041504,0.0 -32.0,14.3269958496 -32.0,32.0 Z" fill="#FFFFFF" /> |
| </g> |
| </g> |
| </g> |
| </g> |
| </g> |
| </g> |
| </g> |
| </g> |
| <style> |
| @keyframes outer_circle_focus_outlines_scale_x_animation { |
| 0% { |
| transform: scale(1.42353, 1); |
| animation-timing-function: cubic-bezier(0.174606606667, 0.0997861131319, 0.593112952494, 0.780748340468); |
| } |
| 60% { |
| transform: scale(0.97887, 1); |
| animation-timing-function: cubic-bezier(0.351379547454, 2.65658848267, 0.698426429671, 1.0); |
| } |
| 100% { |
| transform: scale(1.0, 1); |
| } |
| } |
| #outer_circle_focus_outlines_scale_x { |
| animation: 1.001s forwards outer_circle_focus_outlines_scale_x_animation; |
| } |
| @keyframes outer_circle_focus_outlines_scale_y_animation { |
| 0% { |
| transform: scale(1, 1.42353); |
| animation-timing-function: cubic-bezier(0.174606606667, 0.0997861131319, 0.593112952494, 0.780748340468); |
| } |
| 60% { |
| transform: scale(1, 0.97887); |
| animation-timing-function: cubic-bezier(0.351379547454, 2.65658848267, 0.698426429671, 1.0); |
| } |
| 100% { |
| transform: scale(1, 1.0); |
| } |
| } |
| #outer_circle_focus_outlines_scale_y { |
| animation: 1.001s forwards outer_circle_focus_outlines_scale_y_animation; |
| } |
| @keyframes outer_circle_focus_outlines_animation { |
| 0% { |
| opacity: 0; |
| animation-timing-function: cubic-bezier(0.0, 0.0, 0.66666667, 1.0); |
| } |
| 54.54545454550001% { |
| opacity: 1; |
| animation-timing-function: cubic-bezier(0.0, 0.0, 0.66666667, 1.0); |
| } |
| 100% { |
| opacity: 0; |
| } |
| } |
| #outer_circle_focus_outlines { |
| animation: 3.67s forwards outer_circle_focus_outlines_animation; |
| } |
| @keyframes inner_circle_focus_outlines_scale_x_animation { |
| 0% { |
| transform: scale(0.37324, 1); |
| animation-timing-function: cubic-bezier(0.0, 0.0, 0.66666667, 1.0); |
| } |
| 100% { |
| transform: scale(1.22973, 1); |
| } |
| } |
| #inner_circle_focus_outlines_scale_x { |
| animation: 1.001s forwards inner_circle_focus_outlines_scale_x_animation; |
| } |
| @keyframes inner_circle_focus_outlines_scale_y_animation { |
| 0% { |
| transform: scale(1, 0.35973); |
| animation-timing-function: cubic-bezier(0.0, 0.0, 0.66666667, 1.0); |
| } |
| 100% { |
| transform: scale(1, 1.22973); |
| } |
| } |
| #inner_circle_focus_outlines_scale_y { |
| animation: 1.001s forwards inner_circle_focus_outlines_scale_y_animation; |
| } |
| @keyframes inner_circle_focus_outlines_animation { |
| 0% { |
| opacity: 0; |
| animation-timing-function: cubic-bezier(0.0, 0.0, 0.66666667, 1.0); |
| } |
| 50% { |
| opacity: 0.8; |
| animation-timing-function: cubic-bezier(0.0, 0.0, 0.66666667, 1.0); |
| } |
| 100% { |
| opacity: 0; |
| } |
| } |
| #inner_circle_focus_outlines { |
| animation: 2.002s forwards inner_circle_focus_outlines_animation; |
| } |
| </style> |
| </svg> |
