HERBIE The Love Bug, 1968 to forever

Paint job

Under the hood

Herb playground

Type HTML+ERB and watch what Herb makes of it, computed on the server by the Herb Ruby API on every pause in your typing. Or pick one of Herbie's own templates to see it compiled with slot markers.

205 / 3000 characters. Your source travels in the Herb-State header of a values request; the server answers with only the parts below that changed.

2 elements Β· 1 ERB output tags Β· 0 errors Β· Herb 0.11.0


        
@ DocumentNode (location: (1:0)-(7:0))
└── children: (8 items)
    β”œβ”€β”€ @ ERBCommentNode (location: (1:0)-(1:24))
    β”‚   β”œβ”€β”€ tag_opening: "<%#" (location: (1:0)-(1:3))
    β”‚   β”œβ”€β”€ content: " herb:slots client " (location: (1:3)-(1:22))
    β”‚   └── tag_closing: "%>" (location: (1:22)-(1:24))
    β”‚
    β”œβ”€β”€ @ HTMLTextNode (location: (1:24)-(2:0))
    β”‚   └── content: "\n"
    β”‚
    β”œβ”€β”€ @ ERBCommentNode (location: (2:0)-(2:31))
    β”‚   β”œβ”€β”€ tag_opening: "<%#" (location: (2:0)-(2:3))
    β”‚   β”œβ”€β”€ content: " herb:state (open: false) " (location: (2:3)-(2:29))
    β”‚   └── tag_closing: "%>" (location: (2:29)-(2:31))
    β”‚
    β”œβ”€β”€ @ HTMLTextNode (location: (2:31)-(3:0))
    β”‚   └── content: "\n"
    β”‚
    β”œβ”€β”€ @ HTMLElementNode (location: (3:0)-(3:53))
    β”‚   β”œβ”€β”€ open_tag:
    β”‚   β”‚   └── @ HTMLOpenTagNode (location: (3:0)-(3:32))
    β”‚   β”‚       β”œβ”€β”€ tag_opening: "<" (location: (3:0)-(3:1))
    β”‚   β”‚       β”œβ”€β”€ tag_name: "button" (location: (3:1)-(3:7))
    β”‚   β”‚       β”œβ”€β”€ tag_closing: ">" (location: (3:31)-(3:32))
    β”‚   β”‚       β”œβ”€β”€ children: (1 item)
    β”‚   β”‚       β”‚   └── @ HTMLAttributeNode (location: (3:8)-(3:31))
    β”‚   β”‚       β”‚       β”œβ”€β”€ name:
    β”‚   β”‚       β”‚       β”‚   └── @ HTMLAttributeNameNode (location: (3:8)-(3:24))
    β”‚   β”‚       β”‚       β”‚       └── children: (1 item)
    β”‚   β”‚       β”‚       β”‚           └── @ LiteralNode (location: (3:8)-(3:24))
    β”‚   β”‚       β”‚       β”‚               └── content: "data-herb-toggle"
    β”‚   β”‚       β”‚       β”‚
    β”‚   β”‚       β”‚       β”‚
    β”‚   β”‚       β”‚       β”œβ”€β”€ equals: "=" (location: (3:24)-(3:25))
    β”‚   β”‚       β”‚       └── value:
    β”‚   β”‚       β”‚           └── @ HTMLAttributeValueNode (location: (3:25)-(3:31))
    β”‚   β”‚       β”‚               β”œβ”€β”€ open_quote: """ (location: (3:25)-(3:26))
    β”‚   β”‚       β”‚               β”œβ”€β”€ children: (1 item)
    β”‚   β”‚       β”‚               β”‚   └── @ LiteralNode (location: (3:26)-(3:30))
    β”‚   β”‚       β”‚               β”‚       └── content: "open"
    β”‚   β”‚       β”‚               β”‚
    β”‚   β”‚       β”‚               β”œβ”€β”€ close_quote: """ (location: (3:30)-(3:31))
    β”‚   β”‚       β”‚               └── quoted: true
    β”‚   β”‚       β”‚
    β”‚   β”‚       β”‚
    β”‚   β”‚       └── is_void: false
    β”‚   β”‚
    β”‚   β”œβ”€β”€ tag_name: "button" (location: (3:1)-(3:7))
    β”‚   β”œβ”€β”€ body: (1 item)
    β”‚   β”‚   └── @ HTMLTextNode (location: (3:32)-(3:44))
    β”‚   β”‚       └── content: "Pop the hood"
    β”‚   β”‚
    β”‚   β”œβ”€β”€ close_tag:
    β”‚   β”‚   └── @ HTMLCloseTagNode (location: (3:44)-(3:53))
    β”‚   β”‚       β”œβ”€β”€ tag_opening: "</" (location: (3:44)-(3:46))
    β”‚   β”‚       β”œβ”€β”€ tag_name: "button" (location: (3:46)-(3:52))
    β”‚   β”‚       β”œβ”€β”€ children: []
    β”‚   β”‚       └── tag_closing: ">" (location: (3:52)-(3:53))
    β”‚   β”‚
    β”‚   β”œβ”€β”€ is_void: false
    β”‚   └── element_source: "HTML"
    β”‚
    β”œβ”€β”€ @ HTMLTextNode (location: (3:53)-(4:0))
    β”‚   └── content: "\n"
    β”‚
    β”œβ”€β”€ @ ERBIfNode (location: (4:0)-(6:9))
    β”‚   β”œβ”€β”€ tag_opening: "<%" (location: (4:0)-(4:2))
    β”‚   β”œβ”€β”€ content: " if open " (location: (4:2)-(4:11))
    β”‚   β”œβ”€β”€ tag_closing: "%>" (location: (4:11)-(4:13))
    β”‚   β”œβ”€β”€ then_keyword: βˆ…
    β”‚   β”œβ”€β”€ statements: (3 items)
    β”‚   β”‚   β”œβ”€β”€ @ HTMLTextNode (location: (4:13)-(5:2))
    β”‚   β”‚   β”‚   └── content: "\n  "
    β”‚   β”‚   β”‚
    β”‚   β”‚   β”œβ”€β”€ @ HTMLElementNode (location: (5:2)-(5:69))
    β”‚   β”‚   β”‚   β”œβ”€β”€ open_tag:
    β”‚   β”‚   β”‚   β”‚   └── @ HTMLOpenTagNode (location: (5:2)-(5:20))
    β”‚   β”‚   β”‚   β”‚       β”œβ”€β”€ tag_opening: "<" (location: (5:2)-(5:3))
    β”‚   β”‚   β”‚   β”‚       β”œβ”€β”€ tag_name: "p" (location: (5:3)-(5:4))
    β”‚   β”‚   β”‚   β”‚       β”œβ”€β”€ tag_closing: ">" (location: (5:19)-(5:20))
    β”‚   β”‚   β”‚   β”‚       β”œβ”€β”€ children: (1 item)
    β”‚   β”‚   β”‚   β”‚       β”‚   └── @ HTMLAttributeNode (location: (5:5)-(5:19))
    β”‚   β”‚   β”‚   β”‚       β”‚       β”œβ”€β”€ name:
    β”‚   β”‚   β”‚   β”‚       β”‚       β”‚   └── @ HTMLAttributeNameNode (location: (5:5)-(5:10))
    β”‚   β”‚   β”‚   β”‚       β”‚       β”‚       └── children: (1 item)
    β”‚   β”‚   β”‚   β”‚       β”‚       β”‚           └── @ LiteralNode (location: (5:5)-(5:10))
    β”‚   β”‚   β”‚   β”‚       β”‚       β”‚               └── content: "class"
    β”‚   β”‚   β”‚   β”‚       β”‚       β”‚
    β”‚   β”‚   β”‚   β”‚       β”‚       β”‚
    β”‚   β”‚   β”‚   β”‚       β”‚       β”œβ”€β”€ equals: "=" (location: (5:10)-(5:11))
    β”‚   β”‚   β”‚   β”‚       β”‚       └── value:
    β”‚   β”‚   β”‚   β”‚       β”‚           └── @ HTMLAttributeValueNode (location: (5:11)-(5:19))
    β”‚   β”‚   β”‚   β”‚       β”‚               β”œβ”€β”€ open_quote: """ (location: (5:11)-(5:12))
    β”‚   β”‚   β”‚   β”‚       β”‚               β”œβ”€β”€ children: (1 item)
    β”‚   β”‚   β”‚   β”‚       β”‚               β”‚   └── @ LiteralNode (location: (5:12)-(5:18))
    β”‚   β”‚   β”‚   β”‚       β”‚               β”‚       └── content: "engine"
    β”‚   β”‚   β”‚   β”‚       β”‚               β”‚
    β”‚   β”‚   β”‚   β”‚       β”‚               β”œβ”€β”€ close_quote: """ (location: (5:18)-(5:19))
    β”‚   β”‚   β”‚   β”‚       β”‚               └── quoted: true
    β”‚   β”‚   β”‚   β”‚       β”‚
    β”‚   β”‚   β”‚   β”‚       β”‚
    β”‚   β”‚   β”‚   β”‚       └── is_void: false
    β”‚   β”‚   β”‚   β”‚
    β”‚   β”‚   β”‚   β”œβ”€β”€ tag_name: "p" (location: (5:3)-(5:4))
    β”‚   β”‚   β”‚   β”œβ”€β”€ body: (2 items)
    β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ @ HTMLTextNode (location: (5:20)-(5:40))
    β”‚   β”‚   β”‚   β”‚   β”‚   └── content: "1600cc, air-cooled, "
    β”‚   β”‚   β”‚   β”‚   β”‚
    β”‚   β”‚   β”‚   β”‚   └── @ ERBContentNode (location: (5:40)-(5:65))
    β”‚   β”‚   β”‚   β”‚       β”œβ”€β”€ tag_opening: "<%=" (location: (5:40)-(5:43))
    β”‚   β”‚   β”‚   β”‚       β”œβ”€β”€ content: " "full of opinions" " (location: (5:43)-(5:63))
    β”‚   β”‚   β”‚   β”‚       β”œβ”€β”€ tag_closing: "%>" (location: (5:63)-(5:65))
    β”‚   β”‚   β”‚   β”‚       β”œβ”€β”€ parsed: true
    β”‚   β”‚   β”‚   β”‚       └── valid: true
    β”‚   β”‚   β”‚   β”‚
    β”‚   β”‚   β”‚   β”œβ”€β”€ close_tag:
    β”‚   β”‚   β”‚   β”‚   └── @ HTMLCloseTagNode (location: (5:65)-(5:69))
    β”‚   β”‚   β”‚   β”‚       β”œβ”€β”€ tag_opening: "</" (location: (5:65)-(5:67))
    β”‚   β”‚   β”‚   β”‚       β”œβ”€β”€ tag_name: "p" (location: (5:67)-(5:68))
    β”‚   β”‚   β”‚   β”‚       β”œβ”€β”€ children: []
    β”‚   β”‚   β”‚   β”‚       └── tag_closing: ">" (location: (5:68)-(5:69))
    β”‚   β”‚   β”‚   β”‚
    β”‚   β”‚   β”‚   β”œβ”€β”€ is_void: false
    β”‚   β”‚   β”‚   └── element_source: "HTML"
    β”‚   β”‚   β”‚
    β”‚   β”‚   └── @ HTMLTextNode (location: (5:69)-(6:0))
    β”‚   β”‚       └── content: "\n"
    β”‚   β”‚
    β”‚   β”œβ”€β”€ subsequent: βˆ…
    β”‚   └── end_node:
    β”‚       └── @ ERBEndNode (location: (6:0)-(6:9))
    β”‚           β”œβ”€β”€ tag_opening: "<%" (location: (6:0)-(6:2))
    β”‚           β”œβ”€β”€ content: " end " (location: (6:2)-(6:7))
    β”‚           └── tag_closing: "%>" (location: (6:7)-(6:9))
    β”‚
    β”‚
    └── @ HTMLTextNode (location: (6:9)-(7:0))
        └── content: "\n"

        
        
        
        
      
    

  


  

    
Herbie's own templates, compiled

    
The Ruby that ReActionView generates for each of this app's templates: slot markers, state overrides, debug attributes, instrumentation frames and scoped styles included.

    
    
      
 _herb_occurrence = ((@_herb_region_occurrences ||= ::Hash.new(0))["app/views/shared/_herbie.html.erb"] += 1) - 1 ;
@output_buffer.safe_append='<!--herb-region:app/views/shared/_herbie.html.erb:4ac64a33:'.freeze;
@output_buffer.append=(_herb_occurrence);
@output_buffer.safe_append='-->

'.freeze;
;
_herb_state_overrides = ::Herb::Engine::Slots::StateOverrides.resolve((__herb_state_overrides if defined?(__herb_state_overrides)), "app/views/shared/_herbie.html.erb");
body = ::Herb::Engine::Slots::StateOverrides.fetch(_herb_state_overrides, "body", :string) { body_color };
stripe = ::Herb::Engine::Slots::StateOverrides.fetch(_herb_state_overrides, "stripe", :string) { stripe_color };
racing_number = ::Herb::Engine::Slots::StateOverrides.fetch(_herb_state_overrides, "racing_number", :integer) { number };
stripes = ::Herb::Engine::Slots::StateOverrides.fetch(_herb_state_overrides, "stripes", :boolean) { !!(stripes_on) };
sunroof = ::Herb::Engine::Slots::StateOverrides.fetch(_herb_state_overrides, "sunroof", :boolean) { !!(sunroof_on) };
whitewalls = ::Herb::Engine::Slots::StateOverrides.fetch(_herb_state_overrides, "whitewalls", :boolean) { !!(whitewalls_on) };
mood = ::Herb::Engine::Slots::StateOverrides.fetch(_herb_state_overrides, "mood", :string) { mood_seed };
_herb_seeds = { "body" => body, "stripe" => stripe, "racing_number" => racing_number, "stripes" => stripes, "sunroof" => sunroof, "whitewalls" => whitewalls, "mood" => mood }.select { |_, v| [true, false, ::Integer, ::String, ::Symbol, nil].any? { |t| t === v } }.transform_values { |v| v.is_a?(::Symbol) ? v.to_s : v }.merge({ "body" => body, "stripe" => stripe, "racing_number" => racing_number, "stripes" => stripes, "sunroof" => sunroof, "whitewalls" => whitewalls, "mood" => mood }.select { |_, v| [true, false, ::Integer, ::String, ::Symbol, nil].any? { |t| t === v } }.transform_values { |v| v.is_a?(::Symbol) ? v.to_s : v }.slice(*(_herb_state_overrides || {}).keys));
@output_buffer << ::Herb::Engine.raw("<!--herb-seeds:" + ::JSON.generate(_herb_seeds).gsub("--", "-\\u002d") + "-->") ;
@output_buffer.safe_append='
'.freeze;

 @output_buffer.safe_append='
