svg circle path

index.html

<div class="container">
  <svg width="500px" height="500px">
    <rect x="0" y="0" width="100" height="100" fill="white"/>
    <circle cx="50" cy="50" r="50"/>
  </svg>
</div>

script.js

$('rect').hover(function() {
  $('rect')
    .attr('width', 400)
    .attr('height', 300)
    .attr('fill', 'yellow');
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

style.postcss

.container {
  margin: 20px;
}

circle, rect {
  stroke: none;
}
circle {
  fill: red;
}

svg-circle-path.markdown

svg circle path

A Pen by Jose on CodePen.

License.