CODEWITHSUNDEEP
csshtmlanimationsvg
Katia Punter
Katia Punter

Reputation: 308

Can I use svg pattern to create shapes with rotational symmetry?

I am working on producing an animated codewars logo. It looks good enough for my project: https://codepen.io/forTheLoveOfCode/pen/GOERRE

However, the following block of code surely can be re-written without copying and pasting the same line. Yet, neither my research, nor attempts to guess where "transform=rotate" can be put in SVG pattern got me any results. Any ideas how could I have achieved the same result with fewer lines?

<svg class="codewars" width="300" height="300">
    <path d="M150 150 A 75 75 0 1 0 270 200" stroke-width="4" fill="none"/>
    <path d="M150 150 A 75 75 0 1 0 270 200" stroke-width="4" fill="none"transform="rotate(60, 150, 150)"/>
    <path d="M148 150 A 75 75 0 1 0 270 200" stroke-width="4" fill="none"transform="rotate(120, 150, 150)"/>
    <path d="M150 150 A 75 75 0 1 0 270 200" stroke-width="4" fill="none"transform="rotate(180, 150, 150)"/>
    <path d="M150 150 A 75 75 0 1 0 270 200" stroke-width="4" fill="none"transform="rotate(240, 150, 150)"/>
    <path d="M148 150 A 75 75 0 1 0 270 200" stroke-width="4" fill="none"transform="rotate(300, 150, 150)"/>

Upvotes: 1

Views: 242

Answers (1)

Robert Longson
Robert Longson

Reputation: 124219

You've gone down the wrong path, <use> is what you want, not a pattern.

.codewars{
  stroke:red;
  stroke-dasharray: 0.1em;
}
<svg class="codewars" width="320" height="320">
  <defs>
      <path id="curve" d="M150 150 A 75 75 0 1 0 270 200" stroke-width="4" fill="none"/>
  </defs>
  <use href="#curve"/>
  <use href="#curve" transform="rotate(60, 150, 150)"/>
  <use href="#curve" transform="rotate(120, 150, 150)"/>
  <use href="#curve" transform="rotate(180, 150, 150)"/>
  <use href="#curve" transform="rotate(240, 150, 150)"/>
  <use href="#curve" transform="rotate(300, 150, 150)"/>
</svg>

Upvotes: 3

Related Questions