'.freeze;
::Herb::Engine::ScopedStyle::Channel.record("data-herb-scope-3a70b215", ".herbie[data-herb-scope-3a70b215] {\n  inline-size: 100%;\n  overflow: visible;\n}\n\n.herbie[data-size=\"sm\"][data-herb-scope-3a70b215] {\n  max-inline-size: 7rem;\n}\n\n.herbie[data-size=\"md\"][data-herb-scope-3a70b215] {\n  max-inline-size: 22rem;\n}\n\n.herbie[data-size=\"lg\"][data-herb-scope-3a70b215] {\n  max-inline-size: 40rem;\n}\n\n.bob[data-herb-scope-3a70b215] {\n  animation: 2.4s ease-in-out infinite bob;\n  transform-origin: 50% 100%;\n}\n\n.wheel[data-herb-scope-3a70b215] {\n  transform-box: fill-box;\n  transform-origin: center;\n  animation: 1.1s linear infinite spin;\n}\n\n.herbie:hover .wheel[data-herb-scope-3a70b215] {\n  animation-duration: .35s;\n}\n\n.herbie:hover .bob[data-herb-scope-3a70b215] {\n  animation-duration: .6s;\n}\n\n[data-on=\"false\"][data-herb-scope-3a70b215] {\n  display: none;\n}\n\n.mood[data-herb-scope-3a70b215] {\n  font-size: 34px;\n  opacity: 0;\n  transition: opacity .3s;\n}\n\n.moods[data-mood=\"plucky\"] .mood-plucky[data-herb-scope-3a70b215], .moods[data-mood=\"jealous\"] .mood-jealous[data-herb-scope-3a70b215], .moods[data-mood=\"heroic\"] .mood-heroic[data-herb-scope-3a70b215], .moods[data-mood=\"mischievous\"] .mood-mischievous[data-herb-scope-3a70b215], .moods[data-mood=\"lovesick\"] .mood-lovesick[data-herb-scope-3a70b215], .moods[data-mood=\"stubborn\"] .mood-stubborn[data-herb-scope-3a70b215] {\n  opacity: 1;\n  animation: 2s ease-in-out infinite float;\n}\n\n.headlight[data-herb-scope-3a70b215] {\n  transition: filter .3s;\n}\n\n.moods[data-mood=\"heroic\"] ~ g .headlight[data-herb-scope-3a70b215] {\n  filter: drop-shadow(0 0 8px #fff3a0);\n}\n\n.roundel-text[data-herb-scope-3a70b215] {\n  font-family: Bungee, Arial Black, sans-serif;\n  font-size: 21px;\n}\n\n@keyframes bob {\n  50% {\n    transform: translateY(-3px) rotate(-.6deg);\n  }\n}\n\n@keyframes spin {\n  to {\n    rotate: 360deg;\n  }\n}\n\n@keyframes float {\n  50% {\n    translate: 0 -6px;\n  }\n}\n") ;
@output_buffer.safe_append='
<svg class="herbie" data-size="'.freeze;
@output_buffer.append=(size);
@output_buffer.safe_append='" viewBox="0 0 420 220" role="img" aria-label="'.freeze;
@output_buffer.append=(caption);
@output_buffer.safe_append='" data-herb-scope-3a70b215 data-herb-slot="0:attribute:data-size 1:attribute:aria-label">
  <title data-herb-scope-3a70b215 data-herb-slot="2:raw_text">'.freeze;
@output_buffer.append=(caption);
@output_buffer.safe_append='</title>
  <defs data-herb-scope-3a70b215>
    <linearGradient id="herbie-glass" x1="0" y1="0" x2="0" y2="1" data-herb-scope-3a70b215>
      <stop offset="0" stop-color="#9fc4dc" data-herb-scope-3a70b215></stop>
      <stop offset="1" stop-color="#2d4558" data-herb-scope-3a70b215></stop>
    </linearGradient>
    <linearGradient id="herbie-chrome" x1="0" y1="0" x2="0" y2="1" data-herb-scope-3a70b215>
      <stop offset="0" stop-color="#ffffff" data-herb-scope-3a70b215></stop>
      <stop offset="0.5" stop-color="#a9b0bb" data-herb-scope-3a70b215></stop>
      <stop offset="1" stop-color="#e9edf2" data-herb-scope-3a70b215></stop>
    </linearGradient>
    <radialGradient id="herbie-shine" cx="0.35" cy="0.25" r="0.7" data-herb-scope-3a70b215>
      <stop offset="0" stop-color="#ffffff" stop-opacity="0.55" data-herb-scope-3a70b215></stop>
      <stop offset="1" stop-color="#ffffff" stop-opacity="0" data-herb-scope-3a70b215></stop>
    </radialGradient>
  </defs>

  <ellipse cx="212" cy="196" rx="176" ry="9" fill="#000" opacity="0.18" data-herb-scope-3a70b215></ellipse>

  <g class="moods" data-mood="'.freeze;
