Skip to content

Instantly share code, notes, and snippets.

@hardiksondagar
Created May 4, 2025 17:35
Show Gist options
  • Save hardiksondagar/8aeecba2a5780dd1854f67157344cd6a to your computer and use it in GitHub Desktop.
Save hardiksondagar/8aeecba2a5780dd1854f67157344cd6a to your computer and use it in GitHub Desktop.
Display the source blob
Display the rendered blob
Raw
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" xmlns:bx="https://boxy-svg.com">
<defs>
<bx:export>
<bx:file format="svg"></bx:file>
</bx:export>
</defs>
<style>
/* Base styles for the paths */
path {
fill: none;
stroke: #333; /* Medium slate blue color */
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Animation for each path */
@keyframes drawPath {
0% { stroke-dashoffset: 5000; }
100% { stroke-dashoffset: 0; }
}
/* Subtle glow effect */
.glow {
filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
}
/* Individual path animations with different delays */
#path1 {
stroke-dasharray: 5000;
stroke-dashoffset: 5000;
animation: drawPath 6s ease-in-out forwards;
}
#path2 {
stroke-dasharray: 5000;
stroke-dashoffset: 5000;
animation: drawPath 4s ease-in-out 5s forwards;
}
#path3 {
stroke-dasharray: 5000;
stroke-dashoffset: 5000;
animation: drawPath 3s ease-in-out 8s forwards;
}
/* Smaller decorative paths */
.small-path {
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: drawPath 1s ease-in-out forwards;
}
/* Fill animation at the end */
@keyframes fillIn {
from { fill-opacity: 0; }
to { fill-opacity: 0.2; }
}
.fill {
fill: #fefefe;
fill-opacity: 1;
animation: fillIn 2s ease-in-out 12s forwards;
}
</style>
<g class="glow">
<path id="path1" class="fill" d="m303.5 222.688 2.64-.01c14.331-.018 27.85 1.12 41.86 4.322l2.42.504C369.672 231.552 390.3 242.964 402 259c5.462 8.51 9.173 17.005 11 27l.517 2.358c5.601 30.624-5.301 69.474-22.36 94.983-3.11 4.46-6.567 8.582-10.157 12.659l-2.215 2.582c-7.232 8.274-15.023 15.285-24.035 21.543-8.84 5.89-8.84 5.89-13.438 15.063.484 2.924.484 2.924 2.625 5 12.769 7.556 28.21 7.185 42.583 7.183 2.87.004 5.739.04 8.609.078 1.84.006 3.68.01 5.52.012l2.575.043c6.592-.05 10.15-2.019 14.98-6.59C433.516 423.788 445.086 403.546 457 384c49.024-80.121 49.024-80.121 70-89 3.803-.894 7.637-1.487 11.5-2.063l3.362-.512c36.399-5.389 76.82-8.235 108.689 13.727 4.61 3.478 9.094 7.054 13.449 10.848l1.86 1.602C697.586 348.063 707.461 398.697 709 440c.216 8.29.246 16.582.25 24.875l.002 3.472c-.034 36.28-3.872 71.5-13.252 106.653l-.577 2.168c-7.45 27.317-22.792 53.404-47.83 67.789-15.924 8.368-31.856 11.486-49.718 11.48l-2.11.004c-13.677-.03-26.534-1.89-39.765-5.441l-2.731-.729c-16.052-4.413-28-11.095-40.269-22.271l-2.355-2.137c-21.294-20.305-31.505-52.21-32.738-81.045a335.872 335.872 0 0 1-.04-6.58l-.003-2.407c0-1.663.001-3.326.006-4.988.005-2.535 0-5.069-.007-7.603 0-1.625.002-3.251.004-4.877l-.006-2.273c.018-4.134.334-8.034 1.139-12.09h1l.629 2.79c3.22 13.232 8.239 24.871 17.371 35.21l1.434 1.785C513.136 559.41 538.237 565.63 558 567c28.36 1.134 56.777-1.053 79.313-20.25C657.15 527.69 664.66 501.576 668 475l.281-2.191c4.056-35.383-.79-74.044-22.312-103.497-7.76-9.114-19.83-17.232-31.969-18.312-17.042-1.02-31.202 1.04-44.777 12.305-8.04 7.59-14.129 16.528-20.223 25.695l-2.102 3.148a176.335 176.335 0 0 0-7.71 13.04C533.009 416.704 525.82 427.541 518 438c-1.076 1.48-2.15 2.96-3.223 4.441-6.914 9.522-14.01 18.717-21.777 27.559l-1.392 2.02c-2.337 3.17-4.164 5.594-8.067 6.637-2.944.154-5.783.061-8.725-.126l-3.298-.106a524.96 524.96 0 0 1-6.958-.275c-4.693-.198-9.383-.26-14.08-.321-5.848-.08-11.695-.209-17.543-.329l-7.318-.145c-5.873-.115-11.746-.234-17.619-.355l.801 2.135c19.688 52.56 32.214 113.123 9.144 166.809C412.218 658.402 404.401 669.082 395 679l-1.637 1.743c-4.136 4.284-8.533 7.813-13.425 11.194l-2.248 1.566c-34.213 23.525-74.233 34.148-115.565 27.372-2.737-.53-5.428-1.174-8.125-1.875l-2.328-.586c-25.6-6.613-49.731-18.281-70.672-34.414l-2.957-2.277c-10.774-8.575-19.538-18.243-27.837-29.15-1.556-2.03-3.166-4.017-4.768-6.01-8.61-11.136-15.811-23.17-22.438-35.563l-1.022-1.892C107.79 582.658 98.833 553.547 94 524l-.385-2.26c-2.413-14.436-3.03-28.555-2.896-43.177.031-3.483.04-6.966.047-10.45l.03-6.73.014-3.113c.054-5.51.382-10.818 1.19-16.27 2.388 3.582 2.863 6.917 3.625 11.063C105.371 502.115 127.313 550.593 163 586l2.55 2.543c28.525 27.314 64.394 33.607 102.6 33.752 2.089.012 4.178.032 6.266.062 29.968.424 64.626-3.952 87.584-25.357l2.031-1.871c11.862-12.067 15.225-25.962 15.218-42.314-.156-13.664-1.963-26.531-8.249-38.815l-1.27-2.602c-7.659-14.258-21.937-22.714-36.923-27.575-3.573-1.071-7.173-1.982-10.807-2.823l-1.99-.464c-7.973-1.765-15.82-2.583-23.983-2.81l-4.31-.153a240.367 240.367 0 0 0-8.55-.136c-9.633-.194-9.633-.194-13.737-3.52-2.059-2.541-3.764-5.105-5.43-7.917a243.306 243.306 0 0 0-2.547-3.484C246.585 440.478 228.96 411.677 230 384c5.987-.116 11.831.103 17.787.712 47.475 4.973 47.475 4.973 90.662-10.65 10.885-9.371 20.456-21.528 21.86-36.312.36-10.51-1.548-17.988-8.372-26.246-12.713-12.735-31.463-16.71-48.875-16.817-34.183.463-66.695 11.994-95.31 30.26-5.08 3.054-10.93 4.33-16.752 3.053-3.136-1.91-5.507-4.322-8-7l-1.773-1.79c-7.498-7.972-12.705-17.583-17.102-27.522l-.867-1.956C159.455 280.8 157.556 271.733 159 262c6.563-13.338 26.764-18.46 39.726-22.943 34.164-11.398 68.88-16.258 104.774-16.37Z"></path>
<path id="path2" class="fill" d="M363 138c2.9 2.76 5.222 5.588 7.5 8.875 21.487 29.914 52.83 55.836 90.067 62.296 19.645 2.794 39.556 1.954 58.433-4.171l2.39-.747c28.818-9.168 55.297-26.539 77.27-47.124 5.646-5.137 5.646-5.137 8.293-5.106 2.869 1.37 4.613 3.3 6.797 5.602 3.035 3.133 6.058 6.168 9.375 9 4.15 3.565 8.293 7.231 11.875 11.375v2l3 1c1.98 2.152 1.98 2.152 4.188 4.938l2.39 3L647 192l2.297 2.813 2.14 2.625 1.934 2.37c2.333 3.139 3.51 5.517 4.192 9.38-1.787 12.105-17.076 23.054-26.53 30.185-6.146 4.526-12.49 8.702-19.033 12.627l-2.182 1.317C596.458 261.28 582.698 266.983 568 272l-2.25.804C528.72 285.987 481.765 284.85 446 268c-18.869-8.996-35.66-22.018-48-39l-1.828-2.492C379.376 203.066 362.004 167.655 363 138Z"></path>
<path id="path3" class="fill" d="M476.32 77.875c4.578 1.4 7.597 3.544 11.305 6.5l2.109 1.635c9.639 7.53 18.861 15.473 27.778 23.844 2.555 2.394 5.133 4.684 7.867 6.873L528 119v2l3 1c2.297 2.328 2.297 2.328 4.75 5.25l2.484 2.89C540 133 540 133 539.811 135.444c-.908 2.863-1.929 4.198-4.014 6.334l-1.973 2.057-2.074 2.103c-1.34 1.383-2.679 2.767-4.016 4.153-.64.662-1.282 1.324-1.943 2.005a99.988 99.988 0 0 0-4.588 5.249c-2.47 2.978-5.204 5.22-8.203 7.656a251.036 251.036 0 0 0-6.516 6.59c-7.828 8.066-20.825 21.385-32.671 22.222C460.108 190.893 448.384 179.84 440 169l-2.02-2.586c-5.105-6.763-10.222-13.978-11.98-22.414l-.414-1.973c-.393-3.897-.08-6.26 2.07-9.601 2.382-2.872 4.86-5.642 7.344-8.426 1.75-2.178 3.439-4.398 5.125-6.625a7033.85 7033.85 0 0 1 2.543-3.32 3989.83 3989.83 0 0 0 4.133-5.422c4.73-6.163 9.714-12.099 14.79-17.977a248.546 248.546 0 0 0 4.093-4.969l2.566-3.062 2.266-2.773C473 78 473 78 476.32 77.875Z"></path>
>
</g>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment