block11.js

import styled, { keyframes } from "styled-components";

const pulse = keyframes`
0% {
  fill:#10aded;
  stroke-width:10px
}
50% {
  fill:#bada55;
  stroke-width:2px
}
100%{
  fill:#10aded;
  stroke-width:10px
}
`;
const StyledCircle = styled.svg`
  height: 25rem;
  width: 25rem;
  display: block;
  margin: auto;
`;
const StyledInnerCircle = styled.circle`
  animation: ${pulse} infinite 4s linear;
  fill: blue;
`;

const circle = (
  <StyledCircle height="100" width="100">
    <StyledInnerCircle cx="50" cy="50" r="40" stroke="black" stroke-width="3" />
  </StyledCircle>
);

class App extends React.Component {
  render() {
    return <div>{circle}</div>;
  }
}