Creative Dissection Puzzles with CSS and SVG

styles.scss

$figures: (
                ('pentagon', $pentagon-transform, '../img/face-1.jpg'),
                ('hexagon', $hexagon-transform, '../img/face-2.jpg'),
                ('octagon', $octagon-transform, '../img/face-3.jpg'),
);

@each $figure in $figures {
  $name: nth($figure, 1);
  $transform: nth($figure, 2);
  $image: nth($figure, 3);

  .clip-#{$name} .clip {
    background-image: url('#{$image}');

    @for $i from 1 through length($transform) {
      &:nth-child(#{$i}) {
        clip-path: url('../##{$name}-#{$i}');
        transform: nth($transform, $i);
      }
    }
  }
}