Font Awesome 5 - animated cogs, How to arrange different icons?

I am trying to arrange the font awesome animated cogs in a very particular way (as per image below)

font awesome cogs

I have created a fiddle of the closest I seem to be able to get. The fiddle is here

.slow-ani {
  -webkit-animation: fa-spin 6s infinite linear;
  animation: fa-spin 6s infinite linear;

.fa-small {
  font-size: 84px;

.fa-med {
  font-size: 70px;

.fa-lge {
  font-size: 48px;
<link rel="stylesheet" href="" >
<div class="cogs">
  <i class="fas fa-cog fa-small slow-ani"></i>
  <i class="fas fa-cog fa-med slow-ani"></i>
  <i class="fas fa-cog fa-lge slow-ani"></i>

Is the arrangement I've shown in the image above achievable? If so are there any CSS tricks that can be applied?


You can use the classes provided by Font Awesome to achieve this. Better consider the SVG version to easily manage this.

.slow-ani > * {
<script defer src="" ></script>
<span class="cogs slow-ani">
  <i class="fas fa-cog fa-4x fa-spin" data-fa-transform="down-5  right-5"></i>
  <i class="fas fa-cog fa-3x fa-spin" data-fa-transform="down-17 right-3"></i>
  <i class="fas fa-cog fa-5x fa-spin" data-fa-transform="left-7"></i>