@output_buffer.append=(mood);
@output_buffer.safe_append='" data-herb-scope-3a70b215 data-herb-slot="3:attribute:data-mood">
    <text class="mood mood-plucky" x="300" y="34" data-herb-scope-3a70b215>✨</text>
    <text class="mood mood-jealous" x="300" y="34" data-herb-scope-3a70b215>😀</text>
    <text class="mood mood-heroic" x="300" y="34" data-herb-scope-3a70b215>🏁</text>
    <text class="mood mood-mischievous" x="300" y="34" data-herb-scope-3a70b215>😈</text>
    <text class="mood mood-lovesick" x="300" y="34" data-herb-scope-3a70b215>πŸ’•</text>
    <text class="mood mood-stubborn" x="300" y="34" data-herb-scope-3a70b215>πŸ’’</text>
  </g>

  <g class="bob" data-herb-scope-3a70b215>
    <rect x="138" y="150" width="134" height="10" rx="3" fill="#3a3f4a" data-herb-scope-3a70b215></rect>

    <path d="M 52 160 C 46 132, 62 110, 96 100 C 118 62, 160 40, 212 40 C 258 40, 286 58, 304 90 C 334 96, 360 112, 368 140 L 370 160 Z" fill="'.freeze;
@output_buffer.append=(body);
@output_buffer.safe_append='" stroke="#00000033" stroke-width="2" data-herb-scope-3a70b215 data-herb-slot="4:attribute:fill"></path>
    <path d="M 48 163 C 50 116, 164 108, 172 163 Z" fill="'.freeze;
@output_buffer.append=(body);
@output_buffer.safe_append='" stroke="#00000040" stroke-width="2" data-herb-scope-3a70b215 data-herb-slot="5:attribute:fill"></path>
    <path d="M 260 163 C 266 114, 366 114, 374 163 Z" fill="'.freeze;
@output_buffer.append=(body);
@output_buffer.safe_append='" stroke="#00000040" stroke-width="2" data-herb-scope-3a70b215 data-herb-slot="6:attribute:fill"></path>
    <path d="M 52 160 C 46 132, 62 110, 96 100 C 118 62, 160 40, 212 40 C 258 40, 286 58, 304 90 C 334 96, 360 112, 368 140 L 370 160 Z" fill="url(#herbie-shine)" data-herb-scope-3a70b215></path>

    <g data-on="'.freeze;
@output_buffer.append=(stripes);
@output_buffer.safe_append='" data-herb-scope-3a70b215 data-herb-slot="7:attribute:data-on">
      <path d="M 96 100 C 118 62, 160 40, 212 40 C 258 40, 286 58, 304 90 C 334 96, 360 112, 368 140" fill="none" stroke="'.freeze;
@output_buffer.append=(stripe);
@output_buffer.safe_append='" stroke-width="9" transform="translate(0 4)" data-herb-scope-3a70b215 data-herb-slot="8:attribute:stroke"></path>
      <path d="M 96 100 C 118 62, 160 40, 212 40 C 258 40, 286 58, 304 90 C 334 96, 360 112, 368 140" fill="none" stroke="#1f3a93" stroke-width="2.5" transform="translate(0 11)" data-herb-scope-3a70b215></path>
    </g>

    <rect data-on="'.freeze;
@output_buffer.append=(sunroof);
@output_buffer.safe_append='" x="178" y="37" width="54" height="6" rx="3" fill="#1d2129" data-herb-scope-3a70b215 data-herb-slot="9:attribute:data-on"></rect>

    <path d="M 124 98 C 138 74, 160 60, 192 56 L 196 98 Z" fill="url(#herbie-glass)" stroke="url(#herbie-chrome)" stroke-width="3" data-herb-scope-3a70b215></path>
    <path d="M 206 56 C 240 55, 268 66, 288 94 L 206 98 Z" fill="url(#herbie-glass)" stroke="url(#herbie-chrome)" stroke-width="3" data-herb-scope-3a70b215></path>
    <path d="M 200 100 L 292 100 L 286 150 L 200 150 Z" fill="none" stroke="#00000030" stroke-width="2" data-herb-scope-3a70b215></path>
    <rect x="212" y="110" width="14" height="4" rx="2" fill="url(#herbie-chrome)" data-herb-scope-3a70b215></rect>

    <circle cx="246" cy="126" r="20" fill="#fff" stroke="#111" stroke-width="3" data-herb-scope-3a70b215></circle>
    <text class="roundel-text" x="246" y="134" text-anchor="middle" fill="#111" data-herb-scope-3a70b215 data-herb-slot="10:child">'.freeze;
@output_buffer.append=(racing_number);
@output_buffer.safe_append='</text>

    <rect x="54" y="118" width="7" height="14" rx="3" fill="#c8102e" data-herb-scope-3a70b215></rect>
    <rect x="38" y="150" width="20" height="7" rx="3.5" fill="url(#herbie-chrome)" data-herb-scope-3a70b215></rect>
    <rect x="362" y="150" width="22" height="7" rx="3.5" fill="url(#herbie-chrome)" data-herb-scope-3a70b215></rect>
  </g>

  <g data-herb-scope-3a70b215>
    <ellipse class="headlight" cx="342" cy="127" rx="9" ry="7.5" fill="#fff9d6" stroke="url(#herbie-chrome)" stroke-width="3" data-herb-scope-3a70b215></ellipse>
  </g>

  <g class="wheel" data-herb-scope-3a70b215>
    <circle cx="110" cy="166" r="26" fill="#1b1c21" data-herb-scope-3a70b215></circle>
    <circle data-on="'.freeze;
