<script src="https://cdn.jsdelivr.net/npm/walkway.js/src/walkway.min.js
"></script>

<div>
  <svg id="svg-castle" width="480" height="480" viewBox="0 0 480 480" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M231.111 183.761V150.371C231.111 149.553 231.774 148.889 232.592 148.889H247.407C248.225 148.889 248.889 149.552 248.889 150.371V183.761L258.342 206.667H271.111V135.556H240H208.889V206.667H221.658L231.111 183.761Z" stroke="#B2441D" stroke-width="2px" class="color-6"/>
<path d="M311.111 420H288.889V455.556V468.889H311.111V455.556V420Z" stroke="#B2441D" stroke-width="2px" class="color-1"/>
<path d="M191.111 420H168.889V455.556V468.889H191.111V455.556V420Z" stroke="#B2441D" stroke-width="2px" class="color-1"/>
<path d="M168.889 220V228.889V237.778H222.222V228.889H212.487L221.658 206.667H208.889H169.524L177.778 220H168.889Z" stroke="#B2441D" stroke-width="2px" class="color-1"/>
<path d="M267.513 228.889H257.778V237.778H311.111V228.889V220H302.222L310.476 206.667H271.111H258.342L267.513 228.889Z" stroke="#B2441D" stroke-width="2px" class="color-1"/>
<path d="M220.741 246.667H205.926C205.108 246.667 204.445 247.33 204.445 248.149V286.667H222.223V248.149C222.222 247.33 221.559 246.667 220.741 246.667Z" stroke="#B2441D" stroke-width="2px" class="color-1"/>
<path d="M248.889 183.761V150.371C248.889 149.553 248.226 148.889 247.407 148.889H232.592C231.774 148.889 231.111 149.552 231.111 150.371V183.761L240 162.222L248.889 183.761Z" stroke="#B2441D" stroke-width="2px" class="color-1"/>
<path d="M195.556 248.148C195.556 247.33 194.893 246.666 194.075 246.666H179.26C178.442 246.666 177.778 247.329 177.778 248.148V286.666H195.556V248.148Z" stroke="#B2441D" stroke-width="2px" class="color-1"/>
<path d="M300.741 246.667H285.926C285.108 246.667 284.445 247.33 284.445 248.149V286.667H302.223V248.149C302.222 247.33 301.559 246.667 300.741 246.667Z" stroke="#B2441D" stroke-width="2px" class="color-1"/>
<path d="M275.556 286.667V248.149C275.556 247.331 274.893 246.667 274.075 246.667H259.26C258.442 246.667 257.778 247.33 257.778 248.149V286.667H275.556Z" stroke="#B2441D" stroke-width="2px" class="color-1"/>
<path d="M408.889 411.111H391.111V228.889H408.889V220H360H328.889V228.889V411.111H311.111V237.778H257.778V248.148C257.778 247.33 258.441 246.666 259.26 246.666H274.075C274.893 246.666 275.556 247.329 275.556 248.148V286.666H257.778V288.717L297.778 353.332H288.889V362.221V420H311.111H337.778H408.889V455.556H471.111V322.222H408.889V411.111ZM302.222 286.667H284.444V248.149C284.444 247.331 285.107 246.667 285.925 246.667H300.74C301.558 246.667 302.221 247.33 302.221 248.149V286.667H302.222ZM337.778 411.111V237.778V228.889H382.223V411.111H337.778ZM431.111 354.815C431.111 353.997 431.774 353.333 432.592 353.333H447.407C448.225 353.333 448.889 353.996 448.889 354.815V393.333H431.111V354.815ZM431.111 428.889H448.889V446.667H431.111V428.889Z" stroke="#B2441D" stroke-width="2px" class="color-6"/>
<path d="M422.222 228.889L408.889 250.427V322.222H471.111H480L422.222 228.889Z" stroke="#B2441D" stroke-width="2px" class="color-2"/>
<path d="M204.444 362.222H191.111V420V455.556H204.444V362.222Z" stroke="#B2441D" stroke-width="2px" class="color-3"/>
<path d="M275.556 455.556H288.889V420V362.222H275.556V455.556Z"  stroke="#B2441D" stroke-width="2px"class="color-3"/>
<path d="M240 260V237.778H222.222V248.148V286.667V288.718L240 260Z" stroke="#B2441D" stroke-width="2px" class="color-3"/>
<path d="M240 260L257.778 288.718V286.667V248.148V237.778H240V260Z" stroke="#B2441D" stroke-width="2px" class="color-4"/>
<path d="M240 353.333V322.222V260L222.222 288.718L182.222 353.333H191.111H204.444H240Z" stroke="#B2441D" stroke-width="2px" class="color-5"/>
<path d="M240 162.222L231.111 183.761L221.658 206.667L212.487 228.889H222.222H240V162.222Z" stroke="#B2441D" stroke-width="2px" class="color-5"/>
<path d="M267.513 228.889L258.342 206.667L248.889 183.761L240 162.222L267.513 228.889Z" stroke="#B2441D" stroke-width="2px" class="color-5"/>
<path d="M240 11.111L201.482 135.556H208.889H240V11.111Z" stroke="#B2441D" stroke-width="2px" class="color-5"/>
<path d="M311.111 237.778V411.111H328.889V228.889H311.111V237.778Z" stroke="#B2441D" stroke-width="2px" class="color-3"/>
<path d="M382.222 228.889H337.777V237.778V411.111H382.222V228.889ZM351.111 248.148C351.111 247.33 351.774 246.666 352.592 246.666H367.407C368.225 246.666 368.889 247.329 368.889 248.148V286.666H351.111V248.148ZM368.889 393.333H351.111V354.815C351.111 353.997 351.774 353.333 352.592 353.333H367.407C368.225 353.333 368.889 353.996 368.889 354.815V393.333ZM351.111 340V301.481C351.111 300.663 351.774 300 352.592 300H367.407C368.225 300 368.889 300.663 368.889 301.481V340H351.111Z" stroke="#B2441D" stroke-width="2px" class="color-3"/>
<path d="M311.111 220H328.889H360V126.667L310.476 206.667L302.222 220H311.111Z" stroke="#B2441D" stroke-width="2px"  class="color-5"/>
<path d="M367.407 353.333H352.592C351.774 353.333 351.111 353.996 351.111 354.815V393.333H368.889V354.815C368.889 353.997 368.226 353.333 367.407 353.333Z" stroke="#B2441D" stroke-width="2px" class="color-1"/>
<path d="M448.889 354.815C448.889 353.997 448.226 353.333 447.407 353.333H432.592C431.774 353.333 431.111 353.996 431.111 354.815V393.333H448.889V354.815Z" stroke="#B2441D" stroke-width="2px" class="color-1"/>
<path d="M368.889 301.481C368.889 300.663 368.226 300 367.407 300H352.592C351.774 300 351.111 300.663 351.111 301.481V340H368.889V301.481Z" stroke="#B2441D" stroke-width="2px" class="color-1"/>
<path d="M368.889 248.148C368.889 247.33 368.226 246.666 367.407 246.666H352.592C351.774 246.666 351.111 247.329 351.111 248.148V286.666H368.889V248.148Z" stroke="#B2441D" stroke-width="2px" class="color-1"/>
<path d="M408.889 455.556V420H337.778H311.111V455.556H408.889ZM351.111 428.889H368.889V446.667H351.111V428.889Z" stroke="#B2441D" stroke-width="2px" class="color-4"/>
<path d="M391.111 411.111H408.889V322.222V250.427V228.889H391.111V411.111Z" stroke="#B2441D" stroke-width="2px" class="color-4"/>
<path d="M275.556 362.222H204.445V455.555H222.223V440C222.223 430.181 230.182 422.222 240.001 422.222C249.82 422.222 257.779 430.181 257.779 440V455.556H275.557V362.222H275.556Z" stroke="#B2441D" stroke-width="2px" class="color-4"/>
<path d="M257.778 440C257.778 430.181 249.819 422.222 240 422.222C230.182 422.222 222.222 430.181 222.222 440V455.556V468.889H257.777V455.556V440H257.778Z" stroke="#B2441D" stroke-width="2px" class="color-1"/>
<path d="M204.444 362.222H275.556V353.333H240H204.444V362.222Z" stroke="#B2441D" stroke-width="2px" class="color-6"/>
<path d="M222.222 455.556H204.444V468.889H222.222V455.556Z" stroke="#B2441D" stroke-width="2px" class="color-6"/>
<path d="M275.556 455.556H257.778V468.889H275.556V455.556Z" stroke="#B2441D" stroke-width="2px" class="color-6"/>
<path d="M204.444 455.556H191.111V468.889H204.444V455.556Z" stroke="#B2441D" stroke-width="2px" class="color-4"/>
<path d="M204.444 353.333H191.111V362.222H204.444V353.333Z"  stroke="#B2441D" stroke-width="2px"class="color-4"/>
<path d="M288.889 353.333H275.556V362.222H288.889V353.333Z" stroke="#B2441D" stroke-width="2px" class="color-4"/>
<path d="M328.889 220H311.111V228.889H328.889V220Z" stroke="#B2441D" stroke-width="2px"  class="color-4"/>
<path d="M288.889 455.556H275.556V468.889H288.889V455.556Z" stroke="#B2441D" stroke-width="2px" class="color-4"/>
<path d="M368.889 428.889H351.111V446.667H368.889V428.889Z" stroke="#B2441D" stroke-width="2px" class="color-1"/>
<path d="M448.889 428.889H431.111V446.667H448.889V428.889Z" stroke="#B2441D" stroke-width="2px" class="color-1"/>
<path d="M71.111 420H137.778H168.889H191.111V362.222V353.333H182.222L222.222 288.718V286.667H204.444V248.149C204.444 247.331 205.107 246.667 205.925 246.667H220.74C221.558 246.667 222.221 247.33 222.221 248.149V237.779H168.888V411.112H151.11V228.889H168.888V220H120H88.889V228.889V411.111H71.111V322.222H8.88901V455.555H71.111V420ZM177.778 248.148C177.778 247.33 178.441 246.666 179.26 246.666H194.075C194.893 246.666 195.556 247.329 195.556 248.148V286.666H177.778V248.148ZM97.778 228.889H142.223V411.111H97.778V228.889ZM48.889 446.667H31.111V428.889H48.889V446.667V446.667ZM48.889 393.333H31.111V354.815C31.111 353.997 31.774 353.333 32.592 353.333H47.407C48.225 353.333 48.889 353.996 48.889 354.815V393.333V393.333Z" stroke="#B2441D" stroke-width="2px" class="color-6"/>
<path d="M71.111 250.427L57.778 228.889L0 322.222H8.889H71.111V250.427Z" stroke="#B2441D" stroke-width="2px"  class="color-2"/>
<path d="M47.407 353.333H32.593C31.775 353.333 31.112 353.996 31.112 354.815V393.333H48.89V354.815C48.889 353.997 48.226 353.333 47.407 353.333Z" stroke="#B2441D" stroke-width="2px"  class="color-1"/>
<path d="M48.889 428.889H31.111V446.667H48.889V428.889Z" stroke="#B2441D" stroke-width="2px" class="color-1"/>
<path d="M71.111 411.111H88.889V228.889H71.111V250.427V322.222V411.111Z" stroke="#B2441D" stroke-width="2px"  class="color-3"/>
<path d="M142.222 411.111V228.889H97.778V411.111H142.222ZM128.889 393.333H111.111V354.815C111.111 353.997 111.774 353.333 112.592 353.333H127.407C128.225 353.333 128.889 353.996 128.889 354.815V393.333ZM128.889 340H111.111V301.481C111.111 300.663 111.774 300 112.592 300H127.407C128.225 300 128.889 300.663 128.889 301.481V340ZM128.889 286.667H111.111V248.149C111.111 247.331 111.774 246.667 112.592 246.667H127.407C128.225 246.667 128.889 247.33 128.889 248.149V286.667Z" stroke="#B2441D" stroke-width="2px" class="color-3"/>
<path d="M120 220V126.667L62.222 220H71.111H88.889H120Z" stroke="#B2441D" stroke-width="2px"  class="color-5"/>
<path d="M127.407 353.333H112.592C111.774 353.333 111.111 353.996 111.111 354.815V393.333H128.889V354.815C128.889 353.997 128.226 353.333 127.407 353.333Z" stroke="#B2441D" stroke-width="2px" class="color-1"/>
<path d="M127.407 300H112.592C111.774 300 111.111 300.663 111.111 301.481V340H128.889V301.481C128.889 300.663 128.226 300 127.407 300Z" stroke="#B2441D" stroke-width="2px" class="color-1"/>
<path d="M127.407 246.667H112.592C111.774 246.667 111.111 247.33 111.111 248.149V286.667H128.889V248.149C128.889 247.33 128.226 246.667 127.407 246.667Z" stroke="#B2441D" stroke-width="2px" class="color-1"/>
<path d="M71.111 420V455.556H168.889V420H137.778H71.111ZM128.889 446.667H111.111V428.889H128.889V446.667Z" stroke="#B2441D" stroke-width="2px" class="color-4"/>
<path d="M71.111 455.556V468.889H137.778H168.889V455.556H71.111Z" stroke="#B2441D" stroke-width="2px" class="color-6"/>
<path d="M128.889 428.889H111.111V446.667H128.889V428.889Z" stroke="#B2441D" stroke-width="2px" class="color-1"/>
<path d="M168.889 220H177.778L169.524 206.667L120 126.667V220H168.889Z" stroke="#B2441D" stroke-width="2px" class="color-2"/>
<path d="M408.889 220H417.778L360 126.667V220H408.889Z" stroke="#B2441D" stroke-width="2px" class="color-2"/>
<path d="M240 162.222V228.889H257.778H267.513L240 162.222Z" stroke="#B2441D" stroke-width="2px"  class="color-2"/>
<path d="M240 260V322.222V353.333H275.556H288.889H297.778L257.778 288.718L240 260Z" stroke="#B2441D" stroke-width="2px"  class="color-2"/>
<path d="M271.111 135.556H278.519L240 11.111V135.556H271.111Z" stroke="#B2441D" stroke-width="2px" class="color-2"/>
<path d="M151.111 228.889V411.111H168.889V237.778V228.889H151.111Z" stroke="#B2441D" stroke-width="2px" class="color-4"/>
<path d="M71.111 455.556H8.88901V468.889H71.111V455.556Z" stroke="#B2441D" stroke-width="2px" class="color-1"/>
<path d="M311.111 455.556V468.889H337.778H408.889V455.556H311.111Z" stroke="#B2441D" stroke-width="2px" class="color-6"/>
<path d="M471.111 455.556H408.889V468.889H471.111V455.556Z" stroke="#B2441D" stroke-width="2px" class="color-1"/>
<path d="M88.889 220H71.111V228.889H88.889V220Z" stroke="#B2441D" stroke-width="2px" class="color-4"/>
<path d="M240 228.889H222.222V237.778H240V228.889Z" stroke="#B2441D" stroke-width="2px" class="color-4"/>
<path d="M257.778 228.889H240V237.778H257.778V228.889Z" stroke="#B2441D" stroke-width="2px" class="color-6"/>
</svg>
  
</div>
const svg = new Walkway({
    selector: '#svg-castle',
    duration: 3000,
});

  
svg.draw(after);
  
function after(){
    fillPath('color-1','#695a69');
    fillPath('color-2','#b2441d');
    fillPath('color-3','#dfd0c6');
    fillPath('color-4','#c8b2a8');
    fillPath('color-5','#de582a');
    fillPath('color-6','#a08a8a')
}

function fillPath(classname, color){
  const paths = document.querySelectorAll(`#svg-castle .${classname}`);
  for(path of paths){
    path.style.fill = `${color}`;
  }
 }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.