Skip to content

Instantly share code, notes, and snippets.

@wpsoul
Created May 5, 2024 21:01
Show Gist options
  • Save wpsoul/9dcdf33b7c236f69992ad22ab8a02ea5 to your computer and use it in GitHub Desktop.
Save wpsoul/9dcdf33b7c236f69992ad22ab8a02ea5 to your computer and use it in GitHub Desktop.
SVG change color animation in wordpress
<!-- wp:greenshift-blocks/svgshape {"id":"gsbp-6cc64a2","dynamicGClasses":[{"value":"changesvgcolor","type":"local","label":"changesvgcolor","localed":false,"css":"","attributes":{},"originalID":"gsbp-6cc64a2","originalBlock":"greenshift-blocks/svgshape","selectors":[]}],"animation":{"duration":800,"easing":"ease","type":"","usegsap":true,"customProps":[{"name":"fill","value":"red"}],"customobject":".changesvgcolor svg","set_from":"to","delay":null},"className":"changesvgcolor"} -->
<div class="wp-block-greenshift-blocks-svgshape gspb_svgBox gspb_svgBox-id-gsbp-6cc64a2 changesvgcolor" id="gspb_svgBox-id-gsbp-6cc64a2" data-gsapinit="1" data-duration="0.8" data-customprops="[{&quot;name&quot;:&quot;fill&quot;,&quot;value&quot;:&quot;red&quot;}]" data-customobject=".changesvgcolor svg"><svg xmlns="https://www.w3.org/2000/svg" version="1.1" data-style="1" x="0px" y="0px" viewBox="0 0 300 32" preserveAspectRatio="none" fill="#333"><path d="M289.722 18.6424C287.142 20.54 284.38 22.1627 281.678 23.871C282.262 22.9424 282.838 22.0091 283.467 21.1234C285.128 18.7805 287.086 16.8221 289.241 14.9447C289.248 14.9376 289.25 14.9292 289.257 14.9221C291.76 14.7054 294.261 14.4626 296.762 14.2126C294.432 15.6995 291.99 16.9745 289.722 18.6424ZM278.547 15.7531C281.294 15.5614 284.041 15.3483 286.787 15.1209C283.948 17.2543 281.256 20.2603 279.283 23.3222C278.986 21.14 278.735 17.8531 278.547 15.7531ZM246.379 19.29C245.452 20.1353 243.383 18.565 241.794 17.3709C244.002 17.3245 246.21 17.2674 248.419 17.2043C247.759 17.9198 247.098 18.6352 246.379 19.29ZM242.908 14.9447C244.378 13.8506 245.202 13.0161 247.115 14.0245C247.51 14.2328 247.957 14.584 248.425 14.9471C246.519 15.003 244.612 15.0519 242.706 15.0959C242.772 15.0447 242.84 14.9947 242.908 14.9447ZM266.4 14.2137C266.318 14.2185 266.237 14.2233 266.156 14.228C265.926 14.009 265.636 13.859 265.308 13.7649C265.259 13.584 265.201 13.4054 265.118 13.2375C265.663 13.4054 266.114 13.7352 266.4 14.2137ZM286.355 12.8649C283.79 13.078 281.224 13.278 278.657 13.459C278.503 10.8887 278.476 8.05652 278.075 5.37553C280.313 8.29581 283.285 10.8316 286.355 12.8649ZM296.497 11.9387C293.843 12.2042 291.191 12.4566 288.536 12.6863C286.766 11.2637 285.049 9.80059 283.423 8.19104C282.195 6.97793 281.085 5.66839 279.976 4.36004C282.389 5.63863 284.904 6.7565 287.371 7.86723C290.357 9.21249 293.386 10.7744 296.497 11.9387ZM51.091 18.1888C49.3374 19.2472 47.6124 20.3555 45.8742 21.4377C44.5695 22.2508 43.6159 22.7186 42.1492 21.8924C39.5218 20.4103 39.7706 16.6674 42.7444 15.6638C44.4957 15.0733 47.31 15.5614 49.166 15.5316C51.4279 15.4947 53.6898 15.4602 55.9518 15.4292C54.2875 16.2769 52.6731 17.234 51.091 18.1888ZM31.7859 19.6984C29.6085 21.4222 28.0276 23.4555 25.2847 24.4008C22.2406 25.4484 22.6656 17.7328 23.7668 16.5209C24.843 15.3364 28.6038 15.9638 30.0585 15.9292C32.7241 15.8638 35.3908 15.8031 38.0563 15.7459C35.8622 16.8769 33.7503 18.1424 31.7859 19.6984ZM11.2773 26.8758C9.83444 27.7735 8.21894 28.3366 6.60701 28.8378C2.70696 30.0497 2.04267 25.9925 3.77841 23.1436C5.25343 20.7246 7.8487 18.5198 10.3464 17.2293C11.6619 16.5495 12.7071 16.409 14.1417 16.3626C15.1821 16.3281 20.5084 16.8602 21.0953 16.1673C20.5024 16.8674 19.956 17.6197 19.387 18.4412C17.3143 21.44 14.4762 24.8865 11.2773 26.8758ZM7.30702 2.36596C9.11657 2.30525 10.8952 3.49931 12.3321 4.44575C16.0822 6.91603 18.8429 11.0375 22.4108 13.784C19.8846 14.0328 17.3595 14.2971 14.8381 14.5923C13.9476 14.6959 12.6809 15.1138 11.7904 14.9483C9.46777 14.5138 6.59154 11.8066 5.01175 10.1673C2.35934 7.41365 3.24744 2.50287 7.30702 2.36596ZM30.8728 6.96841C34.2312 8.75891 37.5456 10.6827 40.9587 12.378C37.6932 12.5566 34.43 12.7721 31.1705 13.0244C29.33 13.1661 27.2716 13.9042 25.4394 13.3649C23.0668 12.6661 22.3989 9.55178 22.1227 7.38508C21.456 2.14929 29.63 6.30649 30.8728 6.96841ZM46.2457 4.96243C50.2219 2.90049 55.7363 7.26603 58.8244 9.68988C59.5851 10.2875 60.3411 11.0042 61.1221 11.6697C57.9232 11.7256 54.7256 11.8054 51.5291 11.9149C49.7374 11.9756 44.6802 13.1375 43.3432 11.6768C42.2016 10.4268 43.454 7.91604 44.2421 6.78864C44.8421 5.93149 45.5183 5.33862 46.2457 4.96243ZM299.358 11.7518C296.038 9.40773 291.988 7.95176 288.321 6.23983C284.482 4.44813 280.78 2.38501 276.95 0.587366C275.099 -0.281694 276.122 3.22907 276.193 3.97075C276.505 7.18865 276.024 10.3875 276.722 13.5911C275.393 13.6804 274.066 13.7792 272.735 13.8411C272.116 11.1744 269.819 8.87082 267.649 7.3577C266.211 6.35411 262.012 3.54217 260.551 5.68268C261.515 6.50888 263.59 6.80888 264.78 7.39818C267.062 8.52795 269.017 10.4577 270.381 12.5982C270.662 13.0387 270.867 13.4959 271.027 13.9602C269.913 14.0268 268.798 14.0828 267.682 14.1423C267.079 10.5911 260.312 9.88869 259.517 13.5923C259.44 13.9518 259.201 14.228 259.15 14.559C259.112 14.8078 253.955 15.0138 253.44 14.9959C250.887 14.909 250.022 13.7328 248 12.5125C247.087 11.9625 246.235 11.5232 245.176 11.4149C243.184 11.2161 241.57 13.5268 240.047 14.4614C237.86 15.8031 234.804 15.2435 232.317 15.2721C225.851 15.3471 219.384 15.3578 212.917 15.3197C199.979 15.2423 187.042 14.9673 174.108 14.6007C168.416 14.4399 162.726 14.2614 157.035 14.0745C126.466 13.0709 95.3071 11.2423 64.359 11.6149C61.2756 10.297 57.7542 6.38864 55.2601 4.81957C52.9458 3.36241 49.6267 2.05167 46.8421 2.66954C42.0504 3.73146 40.2611 7.07793 41.5849 10.7304C38.0217 8.65057 34.3098 6.78031 30.6788 4.84219C28.2537 3.54693 25.7382 2.58144 23.0168 3.41479C20.2179 4.27313 20.0572 6.72912 20.8132 9.20534C16.5381 4.75885 11.5047 -0.29479 6.30821 0.538555C-3.4836 2.10763 3.10221 13.4375 9.69278 15.784C6.17964 17.4769 3.28673 19.7972 1.15099 23.1829C-0.593082 25.9472 -0.516898 29.6675 2.50457 31.2854C5.56771 32.9259 11.0404 29.6783 13.5523 28.1056C16.9143 26.0008 19.1893 22.7674 21.4679 19.5662C20.7274 23.2424 20.8167 26.9901 25.549 26.358C28.224 26.002 30.4264 23.6913 32.305 21.971C34.3348 20.1138 36.6122 18.7269 38.9908 17.4864C37.4372 20.7484 36.9277 24.5234 41.3289 25.3758C44.0611 25.9044 47.4623 22.9008 49.5338 21.6115C53.472 19.1626 57.3696 17.1233 61.609 15.3495C92.1701 14.9959 122.679 15.2411 153.389 16.2221C179.22 17.0471 205.063 17.7793 230.91 17.5328C233.114 17.5114 235.317 17.0578 237.525 17.2638C240.157 17.5078 241.538 18.971 243.515 20.5257C244.091 20.9781 245.121 22.0234 245.989 21.6912C248.101 20.8853 248.874 18.3543 250.839 17.3983C251.607 17.0245 259.35 16.4769 259.453 16.815C259.699 17.6126 260.255 18.3269 261.282 18.7638C263.501 19.7055 266.955 19.0091 267.502 16.4293C269.054 16.3483 269.823 16.315 271.374 16.2233C271.291 19.4495 268.894 22.5555 265.692 23.3901C264.688 23.652 264.879 24.921 265.684 25.2984C266.549 25.7044 268.445 24.2496 269.082 23.7734C271.498 21.9734 272.971 19.1448 272.971 16.1221C274.357 16.0364 275.743 15.94 277.127 15.8471C277.13 17.7805 277.27 19.721 277.345 21.6484C277.387 22.6793 277.033 29.2068 279.2 27.9961C283.195 25.7651 287.046 23.0532 290.671 20.2662C292.106 19.1626 293.381 17.865 294.937 16.9269C296.524 15.9721 298.083 15.3233 299.35 13.8697C300.211 13.4161 300.219 12.0268 299.358 11.7518Z" data-style="1"></path><defs><linearGradient><stop></stop><stop></stop></linearGradient></defs></svg></div>
<!-- /wp:greenshift-blocks/svgshape -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment