<style> #rec1 { transform: translate(15px,15px) scale(2,4); } #rec3 { transform: translate(100px,100px) scale(2,4); } #clipPath3 { transform: translate(100px,100px); } </style> <svg style="width: 400px; height: 400px; border: 1px solid red"> <defs> <clipPath id="clipPath1"> <rect id="rec1" width="20px" height="10px" /> <rect id="rec2" width="20px" height="10px" /> </clipPath> <clipPath id="clipPath2"> <rect id="rec3" width="20px" height="10px" /> </clipPath> <clipPath id="clipPath3"> <rect id="rec4" x="200px" y="200px" width="40px" height="40px" /> </clipPath> </defs> <circle cx="25px" cy="25px" r="20px" fill="skyblue" clip-path="url(#clipPath1)" /> <circle cx="125px" cy="125px" r="20px" fill="skyblue" clip-path="url(#clipPath2)" /> <circle cx="225px" cy="225px" r="20px" fill="skyblue" clip-path="url(#clipPath3)" /> </svg>