@output_buffer.append=(whitewalls);
@output_buffer.safe_append='" cx="110" cy="166" r="18" fill="none" stroke="#f3f1ea" stroke-width="5" data-herb-scope-3a70b215 data-herb-slot="11:attribute:data-on"></circle>
    <circle cx="110" cy="166" r="11" fill="url(#herbie-chrome)" data-herb-scope-3a70b215></circle>
    <path d="M 110 157 L 110 175 M 101 166 L 119 166" stroke="#7d8591" stroke-width="2" data-herb-scope-3a70b215></path>
  </g>
  <g class="wheel" data-herb-scope-3a70b215>
    <circle cx="317" cy="166" r="26" fill="#1b1c21" data-herb-scope-3a70b215></circle>
    <circle data-on="'.freeze;
@output_buffer.append=(whitewalls);
@output_buffer.safe_append='" cx="317" cy="166" r="18" fill="none" stroke="#f3f1ea" stroke-width="5" data-herb-scope-3a70b215 data-herb-slot="12:attribute:data-on"></circle>
    <circle cx="317" cy="166" r="11" fill="url(#herbie-chrome)" data-herb-scope-3a70b215></circle>
    <path d="M 317 157 L 317 175 M 308 166 L 326 166" stroke="#7d8591" stroke-width="2" data-herb-scope-3a70b215></path>
  </g>
</svg>
<!--/herb-region:app/views/shared/_herbie.html.erb-->'.freeze;
::Herb::Engine::Slots::Manifest::Channel.record("app/views/shared/_herbie.html.erb:4ac64a33", "{\"file\":\"app\\/views\\/shared\\/_herbie.html.erb\",\"identifier\":\"app\\/views\\/shared\\/_herbie.html.erb\",\"version\":\"4ac64a33\",\"names\":{},\"parts\":{},\"bindings\":{},\"states\":{\"version\":\"4ac64a33\",\"declarations\":[{\"name\":\"body\",\"kind\":\"string\",\"default\":\"body_color\",\"derived\":null,\"line\":3,\"column\":16,\"scope\":\"region\"},{\"name\":\"stripe\",\"kind\":\"string\",\"default\":\"stripe_color\",\"derived\":null,\"line\":3,\"column\":34,\"scope\":\"region\"},{\"name\":\"racing_number\",\"kind\":\"integer\",\"default\":\"number\",\"derived\":null,\"line\":3,\"column\":56,\"scope\":\"region\"},{\"name\":\"stripes\",\"kind\":\"boolean\",\"default\":\"stripes_on\",\"derived\":null,\"line\":3,\"column\":79,\"scope\":\"region\"},{\"name\":\"sunroof\",\"kind\":\"boolean\",\"default\":\"sunroof_on\",\"derived\":null,\"line\":3,\"column\":100,\"scope\":\"region\"},{\"name\":\"whitewalls\",\"kind\":\"boolean\",\"default\":\"whitewalls_on\",\"derived\":null,\"line\":3,\"column\":121,\"scope\":\"region\"},{\"name\":\"mood\",\"kind\":\"string\",\"default\":\"mood_seed\",\"derived\":null,\"line\":3,\"column\":148,\"scope\":\"region\"}],\"reads\":{\"mood\":[3],\"body\":[4,5,6],\"stripes\":[7],\"stripe\":[8],\"sunroof\":[9],\"racing_number\":[10],\"whitewalls\":[11,12]},\"conditionals\":{},\"presence\":{},\"computed\":{},\"server\":{\"branches\":{},\"reads\":{}},\"fragments\":{}}}");
@output_buffer

      
    
  







    

    




    






  

    
    
    esc
  

  
  
0 characters typed Β· ↑↓ to choose Β· ⏎ to go