CBB - A toggle menu icon using Advanced Group block and SVG Block

CBB - a simple toggle menu icon

<!-- wp:boldblocks/group {"boldblocks":{"width":{"sm":{"inherit":"lg"},"md":{"inherit":"lg"},"lg":{"value":{"width":"custom","value":"36px"},"inherit":null}},"height":{"sm":{"inherit":"lg"},"md":{"inherit":"lg"},"lg":{"value":{"height":"custom","value":"36px"},"inherit":null}},"spacing":{},"overlay":{"opacity":100},"background":{},"textAlignment":{},"verticalAlignment":{},"justifyAlignment":{},"border":{},"enableEllipticalRadius":false,"borderRadius":{},"shadows":[],"transform":{},"transformOrigin":{},"toggle":{"uniqueId":"cpWFot6ucW"},"animations":[],"animateMultipleTimes":false,"customCSS":{"value":"selector svg .bar {\n  transition: .3s;\n}\nselector svg .bar-1 {\n  transform-origin: 50% 25%;\n}\nselector svg .bar-2 {\n  transform-origin: center;\n}\nselector svg .bar-3 {\n  transform-origin: 50% 75%;\n}\nselector .is-toggled-on .bar-2 {\n  transform: scale(0);\n}\nselector .is-toggled-on .bar-1 {\n  transform: translateY(25%) rotate(45deg);\n}\nselector .is-toggled-on .bar-3 {\n  transform: translateY(-25%) rotate(-45deg);\n}","id":"1x6FsV82-m"}}} -->
<div class="wp-block-boldblocks-group wp-block-boldblocks-custom" style="--bb--width--sm:var(--bb--width--lg);--bb--width--md:var(--bb--width--lg);--bb--width--lg:36px;--bb--height--sm:var(--bb--height--lg);--bb--height--md:var(--bb--height--lg);--bb--height--lg:36px"><!-- wp:boldblocks/svg-block {"blockId":"tV2l0e82ui","content":"\u003csvg class=\u0022menu-hamburger\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022 width=\u0022100\u0022 height=\u0022100\u0022 viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 stroke-width=\u00221\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022\u003e\n  \u003cline class=\u0022bar bar-1\u0022 x1=\u00223\u0022 y1=\u00226\u0022 x2=\u002221\u0022 y2=\u00226\u0022\u003e\u003c/line\u003e\n  \u003cline class=\u0022bar bar-2\u0022 x1=\u00223\u0022 y1=\u002212\u0022 x2=\u002221\u0022 y2=\u002212\u0022\u003e\u003c/line\u003e\n  \u003cline class=\u0022bar bar-3\u0022 x1=\u00223\u0022 y1=\u002218\u0022 x2=\u002221\u0022 y2=\u002218\u0022\u003e\u003c/line\u003e\n\u003c/svg\u003e","boldblocks":{"width":{"sm":{"inherit":"lg"},"md":{"inherit":"lg"},"lg":{"value":{"width":"100%","value":"100%"},"inherit":null}}},"className":"js-toggle-main-menu"} -->
<div class="wp-block-boldblocks-svg-block js-toggle-main-menu"><a class="wp-block-boldblocks-svg-block__inner" href="#" style="--bb--width--sm:var(--bb--width--lg);--bb--width--md:var(--bb--width--lg);--bb--width--lg:100%"><svg class="menu-hamburger" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
  <line class="bar bar-1" x1="3" y1="6" x2="21" y2="6"></line>
  <line class="bar bar-2" x1="3" y1="12" x2="21" y2="12"></line>
  <line class="bar bar-3" x1="3" y1="18" x2="21" y2="18"></line>
</svg></a></div>
<!-- /wp:boldblocks/svg-block --></div>
<!-- /wp:boldblocks/group -->

Requirements: WordPress Gutenberg (5.9+) + a block-based theme such as Twenty Twenty Two
Plugins: CBB, SVG Block
Paste as plain text