Scale

by Ayyappan Sakthivadivel

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform -->

<svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- uniform scale -->
  <circle cx="0" cy="0" r="10" fill="red"
          transform="scale(2)" />
 
  <!-- vertical scale -->
  <circle cx="0" cy="0" r="10" fill="yellow"
          transform="scale(1,2)" />
 
  <!-- horizontal scale -->
  <circle cx="0" cy="0" r="10" fill="pink"
          transform="scale(2,1)" />
 
  <!-- No scale -->
  <circle cx="0" cy="0" r="10" fill="black" />
</svg>

CSS

html,body,svg { height:100% }