ColourDex

Toad Pond frogs in SVG

by sperske

HTML

<div class='ColourDex'>
  <div class="Frog Fire">
    <svg viewBox="0 0 202.043 146.31" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
      <path d="M122.826 7.558C110.107-4.534 89.367-.887 77.994 11.52 66.621 23.927 30.68 65.942 30.68 65.942S-.276 106.346.136 120.492c.413 14.148 11.66 23.445 23.517 19.632.456 1.503 1.397 5.496 5.52 5.93 4.124.434 65.284-.41 65.284-.41s3.03-8.707-2.3-11.093c-5.33-2.385-20.274 3.65-23.363 4.806-3.09 1.155-10.179-.702-3.579-8.026 6.6-7.325 19.095-26.565 20.654-37.115 1.558-10.55 1.816-15.834-.103-21.114-1.918-5.28-2.066-5.122-9.304-3.118s-22.11 13.07-26.328 17.433c-4.217 4.362-7.253 3.07-5.777-.665s8.689-10.867 14.315-14.928c5.625-4.06 16.3-8.436 18.915-8.997 2.615-.562 7.612-2.585 11.86 2.454 4.248 5.038 2.951 16.693 2.147 25.765-.803 9.072-3.46 18.759-7.106 26.38-3.645 7.62-13.26 15.674-9.457 14.978 3.803-.696 31.73-8.1 34.763-4.703 3.033 3.398 8.264 14.768 10.633 16.82 2.37 2.05 13.37 1.56 16.104.562 2.735-1 2.2-1.429 2.3-3.681.1-2.253-1.48-20.8-.153-25.05.912-2.224 4.57-1.71 4.703.153.134 1.863.778 23.682 1.125 25.817.347 2.135.851 2.32 1.84 3.272.99.95 10.031.51 12.934-.563 2.904-1.073 4.68-1.965 4.346-6.39-.334-4.424-1.67-4.4-3.068-12.883-1.397-8.482-1.65-29.205 2.454-39.67 4.104-10.466 8.449-15.533 14.11-20.092 5.661-4.558 17.216-9.557 19.069-11.502 1.853-1.945 8.522-7.731 4.396-9.253-4.126-1.522-80.947-2.028-97.746.357-16.798 2.386-28.066 11.154-29.395 11.912-1.33.758-5.715 2.755-6.135-1.33-.42-4.084 8.614-10.778 15.337-14.313 6.723-3.536 13.05-6.065 37.933-7.106 24.882-1.042 70.576 3.416 74.28 2.658 3.705-.758-5.47-7.004-5.47-7.004s-3.494-1.408-3.936-7.975C185.013 15.873 173.089.675 161.479.969c-11.611.293-19.069 8.026-19.069 8.026-3.822 3.635-7.399 13.377-19.584-1.437zm-28.369 9.105c2.26-.667 8.262.224 8.282 4.652.022 5.007-2.692 8.179-6.288 8.793-3.596.615-6.977-3.231-7.31-6.237-.334-3.005 3.057-6.54 5.316-7.208zm79.087-.409c2.994-.163 6.413 2.834 6.645 5.777.233 2.943-2.31 6.512-5.316...

CSS

body {
  background: #171d28;
}

h1 {
  font-family: sans-serif;
  text-align: center;
  color: #fff
}

.ColourDex {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}

.Frog {
  flex: 0 0 300px;
}

.Fire > svg {
  fill: #ff4346;
}

.Water > svg {
  fill: #4680ff;
}

.Air > svg {
  fill: #46ccff;
}

.Sand > svg {
  fill: #ffff46;
}

.Wood > svg {
  fill: #ff8046;
}

.Flower > svg {
  fill: #ff8080;
}
.PinkSand > svg {
  fill: #ff80de;
}

.Metal > svg {
  fill: #9faecc
}

.Leaf > svg {
  fill: #46ff80;
}

.Poison > svg {
  fill: #8043f7;
}

.Cloud > svg {
  fill: #ffffff;
}